When I ask designers what font size they\u2019ve set for a website, there are three typical answers: \u201c16 pixels.\u201d Or: \u201c14 pixels \u2013 it looks more modern.\u201d Or: \u201cI didn\u2019t set it; the framework does that.\u201d The last answer reveals the most \u2013 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\u2019t optional refinements, but a strict requirement with specific figures. In this guide, you\u2019ll find these figures \u2013 minimum sizes, line height, spacing, zoom behaviour \u2013 rather than the usual vague recommendations.<\/p>\n\n
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\u2019s needs \u2013 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.<\/p>\n\n
The established best practice for body text on the web is at least 16 pixels \u2013 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 \u2013 rem, em or per cent \u2013 rather than fixed pixel values. Only then will your text adapt to the user\u2019s browser settings; they may well have set their default font size from 16 to 20 pixels for good reason.<\/p>\n\n
Practical tip:<\/strong> You can find out how your own website is performing in just a few minutes with Access Score\u2019s free BFSG Check<\/a> \u2013 no registration required, and with an honest assessment based on WCAG 2.2.<\/p>\n\n 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:<\/p>\n\n 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 \u2013 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.<\/p>\n\n The \u2018serif or sans-serif\u2019 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 \u2013 a \u2018l\u2019 (lower-case L), a \u20181\u2019 (one) and an \u2018I\u2019 (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.<\/p>\n\n 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 \u2013 which corresponds to approximately 400 per cent zoom on a standard desktop \u2013 horizontal scrolling must not be required to view the content. Content must wrap, not be cut off.<\/p>\n\n 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 \u2013 you can find the specific values for this in \u2018Checking contrast correctly according to WCAG: minimum values and common errors<\/a>\u2019.<\/p>\n\n 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 \u2013 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\u2019s screen, but in everyday use across different devices, it is simply too thin for many users.<\/p>\n\n The typographical characteristics of a website can be easily measured from a technical perspective \u2013 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.<\/p>\n\n I describe how typography fits into the broader context of consistently accessible design in Accessible Web Design: The Principles That Really Make a Difference<\/a>. By getting the typography and layout right from the outset, you can prevent most typographical audit findings before they even arise.<\/p>\n\n Are you planning a relaunch or looking to improve your existing website? In 30 minutes, we\u2019ll discuss where the biggest barriers lie and how you can overcome them.<\/strong><\/p>\n\nLine height and spacing in specific values<\/h2>\n\n
Property<\/th> Minimum value (WCAG 1.4.12)<\/th> Practical recommendation<\/th><\/tr><\/thead> Font size for body text<\/td> No WCAG requirement<\/td> 16 px to 18 px (1 rem to 1.125 rem)<\/td><\/tr> Line height<\/td> 1.5 \u00d7 font size<\/td> 1.5 to 1.6 for body text<\/td><\/tr> Paragraph spacing<\/td> 2 \u00d7 font size<\/td> 1.5 to 2 between paragraphs<\/td><\/tr> Letter spacing<\/td> Allow 0.12 \u00d7 font size<\/td> Use the standard value; do not artificially reduce it<\/td><\/tr> Word spacing<\/td> Allow 0.16 times the font size<\/td> Default value<\/td><\/tr> Line length<\/td> No WCAG requirement (AAA: max. 80 characters)<\/td> 45 to 75 characters per line<\/td><\/tr><\/tbody><\/table><\/figure>\n\n Font selection: What really matters<\/h2>\n\n
Zoom and reflow: When users need the text to be larger<\/h2>\n\n
What you should definitely avoid<\/h2>\n\n
How to check your typography<\/h2>\n\n