Related Snippets

91 in Buttons category
45–50 of 60
Dyslexia-Friendly Reading Mode

Dyslexia-Friendly Reading Mode

Text-to-Speech Button

Text-to-Speech Button

High Contrast Mode Toggle

High Contrast Mode Toggle

AI Voice Input Button

AI Voice Input Button

Lottie Hover Icon Button

Lottie Hover Icon Button

Share Menu with Copy Link and Social Options

Share Menu with Copy Link and Social Options

Dyslexia Font Toggle — Free Accessible Reading Mode Snippet

Dyslexia-Friendly Reading Mode · Buttons · Plain HTML, CSS & JS · Live preview

CategoryButtons
TagsAccessibilityMicro-Interactions

What's included

Features

Four free legible fonts
Verdana, Atkinson Hyperlegible, Lexend and OpenDyslexic, with live "Aa" previews.
Spacing presets
Normal, Comfortable and Extra letter and word spacing.
Line-height slider
Any value from 1.4 to 2.6, shown next to the label.
Background tints
None, cream, blue, peach and grey, with soft near-black text.
Ruler snaps to real lines
Measured with Range.getClientRects(), re-measured when fonts or spacing change.
Mouse, touch and keyboard ruler
Hover, tap or drag, or use the arrow keys, Home and End.
Focus mask mode
Dims everything except the current line with a single box-shadow.
Saved preferences
Stored in localStorage, with a safe fallback when storage is blocked.
CSS custom properties
Five variables drive the whole mode, so it is easy to reuse on any site.
Accessible controls
aria-pressed, aria-expanded, real radio buttons, focus rings and reduced-motion support.

About this UI Snippet

Dyslexia-Friendly Reading Mode — Free Fonts, Spacing, Tints and a Reading Ruler

Screenshot of the Dyslexia-Friendly Reading Mode snippet rendered live

A dyslexia-friendly reading mode gives readers control over how text looks: which font it uses, how much space sits between letters, words and lines, the colour of the page behind it, and a ruler that keeps the eye on one line. This snippet packs all of that into one small, dependency-free widget: a Reading mode switch, a Preferences panel, and an article that changes instantly, with every choice saved in the browser for the next visit.

Four free fonts, honestly framed

The font picker offers Verdana (built into every computer), Atkinson Hyperlegible (designed by the Braille Institute so similar letters such as I, l and 1 are easy to tell apart), Lexend (wide, evenly spaced letterforms) and OpenDyslexic (heavier letter bottoms that some readers find helpful). All are free. The research on whether any single typeface helps people with dyslexia is mixed, so the snippet doesn't claim a "cure": it lets each reader pick what works for them. Atkinson Hyperlegible and Lexend load from Google Fonts, OpenDyslexic from a pinned Fontsource package.

Spacing, line height and tinted backgrounds

Spacing has more consistent support in the research. Three presets (Normal, Comfortable and Extra) widen letter-spacing and word-spacing to reduce crowding between letters, and a slider sets line-height from 1.4 to 2.6 so the eye finds the next line more easily. Five background tints (none, cream, blue, peach and grey) follow the common advice in the British Dyslexia Association's style guide to avoid pure white behind text, and the text colour is a soft near-black rather than #000. Everything is driven by CSS custom properties (--rm-font, --rm-letter, --rm-word, --rm-line, --rm-tint), so the whole mode is one class and five variables you can reuse anywhere.

A reading ruler that works for everyone

Most reading rulers follow the mouse, which leaves out phones, tablets and keyboard users. This one measures the real lines of text with Range.getClientRects() and snaps to them, so the band always sits exactly on a line, even after you change the font or spacing. Hover with a mouse, tap or drag on a touch screen, or focus the article and use the up and down arrow keys (Home and End jump to the first and last line). Choose Line highlight for a tinted band, or Focus mask to dim everything except the current line, the effect many paid reading tools use. The ruler has pointer-events: none, so it never blocks clicks or text selection.

Accessible and respectful by default

The switch exposes aria-pressed, the Preferences button uses aria-expanded, every option is a real radio button or range input with visible focus rings, and animations turn off for users who prefer reduced motion. Preferences are saved to localStorage with a safe fallback when storage is blocked, and Reset to defaults clears them.

Pair it with a text size adjuster to scale type, a reading mode toggle that strips a page down to its content, a high-contrast mode toggle for colour, or a text-to-speech button as an audio alternative. It complements, but doesn't replace, screen readers and dedicated assistive technology.

Step by step

