Accessible Font Stack for Dyslexia & Low Vision

Accessible Font Stack

Accessibility in typography goes beyond colour contrast. Font choice, fallback order, and CSS properties all affect how easily people with visual or cognitive impairments can read your content.

The Declaration

font-family: "Atkinson Hyperlegible", "Lexie Readable",
  Verdana, Tahoma, "Trebuchet MS", Arial, sans-serif;

Why These Fonts?

Font	Why It's Accessible
Atkinson Hyperlegible	Designed by the Braille Institute; exaggerates letter differences (e.g., 1, l, I are clearly distinct)
Lexie Readable	Open-source font optimised for dyslexia, with weighted bottoms and varied ascenders
Verdana	Web-safe, large x-height, wide letter-spacing, highly readable at small sizes
Tahoma	Similar to Verdana but slightly tighter, good for UI elements
Trebuchet MS	Humanist design with distinctive letter shapes
Arial	Universal fallback

CSS Enhancements for Accessibility

Beyond the font stack, apply these properties:

body {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif;
  font-size: 1rem;         /* Minimum 16px */
  line-height: 1.7;        /* WCAG recommends >= 1.5 */
  letter-spacing: 0.05em;  /* Slight spacing aids readability */
  word-spacing: 0.1em;     /* Helps word boundary detection */
  max-width: 70ch;         /* Limit line length */
}

WCAG 2.2 Text Spacing Requirements

WCAG Success Criterion 1.4.12 requires that users can override:

• Line-height to at least 1.5x the font size
• Paragraph spacing to at least 2x the font size
• Letter-spacing to 0.12em
• Word-spacing to 0.16em

Your layout must not break when these overrides are applied.

Font Size Minimum

Never set body text below 16px (1rem). Many users with low vision rely on browser zoom, and small base sizes make zoom less effective.