What Helps Readability, What is Folklore, and What WCAG Says

Clear the biggest misconception first, because it is what people arrive here looking for.

WCAG names no fonts. Not one. There is no approved list, no certified typeface, and no such thing as a WCAG compliant font. A vendor selling you one is selling a design opinion with a compliance label stuck on it.

It does describe letterforms, once, in a note attached to its definition of large text. Fonts with extraordinarily thin strokes, or unusual features that reduce the familiarity of their letterforms, are harder to read, especially at lower contrast levels. That sentence is the whole of what the standard says about typeface choice, and two of the six properties below come straight out of it.

The Six Properties That Actually Matter

None of these is a rule. All six are the things that decide whether somebody can read your page at the size you set it.

1. 1Distinguishable characters. Capital I, lowercase l, and the digit 1 should not be the same shape. Zero and capital O should not either.
2. 2Open apertures. The gaps in c, e, s and a stay open rather than closing up. Closed apertures blur together at small sizes and low contrast.
3. 3Generous x-height. The lowercase letters sit tall relative to the capitals, which is one of the strongest predictors of readability at small sizes.
4. 4Real weight difference. Bold has to look clearly bolder. Thin and light weights are where low-vision readers lose text entirely, and this is the property the standard itself names.
5. 5Unambiguous letter pairs. rn should not read as m. cl should not read as d.
6. 6Consistent spacing. Tight tracking hurts people with dyslexia and anybody reading at speed.

What About Dyslexia Fonts?

Fonts marketed specifically for dyslexia are popular and the evidence for them is weaker than the marketing. The largest study we can point to tested 170 children with dyslexia reading text set in a dyslexia-specific font against the same text in Arial, and found no advantage in speed or accuracy. Most of the children preferred reading in Arial, and their preference had nothing to do with how well they read. A second experiment across 147 children, with and without dyslexia, reading word lists in three typefaces reached the same conclusion. The font neither helped nor hindered.

The things that do reliably help are duller and cheaper. Adequate size. Generous line spacing. Left-aligned text rather than justified. Shorter line lengths. And letting people override your styles, which is not a preference at all but the Level AA text spacing rule two sections down.

The British Dyslexia Association publishes figures worth having if you are setting type for a general audience. Body text at 12 to 14 point, roughly 16 to 19 pixels. Headings at least 20 percent larger than body text. Line spacing at 1.5. Inter-letter spacing around 35 percent of the average letter width, with inter-word spacing at least three and a half times that. Left aligned, never justified. Avoid pairing green with red or pink. And a cream or soft pastel background rather than white, because white can be dazzling.

One honest divergence. That guidance recommends sans serif typefaces by name, and we do not, for the reason in the next section. We think the category matters much less than the size and the spacing, and it is fair to say we are disagreeing with a source we otherwise cite.

Serif or Sans Serif?

This argument has run for decades and the honest answer is that it matters far less than size, spacing and contrast. A well-set serif at 18px with generous leading is easier to read than a cramped sans at 13px, every time. Pick for clarity at the sizes you actually use, and stop worrying about the category.

The Sizes and Spacing to Set

The unit row is the one that has quietly turned into folklore, so it is worth stating plainly. Text sized in pixels scales with browser zoom exactly like everything else, and no failure technique exists for using pixels. What pixel text does not do is respond to the browser's own default font-size preference, which is a real and much narrower problem than never use px. Relative units are still what we would use, and sizing text in em is a published sufficient technique. Viewport units are the ones with a documented failure attached, because text sized in vw does not respond to zoom at all.

The One Size Threshold WCAG Does Define

It is not a minimum, it is a boundary, and it decides which contrast ratio applies to your text. Large text means 18 point, or 14 point when it is bold, which converts to roughly 24 pixels and 18.5 pixels, or about 1.5em and 1.2em against a default body size. Text at or above that needs 3:1 contrast. Everything below it needs 4.5:1.

One catch closes the loophole people reach for. Font size means the size as delivered, not the size after somebody zooms. A reader magnifying your 16px body text to 200 percent has not turned it into large text, and the 3:1 threshold does not become available to you.

The Three Typography Rules You Have to Meet

Everything above is judgment. These three are requirements.

• 1.4.4 Resize Text. Text has to work at 200 percent with no loss of content or functionality. Captions and images of text are excepted.
• 1.4.12 Text Spacing. Your layout has to survive the reader applying all four metrics, not you shipping them. Images of text are excluded, and so are captions burned into video frames.
• 1.4.5 Images of Text. Use real text rather than a picture of text, unless the presentation is essential or the user can customize it.

That third one is where the most common mistake on this subject lives, and it is worth being exact, because the obvious fix does not work. An image of text can be read aloud, since that is what alt text does. Writing the words into the alt attribute satisfies the non-text content rule and leaves the images-of-text rule failed, because that rule wants real text somebody can resize, restyle and reflow. The remedy is real text styled with CSS, which is a published technique, or a control letting the user swap the image for text. At Level AAA there is a stricter version which removes the customizable-presentation escape entirely.

Note also what does not apply to an image of text, because two of the reasons people usually give come from criteria that carve the case out. The resize rule excepts images of text. The spacing rule excludes them. So the argument for real text is that a picture of words cannot be reflowed, recolored or selected, not that it fails those two.

Logos are exempt, and the exemption is wider than most people know. Text that is part of a logo or brand name has no contrast requirement at all, and W3C's own tutorial adds that logos are also outside the minimum text-size expectations that apply to other images of text.

Text spacing is the rule that catches people out, and the test has to be run properly to mean anything. The criterion asks that no content or functionality is lost when the user sets all four metrics at once and changes nothing else. Line height at 1.5 times the font size, spacing after paragraphs at 2 times, letter spacing at 0.12 times and word spacing at 0.16 times. Apply them one at a time in developer tools and a layout can survive each and break under all four together. Note the language exception too, since a script that does not use one of those properties, such as Japanese and paragraph spacing, conforms using only the ones that apply.

Contrast Is a Typography Decision Too

The most common typography failure we find is not the typeface. It is light grey body text on white, chosen because it looks calm in the design file. Whether it fails depends entirely on the grey, and there is one number worth memorizing. #767676 is the lightest neutral grey that clears 4.5:1 on white. Anything lighter than that does not, and W3C uses the same value in its own worked examples.

Thin weights make it worse in a way a ratio cannot see, and that is not our opinion either. The standard's own note says fonts with extraordinarily thin strokes are harder to read especially at lower contrast levels. A 200-weight font at exactly 4.5:1 is harder to read than a 400-weight at the same ratio, and the calculator will call both of them a pass. So check your pairs to catch the ones that fail outright, then look at the result at the weight you are actually shipping. Our contrast guide has the ratios in full.

One place this bites that designers rarely check. Placeholder text is inside the contrast rule, and browsers usually render it in a color that does not meet the minimum, so a form left at the default is failing before anybody types anything.