VISIONN Creative Marketing

By Sean Cornwall

Any design professional worth her salt will have a short list of “go-to” typefaces, as well as an arsenal of decorative & display fonts to fit any mood. They will explain to anyone who will listen that the typeface makes the design, and that a poorly-chosen typeface can lay waste to even the most rigorously designed layouts. These things are, of course, completely true. They are also the reason why so many print designers that cultivated a love for good typography have such difficulty designing for the Web. Gone are the swashes, ligatures, and custom-kerned letter pairs that are the hallmarks of an experienced designer. The list of available fonts drops to an alarming 6–8, one of which is—(gasp!)—monospaced. Variants like “Extra Black Extended Oblique” give way to “Bold” or “Italic.” Layouts that were once a playground for the skill and imagination of the designer suddenly had so many…limitations.

What Happened?

The common answer that had so many designers breathing a sigh of relief: just make the non-Web-safe typefaces into images. After all, the simple jpeg or gif is the refuge from so many of the quirks and inconsistencies of the Web. While it may experience slight color shifts on different monitors, an image shouldn’t render differently in different browsers. Creative people across the country busily cranked out huge Photoshop documents that were sliced into several little boxes, arranged in tables—and later, divs—and presto: a print design that worked on the web.

And then the search engines came. The developers who built the tables and divs explained to designers that the perfect, expressive blocks of copy-turned-images that represented the brand so well were only being seen by Google as a simple filename or, at best, an alt tag. Hundreds of words that said exactly what their company was about had been reduced to “top_right_copy.gif.”

There were, of course, alternatives. Skilled designers and Web developers could use CSS image replacement to hide the standard Web fonts inside span tags and replace them with images. Google would still see keyword-rich text, but users would see the “styled” and “unique” fonts that just weren’t available within the Web-safe font families. New technologies like sIFR allowed adept designers to display rich, scalable, standards-compliant typography within Flash. The next iteration of CSS, CSS3, promises a bright future where we can simply attach our desired fonts to html documents like stylesheets.

Trebuchet, a Web-safe font.

As powerful as all of these alternatives are, they are—for the time being—still alternatives. The list of Web-safe fonts will always work. They do not depend on Flash, image replacement, or any other variable (aside from simple CSS.) Web-safe fonts are legible at a wide range of sizes, on Macs and PCs, across every commonly used Web browser. They can be enlarged simply and effectively for visually-impaired users, and copy-pasted across documents and into E-mails. They can be semantically formatted with clean, simple markup. They are easy-to-edit and restyle, even by people with the most basic knowledge of the Internet. In short, the list of reasons why we should be primarily using Web-safe fonts is much more convincing than the reasons why we shouldn’t.

What We Can Learn

Web typography, like print typography, can be tweaked and styled to dramatic effect. The key, as Robert Bringhurst points out, is that typography exists to honor content.
If we don’t take the time to consider the content and to use what means we have at our disposal to honor it, we simply aren’t doing our job. CSS font properties go far beyond color and size, allowing designers to specify line-height (leading), letter-spacing (tracking) and even a few variants like smallcaps. There are even CSS techniques that allow for dropcaps and pullquotes. When these customizations are employed properly, Web typography can span the same aesthetic gamut as print typography. Loose, airy, spaced-out Georgia has a completely different feeling than, bold, tightly-kerned Arial. Just like print typography, the devil is in the details. There are a slew of new Web sites that have effectively reinforced this argument. In fact, many of them (http://itsartist.net/ being a favorite example) are so thoughtfully constructed that they are indistinguishable from image-heavy sites. A trained eye will notice that every piece of text on the aforementioned site is a carefully and individually-styled Web-safe font.

Elegant Web typography at itsartist.net

This is not to say that we must use all Web-safe fonts, all the time, until some other perfect option presents itself. The Web would ultimately be a boring place without a little bit of flair. But the key, again, is to consider the content. Is it important that search engines like Google can easily see your headlines or is it important that those headlines are in the same typeface that your company uses on its letterhead? There are arguments to be made on both sides, and several ways to compromise, but the fact remains: typography can make or break your design. If you feel trapped by Web-safe fonts, your design will show that. If you can make Web typography work for your content, you’ll find that you’re a lot less limited than you think.

Learn more about Web typography at http://www.webtypography.net.