Designing for Dyslexic Readers

Dyslexia affects an estimated 10–20% of the global population, making it the most common learning disorder worldwide. Its impact on reading, writing, and spelling varies significantly from person to person. While existing standards like the Web Content Accessibility Guidelines (WCAG) already provide a solid foundation—particularly around line length and spacing—there is room to go further with targeted adjustments that make content more accessible to this community.

The research in this area is largely based on English and can be adapted for most European languages using Latin and Cyrillic scripts. Other writing systems may require different approaches.

Choosing the Right Typeface

A common misconception is that purpose-built dyslexia fonts are necessary for accessibility. Research suggests otherwise: standard typefaces such as Helvetica and Times New Roman perform just as well as specialized options like Dyslexie or Open Dyslexic. The key is selecting fonts with on-screen legibility in mind rather than prioritizing style.

However, there is a reason these purpose-built fonts have gained popularity. Their design addresses a phenomenon called "visual crowding," which affects many dyslexic readers. The real advantage of these fonts isn't their letterforms—it's the additional spacing they incorporate.

Spacing as the Primary Lever

Studies consistently identify spacing between letters and words as the most significant factor in supporting dyslexic readers. The preference for Comic Sans in this community, for instance, stems from its generous letter spacing rather than its casual appearance. As designers, we can extend this benefit to any typeface through CSS, avoiding the need for a complete redesign.

The British Dyslexia Association's 2018 style guide offers concrete recommendations:

"Larger inter-letter / character spacing (sometimes called tracking) improves readability, ideally around 35% of the average letter width."
"Inter-word spacing should be at least 3.5 times the inter-letter spacing."

These values can be expressed using the CSS ch unit, which approximates the average character width for proportional fonts. For a typeface with a standard zero glyph, like Overpass, the recommendations translate directly:

.dyslexia-mode {
    letter-spacing: 0.35ch;
    word-spacing: 1.225ch; /* 3.5x letter-spacing */
}

We should also disable ligatures, which merge characters like 'f' and 'i' into a single glyph. While this typically improves legibility, dyslexic readers may struggle to recognize these combined forms as distinct letters—especially with the increased letter spacing making them stand out more. Explicitly disabling them ensures consistent behavior across browsers:

.dyslexia-mode {
    letter-spacing: 0.35ch;
    word-spacing: 1.225ch; /* 3.5x letter-spacing */
    font-variant-ligatures: none; /* explicitly disable ligatures */
}

Adjusting Vertical Rhythm

WCAG recommends a minimum line height of 1.5, with paragraph spacing at least 1.5 times the line spacing. Since we are increasing word spacing, the line height should scale proportionally. A line-height of 2.0 (unitless, as suggested by MDN documentation) works effectively, exceeding the BDA's guidance while remaining compatible with vertical rhythm.

For paragraph separation, a top margin of at least 3em meets WCAG's suggestion. Real-world testing with dyslexic readers may indicate a preference for slightly larger values—one reader found 3.5em more comfortable. When modifying an existing design, it's often wise to apply these spacing changes only to the main content area, as headers and navigation are more sensitive to vertical whitespace adjustments.

.dyslexia-mode main {
   line-height: 2.0;
}

.dyslexia-mode main p {
   margin-top: 3.5em;
}

Refining Typography

The increased whitespace can make fonts appear lighter or lower in contrast. Adjusting the font weight or text color compensates for this effect:

.dyslexia-mode {
  font-weight: 600; /* demi-bold */
}

This may also make bold text (at 700) harder to distinguish from regular text. Options include increasing the weight further or using color and size to differentiate. In some cases, keeping the weight but darkening the color provides sufficient contrast.

.dyslexia-mode strong {
  color: #000;
}

Checking contrast ratios is essential. Aim for at least 4.5:1, matching WCAG 2.1 minimum guidelines. This baseline exists for two reasons: very high contrast can cause a "blur effect" where text appears to swirl for some dyslexic readers, which is why pure black on pure white is discouraged; and many dyslexic readers benefit from larger font sizes.

Research suggests a base size of 18pt, which qualifies as large-scale text under WCAG definitions. This size still meets enhanced contrast guidelines with a 4.5:1 ratio:

.dyslexia-mode {
  font-size: 150%; /* assuming 16px base size, convert to 18pt */
}

An alternative strategy is leaving font size untouched and encouraging browser zoom, which responsive designs typically accommodate well. If your design uses justified text, it should be disabled in dyslexia-friendly mode, as justification alters letter and word spacing.