How to Use

  1. 1
    Turn on Reading modeClick the switch. The article changes to Atkinson Hyperlegible, comfortable spacing, a taller line height and a cream background.
  2. 2
    Pick a fontTry Verdana, Atkinson Hyperlegible, Lexend or OpenDyslexic. Each card previews the font, and the article updates instantly.
  3. 3
    Adjust spacing and line heightChoose Normal, Comfortable or Extra spacing, then drag the line-height slider until the text feels easy to follow.
  4. 4
    Choose a background tintSwitch between none, cream, blue, peach and grey to find the colour that is most comfortable to read on.
  5. 5
    Turn on the reading rulerPick Line highlight or Focus mask, then hover, tap a line, or focus the article and press the up and down arrow keys.
  6. 6
    Reload the pageYour choices are saved in the browser and come back automatically. Click "Reset to defaults" to clear them.

Real-world uses

Common Use Cases

Long-form articles and blogs
Let readers switch to a more legible font, wider spacing and a tinted background on long posts, and keep their choice on every page they read next.
Accessibility settings panels
Drop the Preferences panel into a site-wide accessibility menu next to a text size adjuster and a high-contrast toggle.
Education and e-learning
Give students control over font, spacing and colour, and a keyboard-friendly reading ruler that helps them follow one line at a time through lessons and quizzes.
Documentation and help centres
Make dense technical pages easier to scan by letting readers widen spacing and dim everything except the line they are reading with the focus mask.
News and publishing sites
Offer it as a reading preference beside a dark mode toggle, or pair it with a text to speech button for audio-supported reading.
Related: Icon Toolbar — Roving Tabindex Keyboard Navigation
See the Icon Toolbar — Roving Tabindex Keyboard Navigation for a related buttons pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

There is no single best font. Studies on typefaces made for dyslexia, including OpenDyslexic, show mixed results, while clear sans-serif fonts with distinct letter shapes, such as Atkinson Hyperlegible, Lexend and Verdana, are widely recommended. That is why this snippet offers several free fonts and lets each reader choose, instead of forcing one.

Yes. OpenDyslexic is released under the SIL Open Font License, so you can use and embed it for free, including commercially. The snippet loads it from a pinned Fontsource package on jsDelivr; you can also self-host the font files.

Comfortable sets letter-spacing to 0.035em and word-spacing to 0.16em; Extra sets 0.08em and 0.32em. Line height is set separately with the slider. Wider spacing reduces crowding between letters and words, which is one of the more consistently helpful changes for many readers.

It walks the article's text nodes, calls Range.getClientRects() to get every rendered line box, and merges boxes on the same line. The ruler then snaps to the nearest line for the pointer, a tap or the arrow keys, and re-measures whenever fonts load or the spacing changes.

Yes. Every change is stored in localStorage under one key and restored on the next visit. If storage is blocked, for example in some private windows, the widget still works and simply doesn't remember the settings.

No. It is a lightweight reading preference that helps many readers, with or without a diagnosed reading difference. Offer it alongside, not instead of, screen readers, text-to-speech and other assistive tools.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain how the reading ruler measures real text lines with Range.getClientRects() and merges line boxes, and why it re-measures after fonts load and spacing transitions finish. It is a good way to understand the trade-offs before reusing it on long pages. You can also ask the assistant to apply the preferences site-wide by moving the custom properties to the html element, to sync the saved settings to a user account, or to add a font-size control and a dark tint. Ask it to review the copy about dyslexia fonts too, so your product describes the research honestly instead of promising a cure.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a dyslexia-friendly "reading mode" widget in plain HTML, CSS, and JavaScript with no dependencies.

Requirements:
- A "Reading mode" switch button with aria-pressed, and a "Preferences" button with aria-expanded that shows or hides a preferences panel.
- Preferences: a font picker (Verdana, Atkinson Hyperlegible and Lexend from Google Fonts, OpenDyslexic from a pinned Fontsource CDN URL) shown as radio cards with an "Aa" preview; spacing presets Normal / Comfortable / Extra that change letter-spacing and word-spacing; a line-height range slider from 1.4 to 2.6 with a live value; background tints none, cream, blue, peach and grey; and a reading ruler mode Off / Line highlight / Focus mask.
- Drive the whole mode with CSS custom properties on a wrapper (font, letter spacing, word spacing, line height, tint) and one "is-on" class. Changing any preference turns reading mode on.
- Save preferences to localStorage (wrapped in try/catch) and restore them on load, with a "Reset to defaults" button.
- The reading ruler must snap to real rendered lines: measure them with Range.getClientRects() over the article's text nodes, merge boxes on the same line, and re-measure on resize, after fonts load, and after spacing changes.
- The ruler must work with a mouse (hover), touch and pen (tap or drag) and the keyboard (focusable article region; ArrowUp/ArrowDown move one line, Home/End jump), batch pointer updates with requestAnimationFrame, and use pointer-events: none.
- Focus mask mode dims everything except the current line using a large box-shadow, clipped to the article card.
- Use real radio buttons and visible focus rings, and disable transitions under prefers-reduced-motion. Don't claim any font cures dyslexia.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

