The Font-Family Property

The font-family property lets you specify the font families that will be used in your documents. Here is the formal definition of the property:

Name:	font-family
Value:	[ <specific-family> ,]* [ <specific-family> | <generic-family> ]
Initial:	UA specific
Applies to:	all elements, except replaced elements
Inherited:	yes
Percentages:	N/A

Each CSS property has a "data sheet" like the one just shown, which describes key characteristics of the property. Also, on the left, there is a "button bar" that gives you an overview of how widely supported the property is. Throughout this book, you can find definitions like this for each new CSS property that is introduced. Learning what the different fields represent saves you time when encountering new properties or reviewing old ones. The following sidebar describes how to read the property definitions.

Even when you learn to read the property data sheet, you need to read the textual description of the property to understand how the property changes a document's presentation.

How to Read Property Data Sheets

The "button bar" to the left of a property definition indicates how major browsers support each property. The browser categories are FF (FireFox, version 1), Op (Opera, version 8), Sa (Safari), and IE (Microsoft Internet Exporer for Windows, version 6). Also, the Prince formatter, which converts HTML and XML documents to PDF files, is listed as Pr (Prince, version 4.1). The buttons have the following meaning:

The property is not supported by the browser.

The property is partially supported by the browser.

The property is, for most practical purposes, fully supported by the browser.

Name: This is the first field in the formal definition. It simply lists the name of the property.

Value: This field specifes the possible values of the property. You may find one or many values. Words written in italics refer to a group of values that are described else-where, upright words are literal keywords. If a property offers many possible values or many possible complex combinations of values, you may find square brackets, vertical bars, and other symbols in this area. The appendix called "Reading property value definitions" describes in detail how to read the special symbols.

We know from experience, however, that many designers do not feel comfortable reading formal grammars, but they still write excellent style sheets. Instead of reading this field, you can learn about the possible values by reading the text and examples that follow the data sheet.

Initial: This field gives the initial value of the property. If the property is inherited, this value is given to the first element of the document (which is HTML in HTML). Otherwise, it is the value that the property will have if there are no style rules for it in the style sheets. Initial values make life easier for designers because they most often make sense and don't need to be changed. The initial value can be either a specific value for a property or "UA-specific," which means that CSS does not define an initial value. Instead, it leaves that definition to the "UA" or User Agent; that is, the browser (or other program) that processes CSS on behalf of the user.

Applies to: This field describes what kinds of elements the property applies to. All elements have all properties, but some properties have no effect on some types of elements. For example, font-family has no effect if the element is a replaced element (such as an image).

Inherited: This field indicates whether the value of the property is inherited from a parent element. For a review on inheritance, see Chapter 2 which gives examples of font-familiy values inheriting from parent to child elements.

Percentages: This field indicates how percentage values should be interpreted on this property. We talk more about how percentages work in the description of the font-size property. If the line reads "N/A" (not applicable), this means that the property does not accept percentages as values.

The font-family property accepts a list of font families as value. The font families are separated with commas, and there are two different kinds:

• Specific font families (for example, Arial or Courier)

• Generic font families (one of serif, sans-serif, monospace, cursive, fantasy)

For example, a document that is to be displayed in Times might have a style sheet that looks like this:

BODY { font-family: Times }

A document that is to be displayed in Garamond, if possible, and Times if Garamond is not available, would have a style sheet like this:

BODY { font-family: Garamond, Times }

where Garamond and Times are both family names.

It's important to remember the comma when you specify a list of font families. Some font-family names have spaces in them (for example, "New Century Schoolbook"), and the space character is therefore not sufficient for separating different font families. In addition, you may use quotation marks around family names, as in this example rule:

BODY { font-family: "new century schoolbook", serif }

The quotation marks are necessary if the name contains characters other than letters, digits, dashes, and spaces. For example, if a font were named "Dollar$," the browser might get confused by the dollar sign.

The value can also be the name of a generic font family instead of or in addition to the specific font families. Use of generic font families is a partial solution to the problem of dealing with unavailable fonts. A browser may not have any of the fonts listed in the value. To ensure that something is displayed in the worst case of no match, you can add a generic font family, such as serif, to the list. In this case, if the browser does not have any of the given families, it has to use any font it has that has serifs. Here are the generic names:

• serif

• cursive

• sans-serif

• fantasy

• monospace

Look familiar? They correspond to the font categories defined earlier in this chapter. Here's an example rule that includes a generic family name:

 BODY { font-family: Garamond, Times,   "New Century Schooolbook", serif }

In this example, the browser first checks to see if it has Garamond. If it doesn't, it checks for Times. If it doesn't have Times either, it tries New Century Schooolbook. And, if that fails, too, it uses any fonts it has in a serif style that it can use to display the document.

The use of generic font families is encouraged. Each browser has a list of fonts that it can display. Those lists usually differ among browsers. However, all browsers must understand the previous five category names. Hence, when a requested font is not available on a particular browser, and you told the browser which category the font is in, the browser is expected to substitute a font from the same category. Although the resulting translation may be a bit rough, it is usually a font that looks at least somewhat like the intended one. Figure 5.7 shows sample fonts from the five generic type families.

Figure 5.7. Examples of the five generic font families.

Don't put quotes around the generic name! The generic family names are special keywords in CSS, not real font families. If you write font-family: "serif", the browser thinks you mean a font named "serif."

Design Tips Using Font Families

Good document design generally involves using just two or three different font families. When there are more, finding ones that look good together soon becomes a problem. Unless you are a skilled graphics designer, restricting your creative urges to two or three families gives your document a professional look. Unless you want a document that looks like a letter...

A typical, time-proven scheme is to set all text in a serif font and the headings in a sans serif font. Popular choices are Times Roman and Helvetica, respectively, or their clones, such as Times New Roman and Arial. You may want to use a monospace font for some text if you are writing about computer software. For example, code is often set in a monospaced font, as may be filenames, function names, method names, and so on. The rest of the variation in your document should be created by using different font styles, weights, and sizes within the same two or three families.

People writing multilingual documents, in which they may be using two or more alphabets, know that it is difficult to find two fonts that look well together, let alone three or more. Some alphabets, such as Thai and Devanagari (which is a script from India), have very different conventions for a letter's baseline and, therefore, its height and depth. For example, a 12pt Devanagari font may look too big next to a 12pt Latin font. But, because only a few multilingual fonts exist, there is often not much choice. Figure 5.8 shows a sample of Bitstream Cyberbit, a family with more than 8,000 characters. Bitstream made the normal style and weight available for free; for italic and bold, you'll have to pay. See www.bitstream.com.

Figure 5.8. Sample of Bitstream Cyberbit family, which has over 8,000 characters.

Restraint is the key to good design. There are so many possibilities in CSS that it is easy to overdo and spoil your design.