Typography Basics

Strip the images from almost any product and what remains is text. Which means typography isn't a specialism applied at the end — it's the majority of the visual design, and the majority of whether the thing is usable.

Good news for beginners: font choice is the least important part. A single well-set system font beats a fashionable typeface set carelessly, every time.

Picking a size per element produces fifteen sizes and no relationships. Instead define five or six steps and use only those. A ratio between steps keeps them visibly distinct.

:root {  --text-xs: 0.75rem;   /* 12px — labels, meta */  --text-sm: 0.875rem;  /* 14px — secondary text */  --text-base: 1rem;    /* 16px — body, the floor */  --text-lg: 1.25rem;   /* 20px — lead paragraphs */  --text-xl: 1.5rem;    /* 24px — section headings */  --text-2xl: 2.25rem;  /* 36px — page titles */}

Neighbouring steps should be clearly different. If 18px and 20px both appear on a screen, nobody perceives a hierarchy — they perceive an inconsistency.

The pattern behind the table: as text gets larger, it needs proportionally less line height and slightly tighter letter spacing. Default settings are tuned for body sizes, so a 48px headline at default spacing looks loose and unfinished — that's usually what people are reacting to when a headline "doesn't look designed."

Line length is the one people skip. Text spanning 1200px is genuinely hard to read: returning to the start of the next line, the eye loses its place. Cap paragraph containers around 60–68 characters regardless of how wide the screen is.

• One typeface is a complete answer. Two is the practical maximum, and the second should have an obvious job — usually monospace for code
• Pick something with real weight range. A family with 400, 500, 600, and 700 gives you hierarchy without needing a second face
• Check the numerals and the capital I, lowercase l, and digit 1 — if they're indistinguishable, avoid it for anything with data in it
• System fonts are legitimate. They load instantly, they're well made, and nobody has ever abandoned a product over them

1. 01List every text size on the pageReduce them to five or six steps. Assign each element to a step.
2. 02Set body to 16px minimum, line height 1.6Then cap paragraph width so lines run 60–75 characters.
3. 03Tighten headingsLine height down to about 1.15, letter spacing slightly negative.
4. 04Check contrast on every muted text colourAny browser's dev tools will report the ratio. Fix anything under 4.5:1.