Dyslexia-Friendly Web: Fonts, Spacing, and Contrast

Dyslexia is the accessibility topic where the popular fix and the useful fixes are almost completely different things. The popular fix is a special font. You’ve probably seen the ones with weighted bottoms and deliberately irregular letterforms, designed on the theory that distinctive shapes keep letters from flipping and swapping in the reader’s perception. It’s a nice theory, and the fonts are a sincere effort. But when researchers have tested them against ordinary clean typefaces, they’ve generally failed to find that the special fonts make dyslexic readers faster or more accurate, and plenty of dyslexic readers report disliking how they look. Meanwhile the changes that measurably help are so mundane that nobody writes headlines about them. They’re spacing, line length, alignment, and restraint. This essay is about those.

First, it helps to be clear about what dyslexia is, because the folk model is wrong. It isn’t seeing letters backwards. It’s a difference in how the brain processes written language, mostly in mapping symbols to sounds, and it makes decoding text slower and more effortful. Estimates vary, but something like one person in ten is affected to some degree, which means dyslexic visitors are on your website every day. They’re not on the margins of your funnel. They’re in it, reading your pricing page with more effort than you budgeted for. And effort is the operative word. Anything on the page that adds friction for a typical reader adds more for a dyslexic one. Which is the key to everything that follows: you aren’t designing exotic accommodations, you’re removing friction that bothers everyone but defeats some.

Start with the crimes of enthusiasm, the things designers do on purpose. Justified text is the classic. Stretching every line to the same width looks tidy from across the room, but it creates uneven gaps between words, and in bad cases those gaps stack into distracting white channels running down the paragraph. Ragged-right text keeps word spacing constant, which is exactly what a struggling decoder needs. Italics are another: slanted letterforms are measurably harder to distinguish, so italicizing a whole paragraph for emphasis is emphasis achieved by making the text worse. Long stretches of ALL CAPS do something similar by flattening the word shapes readers use to recognize words at a glance; every word becomes a rectangle. Bold, used sparingly, does the emphasizing job without the cost. None of this forbids style. It forbids style applied to body text at paragraph length.

Then the quiet settings almost every site gets wrong by default. Line length: a line of text on a wide monitor with no maximum width can run two hundred characters, and the sweep back to find the start of the next line is where readers lose their place, dyslexic readers most of all. Sixty to eighty characters per line is the comfortable range, and in CSS it’s one line of code to cap a column near that. Line height: browsers default to cramped, and crowded lines interfere with each other; around one and a half times the font size gives each line room to be read alone, which is the neighborhood WCAG points to as well. Font size: sixteen pixels minimum for body text, and err larger. Paragraph length matters more than most typography: a wall of text is a commitment a tired reader won’t make, while the same words in short paragraphs with real space between them get read. White space isn’t the absence of content. It’s what makes content approachable.

Contrast deserves its own paragraph because it cuts in an unexpected direction. Low contrast, pale gray on white, is bad for everyone and worse for anyone straining to decode. But some dyslexic readers also find maximum contrast uncomfortable, reporting that pure black on pure white produces a glare in which the text seems to shimmer. The practical middle path is a very dark gray on a white or slightly off-white background: comfortably past the WCAG contrast thresholds, without the searchlight effect. And critically, don’t lock any of it down. Respect the user’s own settings. Specify sizes in relative units, don’t disable zoom, and make sure the layout survives when someone increases text size or spacing on their end, because readers who need adjustments often make them themselves if the site doesn’t fight back. The most accessible typography is partly just typography that yields.

What I find satisfying about this whole area is that there’s no tradeoff hiding in it. Every change above, ragged-right alignment, moderate line lengths, generous line height, short paragraphs, restrained italics, dark-gray-on-white, makes text objectively easier for readers without dyslexia too. Readability studies and plain experience agree on that. This is the general pattern in accessibility, but nowhere is it purer than in typography: the dyslexic reader is a sensitive instrument that detects friction the average reader also feels but pushes through. Design for the sensitive instrument and everyone reads faster.

It’s also why readability is one of the six areas a GazeSite scan grades, right beside accessibility rather than buried inside it. Cramped line height and hundred-forty-character lines never show up in a bug tracker. The site works. It merely tires people, and tired people leave without telling you why. Fixing that costs a few CSS declarations and some editing discipline. Almost nothing else you can do to a website improves so much for so many at so little cost.