liveBook · Manning

Slab serif

As explained in Design for Developers

A slab serif is a serif typeface classification characterized by substantial, block-like serifs.

A slab serif is a serif classification with substantial, block-like serifs. It often feels friendlier and bolder than more formal serif styles. section 8.2.2 section 8.2.6

Use a slab serif by making its role and contrast deliberate:

  • Set slab serif headings against sans-serif body copy, as with Roboto Slab and Roboto. section 8.2.2
  • Choose enough difference in size and weight to make the content hierarchy clear. section 8.2.2
  • Check the typeface’s mood and test spacing for readability before settling on the design. section 8.2.6

A friendly, bold heading

Museo Slab can make a design feel friendlier and bolder than a more formal serif. Roboto Slab paired with Roboto applies the same contrast to a headline-and-body combination. section 8.2.2 section 8.2.6

Figure 8.13 Roboto Slab and Roboto are two typefaces from the same superfamily, Roboto, and pair well together.

Compare Roboto Slab and Roboto as coordinated headline and body typefaces from one superfamily. section 8.2.2

How Design for Developers covers it

How deep it goes
Defines slab serif as a serif subclassification and focuses on pairing, hierarchy, mood, and readability rather than construction.
Examples
Uses Roboto Slab with Roboto for pairing and Museo Slab to demonstrate a friendly, bold mood.
What you can do after
Apply it via a slab-serif headline, contrasting sans-serif body copy, and deliberate testing of hierarchy and readability.
How it connects
Connects slab serif to serif classification, sans serif pairing, typeface superfamilies, hierarchy, mood, and readability.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.