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

Explains generic, system, and hosted font choices with CSS rules, naming guidance, and fallback ordering.

Font-family property in Web Design Playground, Second Edition

The CSS font-family property specifies the typeface or sequence of fallback typefaces used to render an element.

The CSS font-family property tells a browser which typeface to use for an element’s text. Think of it as a typeface wish list: name the look you want, then provide backups in case a visitor’s computer does not have your first choice. section 4.1 section 4.3

Start simply with a generic family. These broad categories are built into modern browsers: serif has small finishing strokes, sans-serif has a clean stroke-free look, monospace gives every character equal width, cursive resembles handwriting, and fantasy is for special effects. Sans-serif often suits small body text; serif can work well for larger headings. section 4.1 section 4.2

PLAY: Assign generic families

Use a CSS selector, then set font-family to the family you want: h3 { font-family: sans-serif; } p { font-family: serif; } The heading gets a sans-serif appearance, while the paragraph gets a serif appearance. Generic families are handy when you want dependable support without fussing over a particular installed typeface. section 4.2

For a specific installed typeface, use its system font name. Quote names containing spaces, numbers, or punctuation other than a hyphen; capitalization and quotes are optional otherwise, but they make rules easier to read. Because visitors may have different fonts installed, list alternatives separated by commas. The browser uses the first available font, so finish with a similar generic family. section 4.3 section 10.3

MASTER: Build a fallback stack

This rule tries Optima first, then Calibri, then any available sans-serif family: body { font-family: Optima, Calibri, sans-serif; } Order matters: a browser checks each name from left to right. A generic final fallback keeps the intended broad style available when neither named system font is installed. section 10.3

A hosted font can also join the list. After adding the font host’s generated link tags in the page head, apply the loaded family in CSS and retain a generic fallback. Do not invite every font to the party: loading extra fonts can slow the page. section 18.3

Use a hosted font for paragraphs

After loading Lato from a font host, apply it to paragraph text: p { font-family: Lato, sans-serif; } If the third-party font file cannot load, the browser can still display the paragraph with a sans-serif font. section 18.3

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).

Compare the five generic families by their letter shapes and typical visual character before choosing one. section 4.1

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.