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.