How deeply does Web Design Playground, Second Edition cover font family?

Defines typeface categories and ordered fallback declarations, while deferring deeper typography to later treatment.

Font family in Web Design Playground, Second Edition

A typeface is a distinctive visual design shared by a related set of letters, numbers, and symbols.

A typeface is the shared visual design of a related set of letters, numbers, and symbols. In everyday web work, “typeface” and “font” are close enough to use interchangeably, though a font can mean one specific size, weight, and style of a typeface. CSS uses the font-family property to choose the typeface for an element, replacing the browser’s default text look with one that suits the page. section 4.1 section 4.14

Serif—A serif (rhymes with sheriff) typeface contains fine cross strokes (called feet) at the extremities of each character. These subtle appendages give the typeface a traditional, classy look, but they can get lost when displayed on a screen at small sizes.
Sans serif—A sans-serif typeface doesn’t contain cross strokes on the extremities of characters. These typefaces usually have a clean, modern look that’s well suited to screen text, particularly at small sizes.
Monospace—A monospace typeface (also called a fixed-width typeface) uses the same amount of space for each character, so skinny letters such as i and l take up as much space as wider letters such as m and w.
Cursive—The cursive typefaces are designed to resemble handwritten pen or brush writing.
Fantasy—Fantasy typefaces usually are fanciful designs that have some extreme elements (such as being extra thick).

Meet the five generic font families. Think of them as broad style buckets: serif for traditional details, sans-serif for clean screen text, monospace for code-like alignment, cursive for handwriting, and fantasy for special effects. section 4.1

PLAY: Choose a family based on what the text needs to do.

Use serif for large headings or other large text, where its fine “feet” are less likely to disappear on screen. section 4.1
Use sans-serif for body text and for clean, modern-looking interface text. section 4.1 section 10.3
Use monospace for code listings, cursive for short playful or elegant text, and fantasy only when a special effect is wanted. section 4.1

REMEMBER: A visitor may not have your favorite typeface installed. Put several choices in font-family, in order. The browser checks each one on the user’s computer and uses the first one it finds. End with a generic family such as sans-serif so the text still has a sensible fallback. section 10.3

A practical fallback list

Apply a preferred typeface, a similar backup, and then a generic family to all page text: body { font-family: Optima, Calibri, sans-serif; } Here, Optima is tried first, Calibri is the backup, and sans-serif catches anything left over. This is especially useful when a typeface is common on one kind of computer but rare on another. section 10.3

For a page with several jobs, use different families deliberately. A photo gallery can use cursive for its heading, then a clean sans-serif stack for navigation, footer links, and small image captions. Choose readable text first; the typeface should support the page rather than steal the spotlight. section 15.4 section 10.3

Font choice is part of the early design plan, alongside a page sketch and color scheme. Once the family is chosen, typography continues with size, weight, style, spacing, alignment, and related text treatments. Later refinements can use hosted or local font files instead of relying only on system fonts. section 5.7 section 18.9

How Web Design Playground, Second Edition covers it

Also explained in

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.