Typography & the Modern Web Browser


Today we attended a webinar by our friends at Creative Relay about typography for web design. We’ve been using “web fonts” for some time now: fantastic libraries from Google, Font Squirrel, & fonts.com make it easy-peasy to use an incredibly wide assortment of font families & faces in our websites (this site features Trade Gothic Condensed, a beloved typeface from print-days, hosted via fonts.com). However, there was always a slight concern that some users wouldn’t be able to view the fonts that we’ve selected, because to use them, you need a so-called “modern browser” that can support CSS3 tags such as “@font-face”. Users who aren’t using those are relegated to default, “web safe” fonts, and end up missing a good portion of the experience of the website. What to do?

The webinar today opened my eyes to just how well supported & embraced these standards have become, even with Internet Explorer (the perennial “my way or the highway” browser). The days of the “web safe” font really are behind us, and it’s an exciting future where you can design fully-functional HTML copy using nearly any typeface you can dream up. There are more resources & standards for web fonts than I had fully realized (plus a few other cool sites out there, see “resources” below) – it’s really not “cutting edge” anymore, but full-on mainstream. In a good way! No more using images slices with text on them, no more sticking to Arial, Helvetica, sans-serif. We web-folks can really fully embrace the expressive quality of typography that print designers have enjoyed for decades. Hurray!

And what about those folks who — upgrades be damned — are still on archaic browsers and can’t enjoy the beauty of web typography? Presenter Erik Fadiman made a great point about this: don’t worry about old browser support, just focus on the so-called “modern browser”. What does this mean? It means that to try and support old browsers (IE 6 anyone?) and make sites that work well on them, risks making compromises to the presentation & experience of your website, holds back the enormous progress web typography has made over the past few years, and puts the old hand-cuffs back on, where we’re really just deciding between “sans serif” or “serif”? Sounds cold, I know. But DON’T support those browsers anymore, and DON’T worry if your web fonts won’t display properly on them. They won’t, and that’s OK. Chances are, that user still using an archaic browser is getting a pretty lousy overall web experience anyway, and is frankly used to sites looked weird, broken, just plain bleah.

So designers: there’s no looking back! Let’s push ahead and make our websites beautiful, expressive, & full of rich, expressive typography. Those IE6 folks won’t even know what they’re missing.


Typekit – A once small web font library, now huge & owned by Adobe. Can’t go wrong there.
Font Squirrel – Great resource with a compact, stylish selection of web fonts
Google Web Fonts – Google’s answer to web fonts
Fonts.com – The de facto resource for fonts, with an almost overwhelming selection of typefaces. Now web-font ready!
WhatFont for Chrome – Fantastic plug-in that reads any font on any website
CSS3 Generator – Totally neat-o resource that builds snippets of CSS3 code
Adobe Browser Lab – Complete web-testing environment: see how those web fonts render!
Creative Relay – Online learning for the creative community, by two of the nicest guys in Boston
Erik Fadiman – Seattle-based interactive designer, instructor & web-font guru