Typography on the Web

by Dave Riensche, Creative Director

Up until recently, the world of typography has been extremely limited on the world wide web. Nice type has been something reserved for graphics that don't need to be edited (images of type), which means the occasional headline or rotating promotion on the homepage. The remainder of the text throughout the site (the large majority) has been set in Arial, or Verdana, or Tahoma, or one of the others from the very limited list of web-safe fonts. First proposed in CSS2, the @font-face style now makes it possible to use TrueType or OpenType fonts on websites.

So where is it? Why haven't we seen a major shift in web design? If you're at all like me, you assume that as soon as someone made it possible to style with any font on the web, we should quickly see as much font variety as in print design. And that would be, because like me, you didn't think about annoying little inconveniences such as licensing, and cross-platform font rendering.

You see, every font out there was made by someone, a typographer, who owns the rights to those fonts. Just like you can't use any picture you find on google image search as a graphic on your own site, without paying the owner, you can't post any font on your site without paying for rights.

Luckily, some very smart companies have made efforts to make the licensing process much easier on us designers. Typekit <http://typekit.com/>, Typotheque <http://www.typotheque.com/>, and Kernest <http://kernest.com/> are a few I know of. Their processes for implementation vary, but overall it's pretty easy. I first experimented with custom fonts on my personal website using Typekit, but was immediately displeased with the second reason that creative font selection hasn't overtaken web design: cross-platform rendering.

Using Typekit, I decided to use a beautiful font that was just unique enough to add a little zest to the overall page design, but not so different as to distract from its main purpose. Like many designers, I do my work on a Mac. I tested the site in Safari and Firefox, loved the results, and foolishly coded the entire site with the intention of using the Typekit font. Proud of my work, I showed the site to another designer who does his work on a PC. We viewed the site in Firefox on Windows Vista (this was just before 7 was released), and were dismayed to see that the PC font rendering of my new proud font absolutely and brutally beat the shape of each symbol to Hades. I quickly reverted my site back to Helvetica, Arial, sans-serif.

This doesn't mean all fonts look bad on one platform or another. This means the process is still in refinement. There are fonts that look fine on both platforms, and it's just a matter of time before good web designers have those options committed to memory. This also means we have to remember to include web typography in any proposed budgets, since licensing isn't always free.

The world of typography on the www continues to have its limitations compared to print design, and probably always will. But options are opening up. As a lover of fine type, I'm excited for the possibilities.