When I ask designers what font size they’ve set for a website, there are three typical answers: “16 pixels.” Or: “14 pixels – it looks more modern.” Or: “I didn’t set it; the framework does that.” The last answer reveals the most – and, in my experience, is the most common. Yet typography plays a decisive role in determining whether a text is readable by everyone or only by those in the front row. Accessible fonts and well-thought-out text layout aren’t optional refinements, but a strict requirement with specific figures. In this guide, you’ll find these figures – minimum sizes, line height, spacing, zoom behaviour – rather than the usual vague recommendations.
What makes typography accessible
Accessible typography enables readers with different levels of visual ability, cognitive abilities and devices to read a text comfortably. It is characterised by sufficiently large, easily legible fonts; generous line and paragraph spacing; a sensible line length; and, above all, the fact that it can be adapted to the user’s needs – zoom, text enlargement, and individual settings for letter and word spacing. Unlike colour and contrast, there is no strict WCAG minimum size in pixels for typography; instead, there are precise guidelines for scalability and spacing, which serve as a benchmark in practice.
Font size: The correct default setting
The established best practice for body text on the web is at least 16 pixels – this corresponds to 1 rem in a standard environment. Anything smaller than this may often look more modern, but it reliably excludes users with impaired vision and makes reading unnecessarily difficult even for those with normal vision. For longer passages of text, 17 or 18 pixels are more comfortable. It is also crucial that you use relative units – rem, em or per cent – rather than fixed pixel values. Only then will your text adapt to the user’s browser settings; they may well have set their default font size from 16 to 20 pixels for good reason.
Practical tip: You can find out how your own website is performing in just a few minutes with Access Score’s free BFSG Check – no registration required, and with an honest assessment based on WCAG 2.2.
Line height and spacing in specific values
This is where the WCAG requirement becomes specific. Success Criterion 1.4.12 (Text Spacing) at Conformity Level AA requires that your page remains intact when a user sets the following values. If you bear this in mind from the outset, these values will serve as good defaults in your own design:
| Property | Minimum value (WCAG 1.4.12) | Practical recommendation |
|---|---|---|
| Font size for body text | No WCAG requirement | 16 px to 18 px (1 rem to 1.125 rem) |
| Line height | 1.5 × font size | 1.5 to 1.6 for body text |
| Paragraph spacing | 2 × font size | 1.5 to 2 between paragraphs |
| Letter spacing | Allow 0.12 × font size | Use the standard value; do not artificially reduce it |
| Word spacing | Allow 0.16 times the font size | Default value |
| Line length | No WCAG requirement (AAA: max. 80 characters) | 45 to 75 characters per line |
It is important to understand that the WCAG values are not the values you are required to set yourself. They define what is permitted to happen when a user customises their display – the page must be able to cope with this customisation without text being cut off, layouts collapsing or content disappearing. Those who already work close to these values in their own design are in the strongest position.
Font selection: What really matters
The ‘serif or sans-serif’ debate is hotly contested in design circles, but it is not a decisive factor when it comes to accessibility. Three things are more important. Firstly, the typeface must clearly distinguish between similar characters – a ‘l’ (lower-case L), a ‘1’ (one) and an ‘I’ (upper-case I) must not be confused with one another. Secondly, the font must remain clearly legible across the weights used; very thin fonts with a weight below 400 are often too delicate for body text. Thirdly, the font should have sufficient glyphs to display umlauts, special characters and accents correctly. Established web fonts such as Inter, Roboto, Open Sans, Verdana or Atkinson Hyperlegible meet these requirements without any problems. Specialised fonts for dyslexia or severe visual impairment are not strictly necessary, but may be useful for certain target groups.
Zoom and reflow: When users need the text to be larger
Two WCAG criteria relate to how your layout behaves when zoomed in, and both specify precise figures. Success Criterion 1.4.4 requires that text must be zoomable up to 200 per cent without any loss of content or functionality. Success Criterion 1.4.10 (Reflow) goes further: with a display area of 320 CSS pixels in width – which corresponds to approximately 400 per cent zoom on a standard desktop – horizontal scrolling must not be required to view the content. Content must wrap, not be cut off.
In practical terms, this means: use a responsive layout that reverts to the behaviour of smaller screens as the zoom level increases. Avoid fixed widths in pixels. Ensure that components such as navigation bars, tables and maps wrap when zoomed in, rather than breaking. Closely related to this is the issue of colour contrast, which becomes even more important when text is enlarged – you can find the specific values for this in ‘Checking contrast correctly according to WCAG: minimum values and common errors’.
What you should definitely avoid
There are four common pitfalls that I regularly come across during audits. Firstly: text as an image. Anything embedded as a graphic cannot be resized, coloured or read aloud by a screen reader – with the exception of logos. Secondly: justified text. On the web, this creates uneven spacing between words and makes reading unnecessarily difficult, particularly for people with cognitive impairments. Left-justified text is almost always the better choice on the web. Thirdly: entire paragraphs in capital letters. Text written in all caps is tedious to read over more than one line because the eye loses track of the word forms. Fourthly: font weights that are too thin. An elegant 200-point font weight may look good on a designer’s screen, but in everyday use across different devices, it is simply too thin for many users.
How to check your typography
The typographical characteristics of a website can be easily measured from a technical perspective – font size, line height, reflow behaviour when zooming, and contrast in the fonts used. This is precisely what our free Access Score does: it automatically checks your site for typical typographical weaknesses and shows you where you are still below the minimum standards or where content would break when zoomed in. It therefore reveals not only individual errors, but also systematic design choices that can only be corrected retrospectively with considerable effort.
I describe how typography fits into the broader context of consistently accessible design in Accessible Web Design: The Principles That Really Make a Difference. By getting the typography and layout right from the outset, you can prevent most typographical audit findings before they even arise.
Are you planning a relaunch or looking to improve your existing website? In 30 minutes, we’ll discuss where the biggest barriers lie and how you can overcome them.
