Blog · Typography
Variable fonts and dyslexia: tuning weight and width to taste
For most of the history of digital type, a "font" was a frozen artefact - one fixed weight, one fixed width, one fixed everything. If Regular felt too thin and Bold felt too heavy, your only option was to live with one or the other. Variable fonts broke that constraint. They ship a continuous range of weights, widths and other parameters inside a single file, and on a modern browser you can move along those ranges with one CSS property. For dyslexic readers, that small technical change matters more than it sounds.
What a variable font actually is
A traditional font family is a set of separate files - Regular, Medium, Semibold, Bold, each a different download. A variable font is one file that contains all of those weights as points along a continuous axis, plus the maths to interpolate every weight in between. Ask the browser for weight 437 instead of 400, and it will draw 437. There is no jump from one preset to the next; the letterforms morph smoothly.
Weight is the best-known axis but it is far from the only one. Modern variable fonts can expose width (narrow to wide), slant or italic angle, optical size (drawn for body text or display), grade (subtle weight changes that do not affect spacing), and a long tail of custom axes that vary by family. Inter exposes a slant axis; Recursive exposes a "monospace" axis that slides between proportional and code-style spacing; Lexend exposes an unusual "deflate" axis that loosens letter spacing as the slider moves.
Why dyslexic readers should care
For most readers, the difference between a 400 and a 500 is aesthetic. For a dyslexic reader, it can be the difference between comfortable and effortful. The point of dyslexia-friendly typography is that small variables compound - weight, spacing, x-height and contrast all affect how cleanly letters separate from each other and from the background, and the best setting for any given reader is genuinely personal.
Before variable fonts, finding your comfort setting meant trying a dozen different font files. With a variable font you can slide along a single axis until something clicks. The eye finds its own answer faster than a decision tree of named weights ever lets it. Combine that with a continuous letter-spacing control (which CSS gave us long ago - see our piece on line spacing and letter spacing for dyslexia) and you can dial in a reading surface that fits you, not a notional average reader.
The short answer: if a fixed-weight dyslexia font feels close but not quite right, a variable font lets you nudge it. The fonts that matter most for dyslexic readers - Lexend, Atkinson Hyperlegible, Inter, Recursive - all ship as variable in 2026, and the major browsers have supported the format for years.
The axes that matter for dyslexia
Weight (wght)
The single most useful axis. The "best" weight for dyslexic body text is usually heavier than the default Regular but lighter than Bold. Numerically, that means somewhere between 450 and 550 - a region most non-variable font families do not ship a file for. With a variable font you can land on 480 if 480 is where your eyes stop straining. Our full piece on font weight and dyslexia walks through why a slightly heavier default helps with low-contrast letterforms.
Width or stretch (wdth)
A narrower letter packs more words per line. A wider letter gives each glyph more horizontal room, which helps when the issue is letter crowding. Few traditional families ship narrow and wide variants of every weight; a variable font with a width axis gives you the whole grid. Roboto Flex and Recursive both expose width as a separate axis, and on a phone screen a slightly narrower setting can keep line length sane without forcing a font change.
Optical size (opsz)
Quietly the most under-appreciated axis for accessibility. Optical sizing is the old print-typography idea that a font drawn for 8pt body text needs sturdier strokes, more open counters and looser spacing than a font drawn for a 72pt headline. A single variable font with an optical size axis automatically adjusts those proportions to the size you ask for. For dyslexic readers reading at very small sizes - long PDFs, dense web tables, the comment thread under a long article - opsz keeps the letterforms readable instead of collapsing to thin scratches.
Grade (GRAD)
A subtle axis that thickens or thins the strokes without changing the metrics. Useful when you want the slightly heavier look of a 500-weight without reflowing the page. Google's Roboto Flex and Material Symbols expose grade; it is the cleanest way to add visual weight on dark backgrounds (where letters tend to look thinner) without breaking layout.
Slant or italic (slnt, ital)
Italics are usually bad for dyslexic readers - the slant adds another rotation cue on top of the letter-rotation problem some readers already struggle with. A variable font with a continuous slant axis at least lets you back off the angle by a few degrees instead of choosing between upright and full italic, which can rescue a quoted block or a caption.
Three variable fonts worth knowing
Lexend Variable
The hyper-legibility family designed by Bonnie Shaver-Troup and Thomas Jockin. The variable file exposes weight from 100 to 900. A common dyslexia comfort point is 500 to 550 - a touch heavier than the default 400 most websites use. See our Lexend in Chrome guide for the install workflow.
Atkinson Hyperlegible Variable
Released by the Braille Institute in 2020, with a variable build that landed in 2024. Designed specifically to disambiguate similar letterforms - the lowercase l and uppercase I, the zero and the capital O. Variable weight from 200 to 900 plus an italic axis. Comfort point for body text is usually around 440 to 480. Compare it with Lexend in our head-to-head piece.
Inter Variable
Not marketed as a dyslexia font, but its open counters, large x-height and continuous weight and slant axes make it a strong neutral choice for readers who find OpenDyslexic too quirky. It is the default UI font for a lot of modern apps for a reason.
How to use a variable font on the web you read
You do not need to be a developer to benefit. The browser supports variable fonts everywhere; you only need a way to apply one and tune it.
The CSS way (for people who build sites)
Load the variable font file with @font-face, then set font-variation-settings or simply font-weight with a non-standard value. Modern syntax accepts font-weight: 525 directly. If you build sites, this is also the right way to ship a dyslexia-friendly default - see our web design checklist for the broader stack.
The extension way (for everyone else)
Install a font-override extension that supports variable fonts and apply the family you want across every site. LexiFont ships variable builds of Lexend, Atkinson Hyperlegible, Inter and OpenDyslexic Mono on the Pro tier, with a weight slider that hands you the continuous range instead of locked presets. You pick once, the setting follows you everywhere. The free tier still gives you the named weights, which is enough for most readers; the slider matters when "close but not quite" is what you keep landing on.
Reader-mode shortcut
If you only need variable-font reading for one long article, Reader Mode in Firefox and Edge applies your chosen font to a stripped-down version of the page, and both honour variable weight values. It is a one-tab solution, not a system one, but it is free and instant. The trade-offs against a full font-override extension are spelled out in reader mode vs reading extensions for dyslexia.
Finding your comfort point
The process is faster than it looks. Open a long article in a font-override extension that exposes the variable axis. Start the weight slider at 400. Read for one paragraph. Move it to 450. Read another. Keep going in 25-unit jumps until the page starts to feel too heavy - then back off one notch. That is your comfort weight.
Do the same for letter spacing if your tool exposes it (typical comfortable range for dyslexic readers is +0.03em to +0.06em). And the same for size: most adults sit somewhere between 18 and 22 pixels for body text, with a sharp drop in comfort below 16. Our font size piece has the full distribution.
Write the three numbers down. Weight, letter-spacing, size. That is your personal setting, and once you have it you can stop fiddling.
The honest limits
Variable fonts are not magic. A variable file does not let you slide a typeface from "Times New Roman" to "OpenDyslexic" - the axes only morph within whatever the designer drew. If the underlying letterforms are not built for dyslexia, no amount of weight tuning will fix that. The right move is to pick a typeface that targets your problem (letter rotation, line tracking, low contrast) and then use the variable axes to fine-tune within it.
Variable fonts also cannot fix bad CSS. If a site forces tiny line height or pours text into a 9pt sidebar, no weight slider will rescue it. The fix there is a font-override extension that also normalises spacing, not the font format. See change the font on any website in Chrome for the full toolset.
And on very old browsers (pre-2018 Safari, very old Edge) variable axes silently fall back to the nearest fixed weight. If you have not updated in five years, you will still get a sensible default; you just will not get the slider.