Typography Systems
The single element present on every screen a product will ever show — and the one most often left to default settings.
4.1.1Definition
A typography system is a defined, limited set of typefaces, sizes, weights, and line-height rules applied consistently across a product, rather than ad hoc font choices made screen by screen. It typically expresses itself as a type scale — a fixed sequence of sizes (e.g., 12/14/16/20/24/32/48px) that every heading and body element draws from.
4.1.2Why It Exists
Text carries almost all of a product's actual information, so its legibility and hierarchy directly determine comprehension speed. A typography system exists to guarantee consistency at scale — without one, every new screen invents its own sizes, and the product slowly accumulates a dozen near-identical but inconsistent text styles that erode visual coherence and make maintenance harder.
4.1.3Core Decisions
- Typeface pairing — most products need at most two families: one for headings/UI, one for body/long-form reading, chosen for legibility at their actual usage size, not just visual appeal in a mockup.
- Type scale — a mathematically consistent progression of sizes (often based on a fixed ratio) rather than arbitrary pixel values chosen per screen.
- Line height and measure — line height typically 1.4–1.6x font size for body text; line length (measure) ideally 50–75 characters for comfortable reading.
4.1.4Common Mistakes
- Too many font sizes in use. Each new screen introducing its own one-off size, until the product has dozens of barely-distinguishable text styles with no clear hierarchy.
- Choosing typefaces for personality over legibility. A distinctive display font used for body copy, where reading comfort at length matters far more than character.
- Ignoring line length. Body text stretching full-width on large screens, forcing the eye to travel uncomfortably far per line.
4.1.5Best Practices
- Define the type scale once, as design tokens (3.37), and never introduce a one-off size outside it.
- Constrain body text measure with a max-width, independent of the overall page width.
- Test chosen typefaces at their actual deployed size, not just at large mockup scale.