Font Accessibility: Sizes, Weights & Legibility Rules That Matter

Why font accessibility matters

Roughly 1 in 6 adults has some form of low vision, and even users with perfect eyesight struggle with text that is too small, too light, or crammed into lines that are too long. Font accessibility is the practice of making your typography readable for everyone — and it is one of the cheapest improvements you can make, because it costs nothing but attention.

It also has a measurable SEO angle: Google's page-experience signals reward content that is easy to consume, and accessibility audits (Lighthouse, axe) flag typography problems automatically. A page that fails basic legibility tends to have higher bounce rates, which eventually shows up in rankings.

The WCAG rules that affect typography

The Web Content Accessibility Guidelines (WCAG) — the reference standard cited by accessibility laws worldwide — cover text in several success criteria:

You don't need AAA for most projects — but every one of these is a real user complaint waiting to happen if ignored.

What size should body text be?

The practical baseline most style guides converge on:

• 16 px (1 rem) minimum for body text on the web. Anything below 14 px should be reserved for captions or metadata, never primary content.
• 12 px is the absolute floor — and only for genuinely secondary labels. If you catch yourself using 10 px text, you are designing for a design tool, not for humans.
• Line height 1.5–1.7 for paragraphs. Headings can be tighter (1.1–1.3).
• Paragraph spacing should be at least as large as the line height, so paragraphs read as distinct blocks.

There is no law that says 16 px — but below that, reading speed measurably drops for low-vision users, and mobile browsers zoom or reflow unpredictably.

Weight, family and line length

• Avoid light weights (below 400) for body text. Thin strokes vanish on low-contrast screens and on budget devices. Use 400–500 for paragraphs, 600–700 for headings.
• Prefer fonts with a large x-height — the height of the lowercase letters relative to the capitals. Fonts like Inter, Source Sans, Verdana or Atkinson Hyperlegible were designed for exactly this. Decorative or condensed fonts are fine for headlines, hostile for paragraphs.
• Keep lines between 45 and 75 characters. Longer lines make the eye lose its place when returning from the next line; shorter lines force choppy saccades.
• Do not justify body text. Justification creates uneven "rivers" of white space that are especially hard for readers with dyslexia.
• Never rely on color alone to convey meaning in text (e.g. red for errors) — pair it with an icon or label. And check that your text/background pair passes contrast rules with the Color Contrast Checker.

How to test a font combination in seconds

You don't need to memorize the criteria above — the Font Accessibility Checker walks you through them:

1. Enter the font size (in px), weight, line height, and the text color plus background color.
2. The tool evaluates the combination against WCAG legibility guidance — contrast ratio, size floor, weight, and line-height rules — and tells you exactly which check fails and why.
3. Adjust the values and re-run until everything passes, then copy the final values into your CSS.

Because the tool runs entirely in your browser, you can paste in proprietary brand palettes without anything being uploaded anywhere.

Common mistakes (and the fix)

• Using opacity or a muted gray like #999 on white for body text — fails 4.5:1. Use #595959 or darker.
• Setting font-size in px everywhere and blocking browser zoom in the viewport meta tag. Use rem for text and never disable zoom — WCAG 1.4.4 explicitly tests it.
• Uppercase body text or letter-spacing: 3px on paragraphs — casing shapes help word recognition; forced tracking destroys it. Uppercase is fine for short labels.
• Embedding text in images. Text in images cannot be resized, reflowed, translated or read by screen readers. If you must, provide the same content as real text.
• Dark-mode inversions that keep the same colors — a light-gray text (#ccc) on dark gray (#222) can pass contrast yet still cause halation (glare) for astigmatic readers. Slightly reduce brightness contrast in dark mode (e.g. #e0e0e0 on #1a1a1a) rather than pure white on black.

The 30-second accessibility audit

Before you ship a page, run through this:

1. Zoom to 200% — does the layout survive?
2. Squint test — can you still read body text? If not, contrast or size is off.
3. Measure your line length — between 45 and 75 characters?
4. Run the exact values through the Font Accessibility Checker and fix whatever it flags.
5. Check color pairs with the Color Contrast Checker, including link colors against both backgrounds.

Accessible typography is not a design constraint — it is what good typography has always been. The same 16 px, 1.5 line-height, high-contrast combination that passes WCAG is simply the combination that reads comfortably for everyone.