Minimizing Visual Distractions

Just as increased spacing reduces visual crowding, removing unnecessary decoration helps dyslexic readers focus. Progressive enhancement and mobile-first practices naturally produce leaner designs with fewer distractions, which aligns well with accessibility goals.

Backgrounds should default to solid colors, with decorative enhancements using the :not pseudo-class to exclude the dyslexia-friendly mode. Similarly, purely decorative borders and shadows should be stripped away, leaving only functionally necessary elements:

@media(min-width:700px) { /* only apply on wider screens... */
  body:not(.dyslexia-mode) main { /* ...if not in our friendly mode! */
    background-image: url(https://res.cloudinary.com/jbowtie/image/upload/v1631662164/exclusive_paper_dyitgt.webp);
  }
}

Decorative touches like slightly rotated headings may evoke personality but can produce the visual crowding that hampers reading. Such effects should be removed for dyslexic readers, even if they work well in a mobile context:

.dyslexia-mode h2 {
  border: none; border-bottom: thin grey solid;  /* just keeping the bottom border for this element, to retain some separation */
  max-width: 100%; /* standard width */
  transform: none; /* do not rotate */
  background-color: inherit; /* We no longer look like a label, so we don't require our own background */
  margin-bottom: 1em; padding-left:0; /* some spacing adjustments */
}

Zebra striping for tables and lists presents an interesting case. While the research on its general benefits is mixed, direct feedback from a dyslexic reader specifically requested it. Applying zebra striping to main content areas can aid readability; the same effect can extend to tables with similar CSS patterns:

.dyslexia-mode main li:nth-of-type(odd) {
    background-color: palegoldenrod;
}

As with any inclusive design effort, feedback from real users is critical. Accessibility requirements vary between individuals, and personal testing with dyslexic readers provides the most reliable guidance for refinement.

Making The Mode Optional

With a dyslexia-friendly design in place, the next question is whether it should become the default experience or remain an opt-in feature. For an existing site being retrofitted, a user-activated mode is usually the safer route, since it avoids disrupting the current audience. A brand-new build or a full redesign, however, is an opportunity to reevaluate which of these adjustments can be adopted as the baseline for everyone.

As with any design decision, this is ultimately a trade-off between the needs of different user groups, brand identity, and competing goals like preserving a particular visual mood or keeping content above the fold. There is no universal answer; the right choice depends on the specific product and audience.

Implementing the switch between modes is straightforward: a class on the body element controls the styling. In the example project, a toggle button paired with a bit of JavaScript manages the state, and localStorage remembers the user’s preference across pages and future visits. In a larger application, this preference might be saved to a user profile on the server instead.

    // toggle dyslexia support
    const isPressed = window.localStorage.getItem('dyslexic') === 'true';
    if(isPressed) {
        document.body.classList.add('dyslexia-mode');
    }
    // set the button to pressed if appropriate
    const toggle = document.getElementById('dyslexia-toggle');
    if(isPressed) {
        toggle.setAttribute('aria-pressed', 'true');
    }
    // toggle dyslexia support
    toggle.addEventListener('click', (e) => {
        let pressed = e.target.getAttribute('aria-pressed') === 'true';
        e.target.setAttribute('aria-pressed', String(!pressed));
        document.body.classList.toggle('dyslexia-mode');
        window.localStorage.setItem('dyslexic', String(!pressed));
    });

See the Pen [Dyslexia-friendly mode added](https://codepen.io/smashingmag/pen/dyzwqXm) by John C Barstow.

See the Pen Dyslexia-friendly mode added by John C Barstow.

Beyond This Single Adjustment

The core advantage of CSS is the separation of content from presentation, which makes it practical to adapt an existing design for a specific community without touching the underlying markup or text. Starting from a foundation that already respects established accessibility guidelines, it becomes possible to layer on additional refinements that meaningfully improve reading comfort for people with dyslexia.

The same approach can be extended to other populations whose needs are not fully covered by standard accessibility recommendations. Identifying those gaps and designing targeted solutions is valuable work, and sharing what you learn contributes to the broader practice.

It is worth stressing that the design described here was evaluated with a small, possibly unrepresentative sample. Feedback from readers who have dyslexia — or who work closely with someone who does — is genuinely useful in determining which aspects of this approach are effective and which are not.

Further Reading

Smashing Editorial