Accessible Fonts: A Plain-English Guide to Choosing Readable Typography

The font you choose is one of the first accessibility decisions you make on your website, and one of the easiest to get wrong without realising it. A typeface that looks elegant in your designer’s mockup can be genuinely hard to read for someone with low vision, dyslexia, or just tired eyes on a phone in bright sunlight. And because you picked it, you are used to it, the problem is almost invisible from the inside.

The good news: getting typography right is not about taste or design talent. It comes down to a handful of concrete, checkable choices — the shape of the letters, how big the text is, how much space sits between lines, and whether the text can stretch when someone needs it bigger. None of it requires code, and most of it can be fixed in the same settings panel where you picked the font in the first place.

This guide walks through what actually makes type readable, the mistakes that show up most often in audits, and how to check your own site. None of this is legal advice — but readable type is one of the most direct things you can do to meet WCAG and reduce the risk that a visitor simply gives up and leaves.

Why fonts are an accessibility issue, not just a style choice

Around one in twelve people reads your site under conditions you don’t experience. Some have low vision and zoom the page to 200% or more. Some have dyslexia and find certain letter shapes — a lowercase “l” that’s identical to a capital “I”, or a “b” and “d” that mirror each other — genuinely slow to decode. Some are reading on a cracked phone screen on a bus. Some are 68 years old and their close-up vision isn’t what it was.

For all of these people, your font choice is the difference between reading comfortably and giving up. The Web Content Accessibility Guidelines (WCAG) don’t mandate a specific typeface, but several of their requirements are really about type: text has to have enough contrast, it has to survive being resized, and it has to still work when a reader applies their own spacing. Miss those and you fail real, testable success criteria — the same ones an automated scanner or an accessibility consultant will flag.

So this isn’t a matter of opinion. “I like this font” and “this font is readable for most people” are two different claims, and only the second one shows up in an audit.

What makes a font readable

You don’t need to memorise typography theory. A handful of properties separate readable fonts from risky ones.

Distinct letter shapes. The biggest readability factor is whether letters can be told apart. The classic trap is the “Il1” test: type a capital I, a lowercase l, and the number 1 next to each other. In many fonts they’re nearly identical. Good reading fonts give each a distinct shape. The same goes for “rn” not looking like “m”, and “0” (zero) being distinguishable from “O” (the letter). Fonts designed with this in mind — Atkinson Hyperlegible, Lexend, Inter, Verdana, Tahoma — deliberately make these characters different.

Open, generous shapes. Letters with large, open interiors (the hole in an “a” or “e”, called the aperture) are easier to read at small sizes and low contrast than tightly closed, condensed designs. Very thin “hairline” weights and ultra-condensed fonts read poorly for almost everyone and badly for people with low vision.

Serif or sans-serif? This matters less than people think. Both can be highly readable on screen. The myth that one is universally “more accessible” isn’t supported by strong evidence — a well-designed serif font like Georgia is more readable than a poorly chosen sans-serif. Worry about the letter shapes, weight, and size before you agonise over serifs.

Real fonts, not pictures of fonts. If your headline or logo strapline is actually an image with text baked into it, screen readers can’t read it, and it turns blurry when zoomed. WCAG specifically discourages “images of text” for exactly this reason. Use real text styled with CSS wherever you possibly can.

A safe default: pick a widely used, screen-optimised font for body text — system fonts, Inter, Source Sans, Atkinson Hyperlegible, or similar — and save anything decorative for short headings only, never for paragraphs people have to read.

Size: the mistake almost everyone makes

The single most common typography problem we see is body text that’s too small. Designers love the look of delicate 12px or 13px text, but for body copy that’s genuinely hard for a large share of visitors.

A practical floor for body text is 16px (1rem). That’s the browser default for a reason. Many readable sites go to 17 or 18px. Going below 16px for the main content — terms, descriptions, blog text, product details — is asking for trouble. Captions and fine print can be a little smaller, but “fine print” should be rare, not the whole footer.

Headings should be clearly larger than body text, creating an obvious visual hierarchy. But don’t rely on size alone to signal a heading: a big bold line of text that isn’t marked up as a real heading is invisible to a screen reader user navigating by headings. (That’s a structure issue as much as a type issue, and it’s worth checking separately.)

Spacing: line height, line length, and letter spacing

