Typography Systems

Typography Systems

A type system is the set of rules that turns raw fonts into a coherent, scalable voice across every screen. Get it right and hierarchy, rhythm, and readability come for free; get it wrong and no amount of color or layout rescues it. This is the bible: anatomy → scale → spacing → selection → variable/OpenType → rhythm → hierarchy → tokens → accessibility → mistakes.

1. Anatomy (the vocabulary you need to make decisions)

• Baseline — the invisible line letters sit on. The anchor for vertical alignment.
• x-height — height of a lowercase x. The perceived size of a font; two fonts at 16px look different sizes because of it. High x-height (Inter, Source Sans) reads larger and better at small sizes; low x-height (Garamond) feels elegant but needs more size.
• Cap height — top of a capital letter. Usually below ascender height. Aligning UI elements to cap height (not the font's em-box) is what makes icons + text look centered.
• Ascender / descender — strokes above x-height (h, b, k) / below baseline (g, p, y). They eat into line-height; this is why a 16px font occupies ~22px of vertical space.
• Counter — enclosed/partially-enclosed space inside o, e, a. Open counters survive small sizes and low resolution.
• Aperture — the opening of a counter (the gap in c, e, a). Wide apertures (Frutiger, Inter) = legible at distance/small size; closed apertures hurt accessibility.
• Terminal — the end of a stroke not finished with a serif. Shape signals the typeface's character/era.
• Em / em-box — the design grid the font is drawn on. 1em = the font-size. The reference for all relative metrics.

Why care: you can't pick a UI font, set a scale, or align to a grid without knowing x-height, cap height, and how ascenders/descenders consume line-height.

2. The modular scale

Pick a base size and a ratio; multiply repeatedly to generate steps. This produces sizes that relate harmonically instead of arbitrary 14/15/17/19px noise.

Base size: 16px on web — it's the browser default, the minimum for comfortable body text, and the anchor for rem. Never set html { font-size: 14px } (it shrinks everyone's accessibility baseline).

Common ratios (smaller ratio = subtle, dense UI; larger = dramatic editorial):

Generating a scale (base 16, ratio 1.25): step_n = 16 × 1.25ⁿ → 10.24, 12.8, 16, 20, 25, 31.25, 39, 48.8, 61… Round to sane px, then store in rem.