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
- Photo of the panel by Ashley Bischoff
- Typedia: Type News, Webfont Alternatives
- Practical Examples: Typekit, Fonts in Use
- Helvetica in U.S. Retail
- Frutiger in Airports, Heathrow
- Hoefler & Frere-Jones webfonts?
- Hinting: Peter Biľak, Tim Ahrens, Microsoft, Beat Stamm
- Test webfonts before you buy
- Serving Typekit font weights and styles to Internet Explorer
- Readability
- Recommended typefaces here at Typographica
- FontFonter
- Combining typefaces: four techniques from H&FJ, with Helvetica, sans/serif
- Kerning, the game
- WebFont Loader (announcement)
- Font vs. Typeface
- Font identification resources
- Type Camp!
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
- Typotheque
- Typekit
- Webtype
- A comparison of Typekit and Webtype
- FontShop
- Fontdeck
- Fontspring
- MyFonts
- Fonts.com Web Fonts
- Google Web Fonts (free)
- Font Squirrel (free)
Typefaces Used and Mentioned
- FF Meta Serif (Typekit)
- FF Tisa (Typekit)
- National
- Trade Gothic
- DIN Next Rounded (alt: FF DIN Round)
- Adobe Garamond (Typekit)
- Skolar (Typekit)
- Proxima Nova (Typekit)
- Chaparral (Typekit)
- Hellenic Wide (Typekit)
- Georgia
- Lucida Sans/Grande
- Titling Gothic
- League Gothic (Typekit)
- Founders Grotesk
- CamingDos (Typekit
- Bauer Bodoni
- Myriad (Typekit)
- Bello (Typekit)
- Le Monde Journal (Typekit)
- Facit
- Mrs Eaves
- Verdana
- FF Milo Serif
- Futura (alternatives)
- Times New Roman (alternatives)
- Gill Sans (alternatives)
- Trade Gothic (alternatives)
- Helvetica (alternatives)
- Museo Sans (Typekit)
- Benton Modern RE
- Minion (Typekit)
- Frutiger
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”.
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!
I’m sorry, this setup isn’t quite that fancy. Afraid you’ll have to click through the slides on your own.
The panel was great! And thanks for taking the time to put all this together online… quite a bit more thorough than I expected :)
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.
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.
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.
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.
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.
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
if you listen to this with DJ Krush’s Le Temps looped under it, it has a whole new profundity.
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.
Thanks for sharing, is supereasy and clear. Congrats!
Whats the font in the bottom right on slide 76?
That is FF Yoga Sans.