Even a great font at a good size becomes a wall of mush if it’s crammed together.

Line height (leading) is the vertical space between lines. Too tight and the eye loses its place jumping from one line to the next. Aim for a line height of at least 1.5 times the font size for body text — this is also part of WCAG’s text-spacing guidance. Most page builders express this as a “line height” or “line spacing” number; setting it to 1.5 or 1.6 is a safe target.

Line length is how many characters fit on one line. Extremely wide paragraphs that stretch across a large monitor are tiring — the eye has to track too far back to find the next line. Aim for roughly 50 to 80 characters per line. Most templates handle this with a max-width on the content area; if your paragraphs run edge to edge on a wide screen, that’s worth constraining.

Letter and word spacing. Default spacing is usually fine. The thing to avoid is squeezing letters together (negative letter-spacing) to make a headline fit — that hurts readability. WCAG also asks that your text survive when a user increases spacing themselves: someone with dyslexia might apply a browser setting or extension that bumps letter, word, and line spacing up. If your layout breaks, clips text, or hides content when that happens, that’s a failure. The fix is almost always to avoid fixed-height boxes that can’t grow with their text.

The zoom and reflow test

Here’s a check you can do in two minutes that catches a surprising number of problems. Open your site and zoom your browser to 200% (Cmd/Ctrl and the plus key, four or five times). Then look:

  • Is all the text still there, or did some of it get cut off or hidden?
  • Can you still read everything without scrolling sideways? (Horizontal scrolling to read a paragraph is a real WCAG failure called “reflow.”)
  • Do buttons and menus still work, or did they overlap and become unusable?

People with low vision routinely browse at 200% or higher. If your site falls apart at that zoom, it’s failing them — and it’s failing the standard. Most modern, responsive templates handle this well; the sites that break are usually the ones with text locked into fixed-size boxes or absolute positioning. If yours breaks, that’s the signal to loosen those constraints rather than chase individual fonts.

Don’t forget contrast

Typography and colour are inseparable. The most readable font in the world is useless as pale grey text on a white background. WCAG requires normal-size text to have a contrast ratio of at least 4.5:1 against its background, and large text (roughly 24px, or 18.5px bold) at least 3:1.

The trendy look of light-grey body text — #999 or #aaa on white — almost always fails. So does text placed over a busy photo, where it might be readable over the dark part of the image and invisible over the light part. A free contrast checker will tell you in seconds whether your text and background pass. This pairs directly with the font work: choose the typeface, set the size, then confirm the colour combination actually clears the bar.

What about dyslexia-specific fonts?

You may have heard about fonts marketed specifically for dyslexia, like OpenDyslexic. The honest answer is that the research is mixed — there’s no strong, consistent evidence that these specialised fonts outperform plain, well-designed, readable fonts for most readers, and some people find them distracting. You don’t need a special font to be accessible.

What genuinely helps a wide range of readers, including people with dyslexia, is more boring than a magic typeface: a clean readable font, adequate size, generous line height, left-aligned text (avoid justified text, which creates uneven “rivers” of white space), and short paragraphs. If you want to offer a dyslexia-friendly font as an option a reader can switch on, that’s a nice touch — but get the fundamentals right first.

A quick typography checklist

Run through this on your own site:

  • Body text is at least 16px.
  • The body font has distinct letters — check “Il1” and “rn/m”.
  • Line height for paragraphs is around 1.5.
  • Paragraphs aren’t absurdly wide on large screens (roughly 50-80 characters).
  • Text is left-aligned, not justified, for long passages.
  • Nothing important is an image of text.
  • Text and background contrast passes 4.5:1 (3:1 for large text).
  • At 200% browser zoom, nothing is cut off and there’s no sideways scrolling.
  • The layout survives if a reader increases their own text spacing.

If you can tick all of those, your typography is in good shape — not because it’s fashionable, but because more people can actually read it.

The bottom line

Accessible typography isn’t a design speciality reserved for experts. It’s a short list of concrete choices: a readable font, a sensible size, enough breathing room, and text that bends instead of breaking when someone needs it bigger. Each of those is checkable in a couple of minutes, and most are adjustable in the same settings where you already manage your site’s look. Get them right and you’re not just ticking WCAG boxes — you’re keeping the visitors who would otherwise have squinted, given up, and left.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.