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.

http://twitter.com/smcbride
http://seanmcb.com/sxsw2012
http://schedule.sxsw.com/2012/events/event_IAP9682
Hash Tag: #sexytype

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

How do I translate a classic look for the web?

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

Wood Type Posters

Magazine Spreads

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

Questions:

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

http://schedule.sxsw.com/2012/events/event_IAP9682

Comments

Add a Comment

  • G. Brad Hopkins's avatar
    • Author: 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. I like long walks in Illustrator and candle lit dinners with ExpressionEngine.
    • @gbradhopkins
    Tweet
    @buffer Never figured this out. Just did a clean install of Firefox to fix the problem. Thanks for trying.