Typography

Typography is not a font list. It is the design of reading.

Optical sizing — type behaves differently at different sizes

At display scale (48px+), letterforms have tight tracking and strong weight — the optical mass of the stroke fills the needed hierarchy. At body scale (14–16px), the same tracking becomes compressed and hard to read; loosen it slightly. At caption scale (11–12px), tracking needs significant loosening to maintain legibility — cramped small text is invisible text.

The principle: tighten as size increases, loosen as size decreases. Adjust per typeface — a condensed grotesque tightens faster than a humanist sans. The values below are starting points, not targets. Set them, then look, then adjust.

Specific em values are typeface-dependent. The direction column is the invariant — the numbers are where you start, not where you stop.

Measure — line length controls comprehension

Long lines force eye tracking. Short lines cause constant line breaks. The optimal measure for body text is 50–75 characters (roughly 45ch–70ch). This is not a soft suggestion — at > 80ch, comprehension degrades. Use max-width: 65ch on prose containers. Never 100% on body text in a full-width layout.

Tabular figures — numbers need alignment

In tables, price lists, leaderboards, or any interface where numbers are scanned vertically: use font-variant-numeric: tabular-nums. Proportional numerals have different widths per digit — 1 narrower than 8 — which means column values won't align. tabular-nums gives all digits the same horizontal advance. Apply via font-feature-settings: "tnum" as a fallback.

.data-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

OpenType feature flags — use the font's built-in intelligence

Modern fonts ship features that are off by default:

Type pairing logic

Pairing is contrast + harmony. The two fonts must differ enough to signal role, similar enough not to fight.

• Display + body sans: sharp display (Fraunces, Playfair, Canela) over neutral humanist sans (Geist, Satoshi). The contrast is personality versus utility.
• Editorial serif + humanist sans: editorial serif (Freight, Libre Baskerville) over humanist sans for body — warm, readable long-form.
• Single family, weight contrast: one variable font, extreme weight range (100–900). The hierarchy comes entirely from weight and size. Clean. Requires a font with full weight support.
• Forbidden: two decorative fonts competing for attention. Two geometric sans at similar weights. Serif for data-dense UI.

Font families — selection criteria

An existing product's typeface stays unless you are explicitly reopening visual direction. Choose by personality fit, not by avoiding overuse:

Banned: system-ui as the sole choice for premium UI. Inter — not wrong; overused; choose on craft grounds.