Classifying Font Families

Font families are often classified into a few general categories. The number and names of categories vary from one typographic tradition to another. Here are the questions CSS asks when classifying a font family:

• Does it have serifs (defined shortly) or is it sans serif?

• Is it proportional-spaced (variable-width) or monospaced (fixed width)?

• Was it designed to resemble handwriting?

• Is it intended primarily for decorative purposes rather than for use in running text and headings?

We discuss each of these in the next several subsections.

Serif or Sans Serif?

A serif is a short cross-stroke that some letters have. A font that has serifs is called serif. A font that has no serifs is called sans serif (sans is French for "without"). Serifs can differ in appearance, ranging from short feathery strokes to slab-like square strokes. Figure 5.3 shows examples from several serif and sans serif families. Both sans serif and serif fonts work well for text and for headings.

Figure 5.3. (a) Serif fonts; (b) sans serif fonts.

Proportional-Spaced or Monospaced?

In a variable-width (or proportional-spaced) font, each letter takes up just the amount of space it needs. An "I," being naturally skinny, takes up less space than the naturally fatter "M." In a fixed-width (or monospaced) font, each letter takes up the same amount of space regardless of its width. For example, an "I" and an "M" take up the same amount of space even though they are obviously of different widths.

Proportional-spaced fonts may be either serif or sans serif and may generally be used both for text and headings. Monospaced fonts are often called typewriter type. This is because, for a long time, typewriters could produce only monospaced type. Monospaced fonts may be used for both text and headings; however, they are usually reserved for special usages, such as to mimic the effects of a typewriter or to portray computer code. Figure 5.4 shows examples of proportional-spaced and monospaced type.

Figure 5.4. (a) Proportional-spaced fonts; (b) monospaced fonts.

Does It Resemble Handwriting?

A font designed to resemble handwriting is called cursive. Cursive characters are usually rounder than serif or sans serif type; they do not have serifs; and they usually slant to the right. They may also be connected, like handwriting usually is, although this is not necessary. Many italic versions of serif fonts look cursive. They differ from cursive fonts in that a serif font has a roman version, while a cursive form does not. Cursive fonts are often effective when you want to convey a personal touch because much of it resembles handwriting. Figure 5.5 shows examples of cursive and italic fonts.

Figure 5.5. (a) Cursive fonts; (b) italic fonts.

Is It Mainly For Decorative Purposes?

Some fonts are seldom used for large amounts of text because their appearance is too unique to be read easily in large amounts. Typically, they are reserved for display and, to some extent, headline purposes. Some don't even have full alphabets; they just have capital letters. They may be strangely decorated, irregular in shape, or very fancy. Figure 5.6 shows examples of fantasy font families.

Figure 5.6. Some fantasy font families.

On the basis of these factors, CSS classifies font families into five categories:

• sans-serif

• serif

• monospace

• cursive

• fantasy

In CSS, these are known as generic font families. To specify that a document should be printed with a font from a generic font family or from a specific font family, such as Helvetica the font-family property is used.