liveBook · Manning

Stroke contrast

As explained in Web Design Playground

The difference in thickness between the thinnest and thickest strokes within a typeface.

Stroke contrast is the difference between a typeface’s thinnest and thickest strokes. Low contrast keeps delicate strokes from disappearing on small screens, helping text stay readable. section 20.3

When choosing a typeface, use this quick check:

  • Look for minimal variation between thin and thick strokes. section 20.3
  • Compare stroke contrast alongside counters, apertures, and x-height. section 20.3
  • Choose paired typefaces with similar legibility characteristics, even when mixing serif and sans-serif designs. section 20.3

Try it in a portfolio

Compare Playfair Display and Open Sans as heading and body choices. Inspect their thinnest and thickest strokes, then check whether both remain clear at small sizes. section 20.3

How Web Design Playground covers it

How deep it goes
Defines low contrast as minimal thin-to-thick variation and stops short of explaining letterform construction.
Examples
Uses Playfair Display, Open Sans, and a figure of small-screen typeface criteria.
What you can do after
Evaluate typefaces for small-screen readability and harmonious pairing.
How it connects
Connects stroke contrast with counters, apertures, x-height, legibility, and typeface pairing.

Also explained in

Compare how 2 books explain stroke contrast →

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