SXSW2012: Get The Look: Use Font-Face and CSS3 Like the Stars

A rounded sans-serif with a letterpress look? A chunky slab serif in three-dimensional perspective? Grungy, patterned, or even blurred text? These effects (and more) used to be the domain of print designers or gigantic, inflexible PNG images. But no more! Using CSS3 and @font-face, I’ll show you how to get these looks with live demonstrations and discussion.With growing support for @font-face and CSS3 in all of the mainstream browsers, advanced typographic and visual effects are now possible on the web. Even better, the text remains SEO friendly and easily editable and translatable as well.In this session, we’ll take a look at some well-known (and little-known) examples of great typographic and visual style from print and online. We’ll delve into the typographic origins of these looks to help us understand why they work, and we’ll explore exactly how you can use web standards to get the same look on your site.
Hash Tag: #sexytype

Iconic design styles translated on to the web, using web technologies

  • Hand Painted Signs
  • Wood type posters
  • Magazine Spreads

How do I translate a classic look for the web?

  • Idea -> Design System -> Form
  • NY Times -> Design System -> Newspaper
  • NY Times -> Design System -> Website

Often times we go from an original form to a new form without a new design system. A print brochure that doesn’t get re-thought-out as a web form.

Hand-Painted Signs

  • Prominent Feature - Shade
  • Shading with css text shadows article (Typekit)
  • Drop, Relief, Close Shade, Split Shade, Printers Shade (goes to the right) vs Painters Shade which goes to the left because it uses fewer strokes.
  • @font-face
  • CSS3 Transform to rotate the type element
  • text-shadow: 2px 4px 6px #000
  • text-shadow: Horizontal, Vertical, Blur, Color
  • Can add a second (third, fourth, etc.) shadow
  • Mask: used like a background property
  • An unofficial property
  • Only supported by Webkit
  • Effectively experimental
  • Need to add vendor specific prefix (-webkit-mask)

Wood Type Posters

  • Wood is used for large typefaces. Lead is too soft for that purpose.
  • Font-Face
  • Many Fonts <--> File Size
  • 6 Fonts <--> 144KB
  • RGBA Color
  • CSS3 color module
  • background: #000
  • background: rgba(0, 0, 0, 1)
  • RGBA Opacity is better than standard opacity which is applied to all parts of an element (background, border, etc).
  • Generated Content and Pseudo Elements
  • CSS2
  • Applies content :before, :after
  • See images
  • Absolute: Pulls outside the flow of the page, allows content to flow beneath.
  • Pseudo Elements are not part of the DOM.

Magazine Spreads

  • Vogue, first to print a magazine in color, first to print across a spread (binding)
  • Font-Face
  • Responsive Design
  • Fluid Layout
  • Horizontal Measurements in %
  • FitText.js for full width heading
  • Viewport meta tag for mobile devices
  • Flexible Images
  • Background size property, background-size: cover;
  • Media Queries
  • Override css properties in certain situations
  • Choosing breakpoints
  • Choose based on where your actual layout breaks
  • Trial and error
  • Column Count

Don’t imitate forms, translate an idea with a full use of the medium.


  * Check out HSLa
  * FLOUT - Flash of unstyled text. - chart to see browser support of (CSS, etc) features.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins