Cure for the Common Font: A Web Designer’s Intro to Type Selection

Written by Stephen Coles on March 20, 2011

Last week, I joined Frank Chimero, Tiffany Wardle, and Jason Santa Maria for a panel at the SXSW conference.

Now that web designers suddenly face the challenge (and delight) of choosing fonts from an ever-growing selection, we thought it’s a good time to recommend some basic principles for making wise type choices.

The slides from each of our four quick presentations are below, as well as audio generously provided by SXSW. If you’re short on time and feel like you know the fundamentals, skip ahead to the second half of the session — I think the Q&A is as useful as our prepared stuff.

Of course, an hour is hardly enough time to deliver what one can get from the first day in a good Type 1 course, and as I listen to the audio I cringe at all the crap I missed or said poorly, but I think we did a decent job of introducing some concepts that will launch young designers more confidently into the new typographic web.

If you attended the panel and have any questions that you didn’t get answered or simply need help finding the right font, feel free to contact me here or on Twitter: @typographica or @font_id.

Slides

Audio

Or view the slides at full screen to autoplay the audio.

Related Links

Recommended Books

Webfont Providers

Typefaces Used and Mentioned

Our Favorite Typefaces of the Moment

14 Comments

  1. Spiro Bolos says:

    Hi there.

    Love the slick Issuu interface, but couldn’t get the audio to sync to the slides automatically. Am I doing something wrong?

    Great idea for a presentation!

  2. I’m sorry, this setup isn’t quite that fancy. Afraid you’ll have to click through the slides on your own.

  3. Trent Walton says:

    The panel was great! And thanks for taking the time to put all this together online… quite a bit more thorough than I expected :)

  4. Atmawarin says:

    I know this is asking a lot from you, but is it possible to give a downloaded version both the audio and presentation? We have a very slow connection in Indonesia. And it’s quite make me cringe every time Issuu buffering in the middle of presentation.

  5. Maybe try playing the audio in the player on this page and flipping through the slides in another window without the sound. You can also download the audio as an MP3 here.

  6. Gustavo says:

    Having this resource online for those that couldn’t makes me want to pay my own way out next year. Thank you once again for this resource.

  7. Alicia says:

    FYI: Siemens does not use Helvetica. I’ve been designing for them for over six years. They have three of their own proprietary typefaces. Siemens Sans, Serif, and Slab. Where a standard font is required, they use Arial. (Note: Before they had their own, they used Univers.)

    I did enjoy the slide show, though now I find myself questioning it’s accuracy.

  8. Thanks, Alicia. I guess my information was incorrect on that one. I should certainly update that slide. It was created a few years ago, and I’m sure I can find just as many examples today. The other Helvetica info should be accurate, as I did the Retail study just a few weeks ago.

  9. Great … as a non graphic designer i really want to thank you all to this amazing lecture. It make me feel inpired to search and read more about Typography … Thanks. Gracias :D

  10. if you listen to this with DJ Krush’s Le Temps looped under it, it has a whole new profundity.

  11. Thanks for sharing this. I enjoyed your presentation on that topic yesterday at up.front, Berlin-Kreuzberg. It reminded me in where I started.

    Many years ago I spent a lot of time on illustration and typography: trying, finding, choosing, changing, rebuilding… autodidactive and playful.

    Today I work as a web designer and more and more deal with programming/scripting and business stuff – all very exciting and satisfying, too.

    But your input brought back that typography aspect in web design, that creates this kind of soul in a website, you use this image of a ‘furniture’. I will make more use of it again. Thanks for that.

  12. Thanks for sharing, is supereasy and clear. Congrats!

  13. WB says:

    Whats the font in the bottom right on slide 76?

Post a Comment

Comments at Typographica are moderated and copyedited, just like newspaper “Letters to the Editor”. Abusive or off-topic comments are not published. We appreciate compliments, but don’t publish them unless they add to the dialog. Thank you!