Content updated and sources checked on 19 October 2026. The original publication date has been retained.
Good typography helps visitors read and scan a page. A striking typeface matters less than a clear order, sufficient contrast and text that adapts to the reader’s preferences. Use these ten points for a new page or a review of your current website.
1. Test type with your own content
Compare typefaces using real Dutch paragraphs, numbers and punctuation. Look at small labels and error messages too. A typeface that works well in a large heading is not necessarily comfortable to read in a long article. Do not choose solely on the basis of an attractive alphabet sample.
2. Limit variation deliberately
Start, for example, with one family for headings and body text, or a clearly defined pairing. This is a design choice, not a fixed accessibility requirement. Only add an extra weight or typeface when it has a recognisable purpose.
3. Check text contrast
WCAG 2.2 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, with exceptions such as logos and certain decorative or inactive content.[8] Measure the actual combination with the background, including when it contains a photo or gradient. Judging by eye alone is not enough.
4. Use real headings
Make the visible structure match the content structure. Give a topic an appropriate heading and use subheadings for its sections. Do not just make a normal paragraph large and bold to imitate a heading. A good hierarchy stays understandable when someone scans the page quickly.
5. Choose comfortable line spacing
Test short and long paragraphs. Line spacing of around one and a half is a useful starting point, not a universal endpoint. WCAG requires content to remain usable when a user adjusts line spacing to at least 1.5 times the font size.[9] The page does not have to use that value by default.
6. Let users change text spacing
The WCAG text-spacing test also adjusts paragraph spacing, letter spacing and word spacing. No content or functionality may be lost as a result.[9] Avoid placing text in boxes with an overly tight fixed height. Test buttons, cards and navigation labels in particular.
7. Limit long lines
Do not automatically give body text the full window width on a wide screen. Compare several column widths with the font size and content used. Allow text to adapt on a narrow screen; a readable desktop column must not become a horizontally scrolling mobile page.
8. Check zoom
WCAG describes reflow at 320 CSS pixels for vertically scrolling content, with exceptions for components that need two dimensions.[7] Check what happens to long headings and contact details. Simply reducing the font size to make everything fit is not a good solution.
9. Use emphasis sparingly
Reserve bold for words that genuinely help the reader. If every paragraph contains several emphases, the distinction disappears. Keep links recognisable and choose consistent styles for quotations, captions and lists. See also our approach to a consistent brand identity.
10. Going further: include a text test in handover
Check a long article, a form and a mobile card with real content. Test contrast, zoom, adjusted text spacing and font loading. Document the chosen styles so that new pages follow the same rules. Want to improve your website’s readability? Discuss your web design with Digital Pandas.
