Text is most of the interface
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.
Build a scale, not a list of sizes
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.
Line height, line length, and weight
| Property | Body text | Headings |
|---|---|---|
| Line height | 1.5 – 1.65 | 1.1 – 1.25 |
| Line length | 60 – 75 characters | Under 40 characters |
| Letter spacing | Default | Slightly tight (−0.02em) |
| Weight | 400 – 450 | 600 – 700 |
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.
Choosing typefaces
- 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
Fixing a page's type in twenty minutes
- List every text size on the pageReduce them to five or six steps. Assign each element to a step.
- Set body to 16px minimum, line height 1.6Then cap paragraph width so lines run 60–75 characters.
- Tighten headingsLine height down to about 1.15, letter spacing slightly negative.
- Check contrast on every muted text colourAny browser's dev tools will report the ratio. Fix anything under 4.5:1.
Common mistakes
- Body text below 16px on mobile
- Paragraphs running the full width of a desktop screen
- Default line height on large headings, which leaves them looking loose
- Grey-on-white text chosen for calmness that fails contrast
- Two decorative typefaces competing with no clear job for either
Key takeaways
- Define five or six sizes and use only those
- Line height goes down as text gets bigger; line length stays capped either way
- One well-set typeface beats a fashionable one set badly
- Contrast is part of typography, not a separate accessibility chore
Try it yourself
Open your product and measure the body text size and the widest paragraph. If the text is under 16px or the line runs past about 75 characters, change those two things only, then read a page. The difference is usually larger than expected.
CHECK YOUR UNDERSTANDING
Pass the quiz below to unlock this.