Web typography: 6 settings that decide whether your site gets read
Choosing a typeface is the small part. Line length, line height and size decide whether the text is actually read.
Almost all of a website's content is text. Typography isn't decoration, then — it's the work itself.
1. Don't drop body text below 16 pixels
At 14 pixels on a phone, text is readable but tiring. The 16-18 pixel range is the right zone for body copy. Small type looks "elegant" but nobody reads it.
2. Keep line length between 60 and 75 characters
The eye has to find its place when returning from the end of one line to the start of the next. Too long and it gets lost; too short and it jumps constantly.
Limit the text column on wide screens. Letting text run 1400 pixels wide isn't using the screen — it's making reading harder.
3. Set line height around 1.5
For body text, line height should be about 1.5 times the font size. Tight lines turn text into a block and the eye skips lines.
For headings it's the opposite: at large sizes line height should be reduced, or the heading falls apart.
4. Only adjust letter spacing on large type
In large headings the gaps between letters look excessive; tightening slightly (negative tracking) pulls the heading together. Doing the same at small sizes harms readability.
For short all-caps labels you need the opposite: open the spacing up.
5. Use at most two typefaces
One for headings, one for body is enough. A third is almost always unnecessary and scatters the page.
When picking two, make sure they don't resemble each other — an unclear distinction looks worse than a clear mismatch.
6. Check the characters you actually need
Not every typeface supports the accented and special characters your languages need, and some support them badly. When choosing a font, type a sentence containing them and look closely.
If you use Google Fonts, don't forget to load the latin-ext subset for languages beyond basic English; otherwise those characters fall back to another font and the text looks patchy.
A common mistake
Centring text. Fine for short headings, but centring paragraphs longer than two lines makes reading harder — every line starts in a different place and the eye has to search each time. Left-align your paragraphs.
- #typography
- #design
- #readability
