Typography System

Tools

Specify a type system, export it, and audit one you inherited.

01

System generator

Set the endpoints and the density; everything else derives. Density scales the spacing ladder only. The type scale holds, so one system serves both a dense dashboard and an open reading page.

GenerateRatio solved from the endpoints
Solved ratio
—
Levels
—
Spacing factor
—
Suits
—
Spacing ladder
Preview
Hand over the written spec, not just the tokens

CSS and JSON give the values. The written spec gives the rules that govern changing them, which is what gets lost when a system is handed over as a token file alone.

02

System auditor

Paste a set of roles, one per line. The parser reads size, weight, line height and measure from whatever numbers it finds.

AuditFormat: name size weight line-height measure
—out of 100
03

Measure calculator

Converts between container width and character count using the real advance width of the loaded font. Works in both directions.

ConvertMeasured from the rendered font
Twelve blocks in the east ward recorded surface temperatures above 44 °C last August. The intervention pairs tree canopy with reflective roofing on the eleven buildings that house the most heat-vulnerable residents.
04

Typeface analyser

Reads x-height, cap height, average advance and digit width spread from the rendered font, then judges whether two faces are far enough apart to read as a deliberate pairing.

CompareRatios relative to the em, so they hold at any size
05

Contrast checker

Thresholds move with size and weight, so a ratio that passes for a heading can fail for the caption below it. Checks against the role rather than a single number.

CheckWCAG 2.2, applied to the role
Sensors report hourly through the summer, and the panel reviews the series each fortnight.
06

Stress bench

Six cases every role should survive before it ships. The fixed-width case is the control: it is the one that fails.

StressLongest, wrapped, empty, translated
07

Order of use

Faster in sequence than in isolation.

  1. Analyser. Pick the faces and confirm the pairing has enough separation before anything else depends on them. Check digit spread now, not after the tables are built.
  2. Generator. Set the endpoints from the largest thing on your busiest screen and the smallest thing anyone must read.
  3. Export the written spec as well as the tokens.
  4. Measure calculator, to turn role measures into container widths.
  5. Contrast checker, per role.
  6. Stress bench, on every role, before any of it reaches a component.
  7. Auditor, whenever you inherit a system.
One system, switchable density

Serving both a dense dashboard and an open reading page usually gets solved by building two systems. The alternative is one type scale with a switchable spacing factor. Roles never change, a component written once behaves on both surfaces, and the difference is a single multiplier.