<div class="rm" id="rm">
  <div class="rm-bar">
    <button type="button" class="rm-switch" id="rmSwitch" aria-pressed="false">
      <span class="rm-switch-track" aria-hidden="true"><span class="rm-switch-thumb"></span></span>
      Reading mode
    </button>
    <button type="button" class="rm-prefs-btn" id="rmPrefsBtn" aria-expanded="true" aria-controls="rmPanel">
      <span aria-hidden="true">&#9881;</span> Preferences
    </button>
  </div>

  <form class="rm-panel" id="rmPanel" aria-label="Reading preferences">
    <fieldset class="rm-group">
      <legend>Font</legend>
      <div class="rm-fonts">
        <label class="rm-font"><input type="radio" name="font" value="verdana"><span class="rm-font-card"><span class="rm-aa" style="font-family:Verdana,Tahoma,sans-serif">Aa</span>Verdana<small>Built in</small></span></label>
        <label class="rm-font"><input type="radio" name="font" value="atkinson"><span class="rm-font-card"><span class="rm-aa" style="font-family:'Atkinson Hyperlegible',sans-serif">Aa</span>Atkinson<small>Hyperlegible</small></span></label>
        <label class="rm-font"><input type="radio" name="font" value="lexend"><span class="rm-font-card"><span class="rm-aa" style="font-family:'Lexend',sans-serif">Aa</span>Lexend<small>Wide, even</small></span></label>
        <label class="rm-font"><input type="radio" name="font" value="opendyslexic"><span class="rm-font-card"><span class="rm-aa" style="font-family:'OpenDyslexic',sans-serif">Aa</span>OpenDyslexic<small>Weighted base</small></span></label>
      </div>
    </fieldset>

    <fieldset class="rm-group">
      <legend>Letter &amp; word spacing</legend>
      <div class="rm-seg">
        <label><input type="radio" name="spacing" value="off"><span>Normal</span></label>
        <label><input type="radio" name="spacing" value="comfortable"><span>Comfortable</span></label>
        <label><input type="radio" name="spacing" value="extra"><span>Extra</span></label>
      </div>
    </fieldset>

    <div class="rm-group">
      <label class="rm-legend" for="rmLine">Line height <output id="rmLineOut" for="rmLine">1.9</output></label>
      <input type="range" id="rmLine" name="line" min="1.4" max="2.6" step="0.1" value="1.9">
    </div>

    <fieldset class="rm-group">
      <legend>Background tint</legend>
      <div class="rm-tints">
        <label><input type="radio" name="tint" value="none"><span class="rm-tint" style="background:#fffef9">None</span></label>
        <label><input type="radio" name="tint" value="cream"><span class="rm-tint" style="background:#fbf3df">Cream</span></label>
        <label><input type="radio" name="tint" value="blue"><span class="rm-tint" style="background:#e3eef9">Blue</span></label>
        <label><input type="radio" name="tint" value="peach"><span class="rm-tint" style="background:#fde6d6">Peach</span></label>
        <label><input type="radio" name="tint" value="grey"><span class="rm-tint" style="background:#ebebe8">Grey</span></label>
      </div>
    </fieldset>

    <fieldset class="rm-group">
      <legend>Reading ruler</legend>
      <div class="rm-seg">
        <label><input type="radio" name="ruler" value="off"><span>Off</span></label>
        <label><input type="radio" name="ruler" value="line"><span>Line highlight</span></label>
        <label><input type="radio" name="ruler" value="focus"><span>Focus mask</span></label>
      </div>
      <p class="rm-hint">Move the pointer or tap a line. With the article focused, use &uarr; &darr; to move line by line.</p>
    </fieldset>

    <button type="button" class="rm-reset" id="rmReset">Reset to defaults</button>
  </form>

  <div class="rm-stage" id="rmStage" tabindex="0" role="region" aria-label="Article. When the reading ruler is on, use the up and down arrow keys to move it line by line.">
    <article class="rm-text" id="rmText">
      <h2>Why Maps Lie a Little</h2>
      <p>Every map is a small act of persuasion. Flatten a round planet onto a rectangle and something always has to give: distance, direction, or the true size of a continent. Cartographers choose their compromise on purpose, and that choice quietly shapes how we picture the world before we ever leave the room.</p>
      <p>Mercator's projection, drawn in 1569 for sailors who needed straight compass lines, made Greenland look roughly the size of Africa. In reality Africa is about fourteen times larger. The distortion wasn't a mistake. It was the price of a map that ships could actually steer by, and centuries later it still hangs on classroom walls.</p>
    </article>
    <div class="rm-ruler" id="rmRuler" hidden></div>
  </div>
</div>