The Principles of Beautiful Typography

Fortunately, the font-family property of CSS allows you to choose multiple fonts in order of preference. If the first font isn't available, the second font will be used; if the second font is unavailable, the third font will be used, and so on. Let's say that you want your section headlines to have a serif font. You think the best font for the job is Calisto MT, so you specify that first -- for the few people that have it installed.

Your second choice is your first backup plan, and for this you choose Georgia. If users don't have Calisto MT installed, they'll see Georgia. Even though Georgia is on the safe list, some people may not have it installed. Times New Roman is a close equivalent, so you decide that you might as well add it as your next alternative. To finish off the preferential list, to cater to users who don't have any of those fonts installed, you add what the W3C calls a generic font family. The generic font families are serif, sans-serif, cursive (similar to script or handlettered), fantasy (or Novelty), and monospace. All your font choices so far have been from the serif family, so that's the generic family you specify. To sum things up, your font-family declaration would look something like this:

font-family: 'Calisto MT', Georgia, 'Times New Roman', serif;

Tip: Fonts with Spaces
Remember that any font family names that include spaces must be quoted, either using single (') or double (") quotes.

Displaying Text in Images

Now, all this preferential font specification is okay, but what if you really want your visitors to see some text in a specific font? In that case, the most obvious solution is to rely on images to display the text in question. This was the approach Kevin Cornell used in the design of his portfolio site, Bearskinrug, which is shown in Figure 4.3. The logo, top navigation, and much of the text on the site is presented as images. This approach not only gave Kevin power over the font display, but also allowed him to integrate the splattered watercolor background graphics into the design of the text. This site features many text graphics ... and sometimes a sock monkey named Mojo.

The technique that Kevin used for some of the text graphics on his site works well for static text that doesn't change very often, but what if you want to use a very specific font for text that changes periodically, like the headline for a news article blog entry? Constantly creating and uploading new text graphics would be a monotonous task, even for a designer who's a pro at using image-editing software. If you're setting up a blog for a client who doesn't know how to use Photoshop or any HTML, you might as well forget about this option. What can you do in this case?

Text Replacement with sIFR

Right now, the most popular option for text replacement is sIFR (pronounced "siffer"), which is an acronym for Scalable Inman Flash Replacement -- a technology that allows designers to use Flash and JavaScript to apply their choice of fonts to headings.

The basic premise behind sIFR is that Flash movies have the ability to embed fonts and display them in all their anti-aliased beauty to the vast majority of web users, who have Flash installed, and that JavaScript is able to replace specified HTML objects with Flash movies. By putting these two concepts together, web designer and developer Shaun Inman was able to create a technique he called Inman Flash Replacement (IFR), the precursor of sIFR. IFR was a revolutionary development in typography for the Web, but it had a few minor shortcomings. Its most notable downside was that it could only be used to replace a single line of text. Recognizing the potential of this technology, Mike Davidson and Mark Wubben, along with countless supporters and testers, have put together a well-documented and easy-to-implement solution -- sIFR -- that has been released to the development community as open source.

Those who are skeptical of Flash and JavaScript solutions to the Web's problems can be reassured by the knowledge that sIFR is a completely accessible solution that degrades gracefully. If users don't have Flash installed, or they have JavaScript turned off, they'll see the plain old browser text that the script and Flash were supposed to replace. And if you're skeptical about the solution in general, you'll be pleased to hear that it has an impressive and growing list of high-profile supporters including ABC News and Nike. Finding examples of sIFR text on web sites can be difficult, especially when they use it to display fonts that are typically installed on many computers. ABC News, for instance, uses sIFR to show news headlines in Futura, as Figure 4.4 illustrates. Futura is a font that's installed for OSX users by default, but by using sIFR, ABC can be assured that a large majority of its users see headlines in the same typeface.

To download the latest version of sIFR, and access the full installation instructions, visit Mike Davidson's sIFR Page or Mark Wubben's sIFR Wiki.