Fonts on The Web

When most people think of typography, they immediately think of fonts (or typefaces, to be technical). When they think of typography on the Web, they immediately think of Arial, Times, and Georgia. If they are really in the know, they may even think about Verdana and Trebuchet MS. There is no escaping that, as it stands now, the number of fonts used on the Web is staggeringly few. By the end of this chapter, though, I hope to have shown you that you have a lot more choices. Although still more limited than in print or video, there are many more than the core Web fonts for you to choose from.

Web typography = limited font choices?

The best estimates that I can find place the total number of computer fonts available at over 100,000. Yet, looking at Web design, you would never know there were so many choices. By and large, a subset of only five fonts are regularly used, with three of those comprising the lion’s share of all type on the Web.

Although typography is about more than just choosing a typeface, it is the best place to start and the most noticeable way to differentiate your design from others’. But if everybody looks the same, then no one has to worry, right?

Quick story: I briefly worked at IBM in the mid-1990s. There I met lifetime company employees who were having a hard time adjusting to many of the changes being made in the corporation. The most difficult challenge they had, though, was with the dress code, which had been changed to business casual (slacks and polos) from business formal (suits and ties). I remember a 40-year veteran of IBM telling me how he hated the new dress code because he now had too many choices. When it was suits and ties, he just reached into his closet, pulled out his outfit of the day, and was done. Now he had to consider whether the colors and patterns matched. He had to actually think about what he was wearing.

I believe that a lot of Web content producers, developers, and, yes, even designers suffer from the same mind-set as my friend—having a limited font palette is a great excuse for not having to think about the fonts you use in your designs. But that excuse is about to evaporate like mist on a sunny morning. Get ready to put on your thinking cap.

In this chapter, you will learn about four different methods for adding typefaces to Web pages, each with its own strengths and weaknesses:

• Web safe fonts: Fonts that are likely to be preinstalled on the end user’s machine beyond the ten core Web fonts.

• Linked Web fonts: Fonts that are downloaded from your server to the end user’s machine much like image files.

• Web font service bureaus: Fonts that are downloaded from a third party to the end user’s machine.

• Web font embedding technologies: Characters are replaced by glyphs from a particular font using JavaScript.

CSS font family classifications

As discussed in Chapter 1, “Foundations,” there are a number of systems for classifying fonts. The one that is most relevant to Web typography was created by the W3C to classify font families for use in CSS. This CSS font families classification system is also known as the generic font family. It includes the following:

• serif: Fonts with serifs (see Chapter 2, “Characters & Symbols”), like Times, Georgia, Garamond, Perpetua, and Rockwell.

  

• sans-serif: Fonts that are not serifed, including Helvetica, Arial, Century Gothic, and Lucida Sans.

  

• monospace: Fonts where each glyph has the same width and spacing, including Courier, Courier New, and Andale Mono.

  

• cursive: Fonts that attempt to mimic human handwriting or script, including Snell Roundhand, Bradley Hand ITC TT, Brush Script MT, and Lucida Calligraphy.

  

• fantasy: Fonts that don’t easily fit categorization, including Cracked, Curlz MT, and Bauhaus 93.

  

The CSS font family classifications are intended to help a Web browser identify the type of font you are trying to use in your design. For example, if you are using the font Arial, then you would define the generic font family as sans-serif. If Arial is not available, then another sans-serif font will be substituted.

Specifying typefaces with CSS

Defining the font to be used by text on a Web page is done with CSS using the font or font-family property:

							font: bold italic normal 12px/1.5 helvetica, arial, sans-serif;
						
						
							font-family: helvetica, arial, sans-serif;
						

The font-family property allows you to set the typeface, while the font property is a shortcut that lets you set not only the typeface, but also the font weight (bold), font style (italic), font variant (small caps), font size, and line height, all in a single line.

The list of typefaces is the font-stack, with each subsequent typeface name tried in order until a match is found on the user’s computer. If the browser does not have access to the first font (Helvetica, for example)—because either the font is not installed on the user’s computer or it has not been downloaded—then the next font (Arial) is tried as a fallback, and so on until all of the fonts in the list are exhausted.