Chapter 5. Fonts

As the authors of the CSS specification clearly recognized, font selection would be a popular (and crucial) feature. After all, how many pages are littered with dozens, or even hundreds, of <FONT FACE="..."> tags? In fact, the beginning of the "Font Properties" section of the specification begins with the sentence, "Setting font properties will be among the most common uses of style sheets."

Despite that importance, however, there currently isn't a way to ensure consistent font use on the Web because there isn't a uniform way of describing fonts and variants of fonts. For example, the fonts Times, Times New Roman, and TimesNR may be similar or even the same, but how would a user agent know that? An author might specify "TimesNR" in a document, but what happens when a user views the document without that particular font installed? Even if Times New Roman is installed, the user agent has no way to know that the two are effectively interchangeable. And if you're hoping to force a certain font on a reader, forget it.

Although CSS2 defined facilities for downloadable fonts, they weren't well implemented by web browsers, and a reader could always refuse to download fonts for performance reasons. CSS does not provide ultimate control over fonts any more than a word processor; when someone else loads a Microsoft Office document you have created, its display will depend on that person's installed fonts. If they don't have the same fonts you do, then the document will look different. This is also true of documents designed using CSS.

The problem of font naming becomes especially confusing once you enter the realm of font variants, such as bold or italic text. Most people know what italic text looks like, but few can explain how it's different from slanted text, even though there are differences. "Slanted" is not the only other term for italic-style text, either—for example, you'll find oblique, incline (or inclined), cursive, and kursiv, among others. Thus, one font may have a variant called something like TimesItalic, whereas another uses something like GeorgiaOblique. Although the two may be effectively equivalent as the "italic form" of each font, they are labeled quite differently. Similarly, the font variant terms bold, black, and heavy may or may not mean the same thing.

CSS attempts to provide some resolution mechanisms for all these font questions, although it cannot provide a complete solution. The most complicated parts of font handling in CSS are font family matching and font weight matching, with font size calculations running a close third. The font aspects addressed by CSS are font styles, such as italics, and font variants, such as small caps; these are much more straightforward, relatively speaking. These various aspects of font styling are all brought together in a single property, font, which we'll discuss later in this chapter. First, let's discuss font families, since they're the most basic step in choosing the right font for your document.