Before anyone takes in a single piece of information, the eye meets the typeface. Its shape, its size and the spacing between lines and words decide whether a text reads effortlessly or whether it strains, tires and ultimately excludes. Around 10 percent (British Dyslexia Association) of the population are affected by dyslexia, about 4 percent (British Dyslexia Association) of them severely. Add to that older people, people with reduced vision and everyone reading on a small display or in bright surroundings. Accessible typography is therefore not a matter of taste but a measurable requirement. This article shows which font choice, which sizes and which spacings make text readable, how WCAG 2.2 fixes these values and why a WCAG 2.2 audit checks typography objectively rather than by gut feeling.
Why Typography Decides on Access
Typography and color contrast are often mentioned in one breath but are two different construction sites. Contrast is about the ratio of foreground to background color, that is, measurable luminance values. Typography is about the typeface itself: the shape of the letters, their size, the line spacing and the spacing between characters, words and paragraphs. Both levels can fail independently. A text can be high in contrast yet hard to read if the lines sit too close, the font is too small or letters barely differ. How strongly color contrasts determine readability we cover separately; in this article color is deliberately left aside so the typeface stays in focus.
Font and Contrast Are Two Different Things
Font Choice: Clearly Distinguishable Letterforms
For on-screen text, the British Dyslexia Association recommends sans-serif fonts such as Arial, Verdana or Tahoma, because their letters appear less crowded and individual characters are easier to grasp (British Dyslexia Association). What matters is less the name of the font than whether confusable characters differ clearly. Classic stumbling blocks are the capital I, the lowercase l and the digit 1, which look nearly identical in many fonts. Equally tricky are the mirror shapes b, d, p and q as well as the combination r and n, which read as an m when set together. A good screen font gives each of these characters its own, unmistakable shape.
How much the shape of individual letters counts is shown by the typeface Atkinson Hyperlegible, which the Braille Institute developed for people with reduced vision (Braille Institute). It deliberately breaks with the typographic norm of uniformity and instead emphasizes the distinctness of individual characters: the lowercase l gains a tail, the digit 1 a hook, the interior spaces of the letters are opened and the terminals lengthened, so the characters can be told apart even under poor viewing conditions. The Braille Institute makes the font freely available under the SIL Open Font License (Braille Institute). The approach carries over to any accessible web development, without it having to be this one font: the yardstick is the distinctness of the characters, not the brand name.
Separate I, l and 1
Capital I, lowercase l and the digit 1 must be clearly different. In many screen fonts they look almost the same and cause confusion.
Mirror shapes b d p q
Letters that differ only by mirroring are confused by many readers. Distinct shapes instead of pure mirroring help.
Open counters
Large, open interior spaces of the letters, the counters, keep a, e and s recognizable even at small sizes and stop them from filling in.
Large x-height
A large x-height makes lowercase letters look bigger and improves readability without the point size having to grow.
True font styles
Bold and italic as their own drawn styles rather than artificially distorted variants preserve the shape of the letters and readability.
Sans-serif on screen
For body text on screen, sans-serif fonts whose characters do not look crowded and render with a clear outline are suitable (British Dyslexia Association).
Font Size and Line Length
For font size, the Dyslexia Style Guide of the British Dyslexia Association names a range of 12 to 14 point, which on screen corresponds to roughly 16 to 19 pixels (British Dyslexia Association). Headings should be at least 20 percent (British Dyslexia Association) larger than the body text so the structure becomes visible. It is important that these values are meant as a starting size and not as a fixed ceiling: WCAG does not prescribe an absolute pixel number but requires that text can be enlarged. The base size should therefore be set in relative units such as rem or em so the browser's scaling takes effect. The principles of editing accessible content also build on a reliable base size.
Besides size, line length decides readability. Lines that are too long make it hard to find the next line start after the line end; lines that are too short chop up the reading flow. A good range is 60 to 70 characters (British Dyslexia Association) per line, including spaces. In responsive layouts this is achieved through a maximum text width, for example with the CSS unit ch or a percentage limit on the text container. Anyone preparing content in a particularly simple form finds complementary rules in easy-to-read language, which assumes short lines and clear structure anyway.
- Base size for body text at roughly 16 to 19 pixels, set in rem or em rather than fixed pixels.
- Headings at least 20 percent larger than body text, with clear steps between the levels.
- Line length limited to 60 to 70 characters so the eye and reading flow find the line break reliably.
- No all caps across whole sentences, because continuous capitals blur the word shape and read more slowly.
- Sufficient line spacing so that ascenders and descenders of neighboring lines do not touch.
Line Spacing and Text Spacing under WCAG 1.4.12
Success criterion 1.4.12 Text Spacing makes readability measurable. It does not require a text to use certain spacings by itself, but that it does not break when users increase the spacing themselves. Specifically, content must remain readable and operable when line height is set to at least 1.5 times the font size, spacing after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times (W3C WCAG 2.2). Anyone who overrides their own styles via a text-spacing bookmarklet or browser extension quickly reveals layouts that clip or overlap text when given more room.
| Property | Minimum value (relative to font size) | CSS equivalent |
|---|---|---|
| Line height | at least 1.5 times | line-height: 1.5 |
| Spacing after paragraphs | at least 2 times | margin-block-end: 2em |
| Letter spacing | at least 0.12 times | letter-spacing: 0.12em |
| Word spacing | at least 0.16 times | word-spacing: 0.16em |
All four values come from the same success criterion and apply together (W3C WCAG 2.2). The most common error is not that spacings are preset too small, but that fixed heights and clipped containers prevent enlargement. Buttons with a fixed pixel height, boxes with overflow: hidden or text in tightly measured tiles fall apart with more line spacing. A robust layout therefore works with flexible heights, stores the spacings as design tokens and tests the enlarged state. The new criteria of WCAG 2.2 tighten above all the requirements for visible focus and target size, but text spacing remains the touchstone for pure readability.
Spacing Is a Promise, Not Decoration
Left-Aligned Text Instead of Justified
Justified text looks tidy at first glance, because both edges form a straight line. This is paid for with uneven word spacing: to make every line reach exactly to the right edge, the browser pulls the words apart by varying amounts. This creates so-called holes and rivers, vertical white channels running down the paragraph that distract the eye. For people with dyslexia this makes orientation additionally harder. The British Dyslexia Association therefore recommends left-aligned text without justification (British Dyslexia Association), that is, a fixed left and a freely running right edge.
For Newsletters and Email Too
200 Percent Scaling Without Layout Breakage
Many people enlarge text to read it comfortably. Success criterion 1.4.4 Resize Text requires that text can be enlarged up to 200 percent without loss of content or functionality (W3C WCAG 2.2). In addition, 1.4.10 Reflow requires that content reflows at a width of 320 CSS pixels, which corresponds to about 400 percent (W3C WCAG 2.2) zoom on a common desktop, without horizontal scrolling. Both succeed only when sizes are set in relative units and the layout is designed to reflow. The idea of considering accessibility from the start is explored in the article Accessibility by Design; for typography it simply means: do not hard-wire anything the user must be able to enlarge.
- Fixed pixel sizes for body text stop the browser's font-size setting from taking effect; rem or em solve that.
- user-scalable=no in the viewport declaration blocks zooming on mobile devices and is a clear violation of 1.4.4.
- Fixed container heights clip enlarged text; flexible heights and reflow instead of overflow: hidden keep the content visible.
- Text in images does not scale cleanly and turns blurry; real text stays readable at every enlargement.
- Columns fixed side by side break on zoom; a layout that reflows holds together even at 200 percent.
The Dyslexia-Font Myth
The idea that a specially designed dyslexia font solves the reading problem persists stubbornly. The best-known example is OpenDyslexic, whose letters are weighted at the bottom so they can supposedly be twisted less easily. The empirical evidence hardly supports this hope. A controlled study with children with dyslexia found no improvement in reading speed or accuracy compared with common fonts; the children read slightly slower and less accurately with OpenDyslexic (Annals of Dyslexia). Preference was missing too: none of the participating children stated they preferred to read the text in this font (Annals of Dyslexia).
A special dyslexia font does not replace good typography. What measurably helps are readable standard fonts, sufficient size and generous spacing that all users can adjust themselves.
In its style guide, the British Dyslexia Association consequently recommends no special font but well-readable, sans-serif standard fonts in sufficient size with clear spacing (British Dyslexia Association). The more effective path is therefore not a single miracle font, but the combination of distinguishable letters, appropriate size, calm left-aligned setting and spacing that can be enlarged under 1.4.12. Anyone who additionally wants to offer a toggle can provide a well-readable alternative, but should not treat it as a substitute for sound base typography.
Testing Typography Objectively in an Audit
Whether a font choice is good can be debated; whether a layout meets the WCAG criteria on typography can be tested. This is exactly where an audit separates taste from evidence. It does not measure whether a font is beautiful, but whether confusable characters are distinguishable, whether the text can be enlarged to 200 percent, whether it reflows at 320 pixels width and whether it withstands the text spacing under 1.4.12. Related details interlock too, such as meaningful alternative text; how accessible images and alt text should be handled we cover separately. For typography, the objective finding counts, not the gut feeling.
- Check the font choice: Are I, l and 1 as well as the mirror shapes b, d, p, q clearly distinguishable in the chosen font style?
- Measure size and line length: Does the body text sit around 16 to 19 pixels and the line at about 60 to 70 characters?
- Override text spacing: Does the content remain complete at 1.5 line height, double paragraph spacing and increased letter and word spacing?
- Enlarge to 200 percent: Does every text stay readable and every function operable without content being clipped?
- Test reflow: Does the page reflow at 320 pixels width without horizontal scrolling?
- Record findings: Map every point to a criterion and document it in an accessibility statement.
A single tested text is of little use if the rest of the page remains untested. Accessible implementation treats the interface as a whole, and the requirements of the BFSG apply to font and spacing just as to any other element. A WCAG 2.2 audit provides the prioritized action list for it, and ongoing BFSG monitoring detects when a later update shifts the carefully set sizes and spacings again.
Sources and Studies