The designer picked a lovely light typeface at 14 pixels, set in a soft gray, with the headings in all capitals and the paragraphs justified to look tidy. It looked elegant on a big monitor in the studio. Then the site went live, and your older customers started calling instead of reading the services page, and one of them said plainly that she could not read it.
Accessible fonts are less about finding a magic typeface and more about a handful of choices: size, weight, spacing, line length and how text behaves when people enlarge it. This post walks through those choices for a typical WordPress business site, what WCAG actually says, and what is simply good practice. Contrast is a separate topic, linked below.
What WCAG does and does not say about type
People are often surprised that WCAG sets no minimum font size and names no approved fonts. What it does set is how text must behave:
- 1.4.4 Resize Text: people must be able to enlarge text to 200 percent without losing content or features. Browser zoom is the usual way.
- 1.4.12 Text Spacing: if a visitor increases spacing with their own settings, nothing should be cut off or overlap. The values tested are line height of 1.5 times the font size, paragraph spacing of 2 times, letter spacing of 0.12 times and word spacing of 0.16 times.
- 1.4.3 Contrast (Minimum): text needs enough contrast with its background, and “large text” gets a lower ratio, which is the one place size enters the rules directly.
- Images of text: WCAG also asks you to use real text rather than pictures of text, except for logos and cases where the exact look is essential.
Everything else in this post is practice rather than rule. It is the practice that makes the rules easy to meet, though, and it is what readers notice.
A readable font size for body text
Most browsers start at 16 CSS pixels for normal text, and many designers treat that as a sensible floor for body copy on a business site. Smaller sizes are fine for short labels or legal small print, used sparingly. Long paragraphs at 13 or 14 pixels are tiring for many readers and a real barrier for people with low vision.
How the size is set matters as much as the number. Some people change their browser’s default font size rather than zooming. If the theme sets every size in fixed pixels, that setting is ignored. If sizes are set in relative units (rem or em), the whole page grows with the reader’s choice. This is a theme or stylesheet decision, so ask your developer how sizes are defined if you are not sure.
A readable font size also depends on the typeface. Two fonts at the same pixel size can look very different, because one has a taller x-height (the height of lowercase letters) than the other. Judge by eye on a phone as well as a desktop.
If you need to change the site’s fonts, our guide to changing fonts in block and classic WordPress themes shows where the settings live.
Choosing accessible fonts for most readers
No font is accessible for everyone, and people with dyslexia in particular report different preferences. A few traits help most readers:
- Distinct letter shapes. Check that capital I, lowercase l and the number 1 look different, and that “rn” does not read as “m”. These matter in names, codes and addresses.
- Open, simple forms for body text. Many common sans serif and serif fonts do well here. Script, handwritten and heavily stylized fonts belong only in large display text, if anywhere.
- Not too thin. Light and hairline weights break up on lower-quality screens and at small sizes, and thin strokes lower the effective contrast even when the color passes a checker.
- Few families. One font for headings and one for body text is plenty. Every extra font is more to load and more to keep consistent.
Fonts marketed as designed for dyslexia have fans, but readers differ and none of them suits everyone. What helps more reliably is letting people use their own settings: a site that does not break when someone overrides fonts or spacing in the browser serves everyone’s preferences.
Line height, spacing and line length
Text that is crammed together vertically is harder to track from the end of one line to the start of the next. A line height of around 1.5 for body text is a common, comfortable choice, with a clear gap between paragraphs.
Line length matters too. Very long lines across a wide screen make it easy to lose your place. WCAG’s AAA guidance suggests no more than 80 characters per line; most well-designed sites stay comfortably below that by limiting the width of the text column, even on wide screens.
The bigger technical risk is containers built to an exact height. A button, card or banner sized to fit its text exactly will clip or overlap the moment someone increases spacing or text size. This is what 1.4.12 testing catches. A quick way to try it is a text spacing bookmarklet or browser extension that applies the WCAG values to the page; then look for words cut off in buttons, menus and cards. How zoom and reflow work at the layout level is covered in our post on reflow and resizing text.
Capitals, italics, justification and emphasis
Several common styling habits make reading harder:
- All capitals. Fine for a short label or a button. Whole sentences or paragraphs in capitals are slower to read, because words lose their shape. If you want capitals for style, type the text normally and let the theme transform it visually, so the underlying text stays in normal case.
- Long italics. Italic body text is harder to read, especially at small sizes. Keep it for short emphasis or titles.
- Justified text. Making both edges straight stretches the gaps between words unevenly. On narrow phone screens it creates large holes that some readers, including many with dyslexia, find distracting. Left-aligned text is the safer default for English.
- Centered paragraphs. One centered line works. A centered paragraph makes every line start in a different place.
- Bold everywhere. If half the page is bold, nothing stands out.
Underlined text that is not a link causes confusion too, because underlining is the strongest visual sign of a link.
Icon fonts and text that is not really text
Many themes and page builders show icons using an icon font, where each icon is a special character in a font file. That has accessibility side effects:
- When a visitor overrides fonts in their browser, which some people with dyslexia or low vision do, icon characters turn into empty squares or random letters.
- Screen readers may try to read the character, announcing something meaningless, unless the icon is hidden from them properly.
- If the icon font fails to load, the icons vanish or show as boxes.
Inline SVG icons avoid most of this. Our post comparing SVG icons and icon fonts covers the performance side of that switch, and labeling and hiding icons properly is explained in our guide to accessible icons and SVG graphics.
Also look for text placed inside images: a banner with an offer, a heading saved as a graphic to use a special font, a chart with labels. That text cannot be resized cleanly, restyled or read by a screen reader. Use real text styled with CSS, and keep images of text for logos.
A quick check for accessible fonts on your own site
- Open your home page and one long content page on a phone. Read a full paragraph. Is it comfortable?
- On a desktop, zoom the browser to 200 percent. Does any text overlap, get cut off or disappear?
- Raise the browser’s default font size in its settings and reload. Does the text grow, or does the theme ignore it?
- Apply the text spacing values with a bookmarklet and check buttons, menus and cards for clipped words.
- Look for whole paragraphs in capitals, italics, light weights or justified alignment.
- Check that every icon is either clearly labeled or next to a word that says what it means.
- Check contrast for body text, links and buttons.
That last check has its own rules and tools, covered in our post on color contrast requirements. Typography is also one of the areas editors affect without noticing, which our guide to accessible content for editors picks up.
Who fixes what
Editors can stop overriding: no custom tiny sizes, no paragraphs set in capitals, no justified text, no text in images. The rest lives in the theme: base size and units, line height, column width, font choice, icon handling, and containers that tolerate bigger text. Some of it is a quick stylesheet change in a child theme. Some, like a theme that sets everything in fixed pixel heights, takes longer. If you want help sorting out which is which, our ADA website accessibility help covers audits and fixes for WordPress sites.
Frequently asked questions
What is the minimum font size for ADA or WCAG?
Neither sets one. WCAG requires that text can be enlarged to 200 percent and that spacing can be increased without breaking the page, and it uses size only to define large text for contrast. In practice, around 16 CSS pixels is a common floor for body text, with smaller sizes kept for short labels.
Are serif fonts less accessible than sans serif fonts?
Not as a rule. Both kinds include very readable and very hard-to-read fonts. What matters more is clear letter shapes, a generous x-height, a weight that is not too thin, and enough size and spacing. Pick a font with distinct characters and test it with real content on a phone.
Should I add a font size switcher to my site?
Usually it is not needed. Browsers already let people zoom and set their own default size, and people who need larger text tend to rely on those settings everywhere. Your time is better spent making sure the site works properly when they do. A switcher that only changes a few elements can also confuse.
Do custom web fonts cause accessibility problems?
Not by themselves. Problems come from how they are chosen and loaded: decorative fonts used for body text, very thin weights, icon fonts used for meaningful icons, or text left invisible while a font file loads. A readable typeface, loaded so text shows straight away, is fine.
If your theme sets type in fixed sizes, uses light gray thin fonts everywhere, and breaks as soon as anyone zooms, adjusting it page by page will feel endless. Sometimes the better path is an accessible website design where the type system is chosen and tested for readability from the first draft.
Next in this series: Color Blind Friendly Website: When Color Can’t Carry Meaning
