How to make a dyslexia friendly website in WordPress
In this article: This guide explains how to make a dyslexia friendly website in WordPress by adjusting fonts, font sizes, letter spacing, and adding reading guides. It is written for WordPress site owners and content publishers who want to support visitors with dyslexia, ADHD, or other reading difficulties. You will finish with a clear set of changes you can make today — no developer required.
Around 1 in 5 people worldwide have dyslexia. Many more experience reading difficulties related to ADHD, anxiety, or cognitive processing differences. When someone with dyslexia visits your WordPress site and finds dense text in a small serif font with tight line spacing, they are very likely to leave — not because your content is poor, but because reading it is physically exhausting.
Making a dyslexia friendly website in WordPress does not mean rebuilding your design from scratch. It means giving visitors the tools to read on their own terms: a readable font, controllable text size, comfortable spacing, and a guide that helps them track lines of text. This article walks you through each of these adjustments and how to apply them.
Why readability matters for cognitive accessibility
Cognitive accessibility refers to design choices that reduce the mental effort required to read, understand, and navigate a website. Dyslexia is one of the most common reasons people struggle with on-screen text, but it is not the only one. People with ADHD, visual stress, traumatic brain injuries, or even temporary fatigue can benefit from the same improvements.
The Web Content Accessibility Guidelines (WCAG) address readability through several success criteria, including WCAG 1.4.8 Visual Presentation (which covers text spacing and line length) and WCAG 1.4.12 Text Spacing (which requires that content does not break when users adjust letter, word, or line spacing). Meeting these criteria helps everyone — and it is increasingly expected under regulations like the European Accessibility Act.
Choose a dyslexia friendly font in WordPress
Font choice has a significant impact on how easily someone with dyslexia can read your content. Letters that mirror each other — b and d, p and q — are especially difficult because dyslexia often affects how the brain distinguishes letter orientation.
Dyslexia friendly fonts share a few characteristics:
- Each letter has a distinctive shape that is difficult to mirror or rotate
- Letterforms are open and spacious rather than condensed
- Characters like
l,I, and1are visually distinct from each other
Fonts that perform well for dyslexic readers include OpenDyslexic (designed specifically for the condition), Lexie Readable, and mainstream fonts like Arial, Verdana, and Trebuchet MS. Heavily decorative serif fonts — think Times New Roman or ornate script styles — tend to perform poorly.
In WordPress, you can load an accessible Google Font (such as Lexend, which was designed with readability research behind it) through your theme’s customiser, a plugin like Use Any Font, or directly in your theme’s stylesheet. What matters more than the specific font, however, is giving users the choice to switch to one that works for them. Not every dyslexic reader prefers the same typeface.
If you are loading a dyslexia-specific font like OpenDyslexic, offer it as an opt-in toggle rather than making it your site's default. Many dyslexic readers have their own preferred fonts set up at the operating system level and may find a forced switch disorienting.
Add font size controls for better font size accessibility in WordPress
Small text is one of the most common barriers for readers with visual stress or cognitive differences. WCAG recommends a minimum body text size of 16px, but that is a floor — not a target. Many users need larger text to read comfortably, and they should not have to dig into their browser settings to get it.
Font size controls let visitors increase or decrease text size directly on your site, without affecting any other tab or browser-wide setting. This is especially valuable for users on shared devices or those who are not confident adjusting system-level settings.
When implementing font size accessibility in WordPress, keep these principles in mind:
- Use relative units (
remorem) in your CSS rather than fixed pixel values, so that user adjustments scale correctly - Make the controls visible and easy to find — near the top of the page or in a persistent accessibility menu
- Preserve the user’s preference across pages using
localStorage, so they do not have to reset it on every click - Test that increasing the font size does not break your layout (horizontal scrolling at 200% zoom is a WCAG failure under 1.4.4 Resize Text)
AccessYes includes built-in font size controls as part of its accessibility widget. Visitors can increase or decrease text size in steps, and the setting persists as they browse your site.
Adjust letter spacing, word spacing, and line height
Even with a readable font and a comfortable text size, tightly packed text is difficult for dyslexic readers. Letters bleed into each other. Lines merge. The eye loses its place.
The WCAG 1.4.12 Text Spacing criterion sets minimum thresholds that content must survive when users apply custom spacing:
- Line height: at least 1.5 times the font size
- Letter spacing: at least 0.12 times the font size
- Word spacing: at least 0.16 times the font size
Your site needs to support these values without breaking — but you can go further by building better defaults into your stylesheet and offering spacing controls in your accessibility widget.
Recommended starting values for body text:
| Property | Recommended value |
|---|---|
line-height | 1.6–1.8 |
letter-spacing | 0.05em–0.12em |
word-spacing | 0.1em–0.16em |
max-width (line length) | 60–75 characters |
Line length is easy to overlook. Very long lines force the eye to travel a long distance and then find the correct starting point on the next line — a task that is disproportionately difficult for dyslexic readers. Constraining your content column to around 65–70 characters per line is one of the highest-impact readable website design decisions you can make.
These spacing values apply to body text. Headings and UI elements like buttons may use tighter spacing and still be readable, because they are read in short bursts rather than sustained runs.
Use a reading guide to help users track lines of text
A reading guide (sometimes called a reading mask or focus ruler) highlights the line of text the user is currently reading and dims everything above and below it. For people with visual stress, ADHD, or dyslexia, this removes the visual noise of surrounding text and makes it much easier to stay on track.
Reading guides are controlled by the user — they toggle them on when needed and off when they do not. Some implementations show a horizontal bar that follows the cursor; others highlight the full line and grey out the rest of the page.
This feature sits firmly in the category of cognitive accessibility WordPress improvements that make a genuine difference for real users but are invisible to everyone who does not need them. It costs your other visitors nothing.
AccessYes includes a built-in reading guide that users can activate from the accessibility widget. No configuration is needed from the site owner.
Put it all together: a readable WordPress site
Making a dyslexia friendly website in WordPress comes down to four practical changes:
- Font: Use a clean, open typeface as your default and allow users to switch to a dyslexia-specific font if they prefer one.
- Font size: Build your stylesheet with relative units and offer on-page font size controls.
- Spacing: Set generous line height, letter spacing, and word spacing as your baseline, and keep line length to around 65 characters.
- Reading guide: Offer a focus tool so users can isolate the line they are reading.
None of these changes require a developer or a redesign. Most can be applied through your theme customiser, a small CSS addition, or an accessibility plugin like AccessYes.
An accessibility widget adds a layer of user-controlled adjustments on top of your site — but it does not fix underlying CSS that breaks at larger text sizes or forces horizontal scrolling. Always test your theme at 200% browser zoom before relying on font size controls.
These changes also benefit people who do not identify as having a disability. Readers in bright sunlight, tired readers at the end of the day, and people reading in a second language all benefit from cleaner, more spacious text. Readable website design is good design.
Next steps
If you are ready to add dyslexia-friendly features to your WordPress site, install AccessYes — it is free, and it brings font controls, spacing adjustments, and a reading guide to your site in a few minutes.
Want to go deeper on cognitive accessibility? Read our guide to writing accessible content for users with cognitive disabilities and our overview of how to meet WCAG text spacing requirements in WordPress.