HTML and CSS Reference
Note Although today the words typefaceand fontare sometimes used interchangeably, they don't mean
the same thing. A typeface is a particular design of type (Baskerville, Caslon, Helvetica, etc.). A font, in the
digital age, is the particular file on your computer that holds an entire set of glyphs, or characters, for a par-
ticular typeface. Traditionally, a font was a collection of wood or metal characters for a particular typeface.
So, Helvetica is a typeface. There are several different fonts of that typeface, some of which are digital and
some of which are physical, and each of which has its own inconsistencies and quirks. There are also other
typefaces based on Helvetica, such as Helvetica Neue. Helvetica Neue is rightfully a typeface of its own, and
not just a font of Helvetica, because it is not exactly the same design—it's only based onthe original Helvetica.
Helvetica Bold and Helvetica Condensed are fonts within the typeface known as Helvetica.
Classifying type is a complex science if you want to get specific about it. For a great read on
type classification, and typography in general, check out Robert Bringhurst's The Elements of
Typographic Style, 2nd edition (Hartley & Marks Publishers, 2002). For the purposes of this topic,
though, you only need to understand the five font classifications defined by CSS (termed
generic font families ).
Serif (font-family: serif;)
Characters in a serif font have a proportional width and have serifs. A font is proportional
when its characters do not all have the same width. Most type we read is proportional (includ-
ing the paragraph typeface for this topic). Typically, the uppercase M is the widest character in
a proportional font. A lowercase i or an exclamation point may be the slimmest. Serifs are
small strokes added to the beginning or end of a letter's main stroke or strokes. Serifs are not
merely decoration—they were designed to enhance legibility, and it is for this reason that you'll
find most topics and newspapers set the majority of their text in serif typefaces. Examples of
common serif typefaces include Times New Roman, Georgia, and Garamond.
Serif type is sometimes seen as classical, formal, and traditional in nature (although mod-
ern serif typefaces certainly exist). Serif is often used in print and other media for body text—
extended passages of paragraphs and the like—and is less commonly used for headers and
An archaic usability principle states that serif fonts should not be used on the Web. The
rationale that led to this belief was that computer screens are relatively low resolution and
they don't have the capacity to display complex characters, such as those including serifs, with
the detail they need. This may have been true at one time, but today, computer display resolu-
tions have increased (but are still much lower than the typical printed page), and most operating
systems now offer built-in antialiasing, a process in which the edges are blurred slightly to
mask the inherent pixel grid of the screen. This has led to much better on-screen type render-
ing and a resurgence of serif type on the Web. Figure 9-1 shows an example of a serif typeface.
Figure 9-1. Adobe Caslon, a popular font of the Caslon typeface, designed by William Caslon