Systemic Typography

Typography is the backbone. Picking a font isn't designing a system. The system is the math underneath.

The pieces

1. Base size. One number, usually 16px. Everything else derives from it.
2. Scale. A ratio, like 1.250 (Major Third), used to generate every size. h1, h2, h3 aren't arbitrary. They're points on a curve.
3. Line height. A unitless multiple of font size. 1.5 for body. Locks vertical rhythm.
4. Spacing. Margins and padding in multiples of the base line height. Everything sits on the same vertical grid.

Why this matters

Rules scale. Choices don't. A system written this way can be implemented by anyone — designer, dev, agent — and the output looks like it came from one hand.

Don't pick fonts. Design the system.