No matter how many videos, images, and interactive elements a site has, the web is still dominated by text. It is important to decide on and display a font that suits your site’s style, but doesn’t distract from the content.

Choosing a Font

People Perceive Fonts

If you’re not a designer, you probably can’t recognize a font or distinguish one from another. Visitors to your site are never going to say, “Oooh! This is Arial Narrow! How classy!” The goal in choosing a font isn’t to have the visitor react to it directly.

The human brain takes in a lot of visual information and breaks it down to figure out what we’re seeing. We might consciously recognize the shape of a tiger, or the silhouette of a tree. The first thing our eyes do is identify the basic colors, shapes, and fonts we’re seeing.

This is why major newspapers like the New York Times have developed their own proprietary fonts for use in their mastheads. You can recognize a copy of the Times from a block away because its title looks different than the title of any other newspaper. You don’t have to read the words to recognize their shape.

Some Fonts Are Overused

Everybody’s seen Times New Roman on documents because most word processors have had that as their default for many years. Consequently, a lot of hastily prepared signs and documents are slathered with an unhealthy helping of Times. Using that font now suggests that your work was hasty, no matter how professional the content.

Comic Sans suffered a similar fate. At one time using Comic Sans may have suggested a certain playfulness, but now it just looks unprofessional and is almost always out of place. It’s one step above Times New Roman: you took the time to open the Font menu, but not to select anything actually fitting your content. Never use Comic Sans.

Print vs Web

Reading text on paper is a very different experience than reading text on a screen (a whole lot of jazz about additive and subtractive color systems). For this reason, it’s important to consider the font you use and maybe consider one that you wouldn’t normally use on a print document. There is some debate over which fonts are best used for reading on a screen, but most designers lean towards using a font from the family of sans-serif typefaces.

The use of a sans-serif font leads to a cleaner looking chunk of text for a screen. On the other hand a serifed font is often easier to read, and a better choice, when creating a print document. This isn’t to say that you should never use a serifed font when designing a site, but you should most certainly consider the legibility of the font you choose.

Displaying Your Font

Now that you’ve chosen a great font, how do you make sure that it displays perfectly on your website?

Not Everybody Shares Your Fonts

Even if you amass a collection of thousands of fonts on your computer, you’ll still have a problem when it comes to web design: everybody needs to have the same font in order for it to work on your site. Simply writing font-family: “ÜberAwesome Light Italic”; only tells your visitors’ browsers to prefer that font. If your visitor doesn’t have ÜberAwesome Light Italic, the browser will have to fall back on something it does have… like Times New Roman.

Sure, if you load up your page in your own personal browser it will work great, but only because you happen to have the ÜberAwesome Light Italic font available on your own computer. Make sure your page works on a different computers.

You Can Share Fonts… Sometimes

So what’s the compromise? You don’t want to use “boring” fonts that everybody has, but you can’t just use the killer fonts in your own collection either.

If you find a good free font, or if you purchase a font with the right licensing, you may be able to publish your font in a way that lets everybody’s computer download it automatically when viewing your site. An @font-face in CSS lets you point to a font file in the same way you might point to an image that’s used on your site. Your visitors’ browsers will download the font automatically and instantly use it to display your page.

Unfortunately, not all fonts are free, and distributing a font without the right license will just land you in a heap of trouble with the copyright police. You don’t need that.

When All Else Fails, Cufon

Cufon is a compromise. If you can’t publish your font, you can still use it to display any text you want to. Cufon lets you write your page with a different font (any different font) and then JavaScript replaces every word with the font you’ve given it when your visitor opens the site. You’re not publishing the font in a way that others could download it, so you’re not violating any licensing, and you get the look you wanted.

Unfortunately there is a disadvantage to using Cufon: JavaScript has to do all those replacements. Even on a very fast computer with a speedy network connection, this can take a second. Your website will appear for a second with the wrong font, and then the right one will blink into place. It’s a little detail, but it’s not perfect. There’s also the chance JavaScript won’t work for some reason — your visitor has it disabled, or some error prevents it from running. In that case, your ordinary (boring) font will just stay there.

Image Replacements for the Masses

Historically, the only way to publish a font was with an image replacement: you’d make a PNG image of the text you wanted on your page. This has numerous and severe disadvantages. First, the text is not searchable. Google doesn’t know what the image says (so you may not show up in search results for important words on your site), and someone pressing Ctrl+F in their browser to search your page won’t find your text.

Plus, changing your text is no longer just a matter of typing the new words you want; you have to open up your image editor (on a computer with the font installed, of course), and produce a new image to upload with the right name. It gets worse when you have to change the image’s dimensions (e.g., because the new text is longer).

Image replacement is still widely used, but avoid it in any new work you’re doing. It offers no benefits over other solutions to this problem, and the disadvantages are compelling.

Leave a Reply

Your email address will not be published. Required fields are marked *