Commentary

Cure for the Common Font: A Web Designer’s Introduction to Typeface Selection

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.

Recommended Books

“The Elements of Typographic Style” (Bringhurst), Applied to the Web
“Thinking With Type” (Lupton)
“Detail in Typography” (Hochuli)
“Stop Stealing Sheep” (Spiekermann, Ginger)
more

Webfont Providers

Typefaces Used and Mentioned

Our Favorite Typefaces of the Moment

Tiffany: Founders Grotesk, Tiempos
Jason: Chaparral, Titling Gothic
Frank: National, Minion
Stephen: anything from Commercial Type. See also “My Favorite Font Sources”.

15 Comments

Spiro Bolos says:

03.21.11 at 5:19 pm

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!
Stephen Coles says:

03.21.11 at 5:28 pm

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

03.21.11 at 9:56 pm

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

03.22.11 at 1:24 am

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.
Stephen Coles says:

03.22.11 at 1:37 am

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.
Gustavo says:

03.24.11 at 5:57 am

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.
Alicia says:

03.29.11 at 11:34 am

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.
Stephen Coles says:

03.29.11 at 12:06 pm

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.
María Gabriela Pérez says:

04.20.11 at 8:22 am

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
sean greenfield says:

04.26.11 at 1:59 pm

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

05.11.11 at 3:08 am

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.
laura meseguer says:

05.20.11 at 4:35 am

Thanks for sharing, is supereasy and clear. Congrats!
WB says:

05.30.11 at 1:01 am

Whats the font in the bottom right on slide 76?
Stephen Coles says:

05.30.11 at 8:11 am

That is FF Yoga Sans.
Quora says:

07.12.12 at 10:43 am

How do you pick the best font?…

There is much more to learn about typeface selection than anyone could write in an answer here. Start with “Stop Stealing Sheep” by Erik Spiekermann: http://www.amazon.com/Stop-Stealing-Sheep-Find-Works/dp/0672485435 And here is a presentation and re…