Three numbers decide how a block of text feels: how heavy the letters are (weight), how big they are (size) and how far apart the lines sit (line height). Most typography problems in interfaces are one of these three set to the wrong value, and all three are easier to judge by comparing than by measuring.
Weight
Weight is the thickness of the strokes, from 100 (thin) to 900 (black). Use few weights and make them clearly different:
- 400 for body text, 500 for labels, buttons and navigation.
- 600 or 700 for headings and emphasis.
- Two weights side by side should differ by at least 200; 400 next to 500 reads as a mistake, not a choice.
- Large display type can go lighter (300) because big strokes stay legible; small text should not go below 400.
Size
A size only means something next to another size. Build a scale where each step is noticeably bigger than the last, about 1.2 times or more: 14, 16, 20, 24, 32, 40, 48. Fewer sizes make a stronger hierarchy than many close ones.
- Body text: 16 px is the safe default on the web; avoid going below 14.
- Make the jump between a heading and its text obvious (at least 1.25 times).
- Use relative units (rem) so people who raise their browser text size are respected.
Line height
Line height is the distance from one baseline to the next, written as a multiple of the font size. Short lines and big type need less; long lines and small type need more.
- Body text: 1.4 to 1.6 (WCAG 1.4.12 expects text to survive a line height of 1.5).
- Headings: 1.1 to 1.25.
- Single-line labels and buttons: 1 to 1.25 is fine; the control height does the work.
- The longer the line (over 70 characters), the more line height it needs.
In CSS
body {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.15;
}Write line-height without a unit so it scales with the size of each element. A line-height of 24px copies down to children as 24px, which breaks when their size changes.
Practice
Weight Watcher shows you a sample with a hidden weight, size or line height and asks you to match it by eye, six rounds, with the real value and a rule of thumb after each one.