Typography: The 80% of UI Design

Every type system begins with one number: your base font size. For web, 16px is the standard — it's the browser default and reads comfortably on most screens. For dense UIs (dashboards, admin panels), 14px works. For reading-heavy content, 18px.

The base size is your body text. Everything else is derived from it using a type scale ratio.

Here's the most common typography mistake: using too many font sizes for hierarchy. In reality, you need at most 3 sizes for most UIs — small, base, and large.

The real hierarchy tools are font weight and color. A bold 16px heading with 95% lightness is clearly a heading. Regular weight 16px body text at 60% lightness is clearly secondary. Same size, completely different hierarchy level.

The 60% lightness sweet spot works beautifully for body text on dark backgrounds — readable but clearly subordinate to headings.

Line height does double duty: it makes text readable AND creates visual spacing between elements. Body text needs 1.5-1.7x line height for comfortable reading. Headings need less — 1.1-1.3x — because large text already has built-in optical spacing.

Here's the trick: generous line height on body text means you need less margin between paragraphs. The text breathes on its own.

A type scale is a set of font sizes generated from a ratio. You take your base size and multiply up (or divide down) by the ratio. Popular scales include Minor Third (1.2x), Major Third (1.25x), and Perfect Fourth (1.333x).

Smaller ratios (1.125-1.2) give you subtle size differences — great for dense UIs. Larger ratios (1.25-1.333) create dramatic contrast — better for marketing pages and editorial content.

The key insight: using a mathematical scale means your sizes always feel harmonious together, even if you can't explain why.