Scale Generator

Accessibility in Typography

Creating typography that is readable and usable for everyone, including people with visual impairments, cognitive disabilities, and other accessibility needs.

Why Typography Accessibility Matters

Accessible typography is not just a legal requirement in many jurisdictions—it's a fundamental aspect of inclusive design that ensures your content can be read and understood by the widest possible audience.

According to the World Health Organization, at least 2.2 billion people worldwide have a vision impairment. Additionally, conditions like dyslexia affect up to 20% of the population. When typography is inaccessible, these users may:

  • Struggle to read your content
  • Experience eye strain or fatigue
  • Miss important information
  • Leave your website entirely

Accessible typography benefits everyone, not just users with disabilities. The same principles that make text readable for someone with low vision also make it more comfortable for someone reading on a mobile device in bright sunlight.

WCAG Guidelines for Typography

The Web Content Accessibility Guidelines (WCAG) provide specific criteria for accessible typography:

1. Text Size and Scaling (WCAG 1.4.4)

Text must be resizable up to 200% without loss of content or functionality. This means:

  • Use relative units (em, rem, %) instead of fixed units (px)
  • Ensure containers can expand to accommodate larger text
  • Test your design with text zoomed to 200%
/* Recommended */
body {
  font-size: 100%; /* Default browser size, typically 16px */
}

h1 {
  font-size: 2rem; /* Relative to root font size */
}

p {
  font-size: 1rem;
  line-height: 1.5;
}

2. Color Contrast (WCAG 1.4.3)

Text must have sufficient contrast against its background:

  • Normal text (under 18pt or 14pt bold): Minimum contrast ratio of 4.5:1
  • Large text (18pt+ or 14pt+ bold): Minimum contrast ratio of 3:1

Use tools like the WebAIM Contrast Checker to verify your color combinations.

3. Text Spacing (WCAG 1.4.12)

Users must be able to adjust text spacing without breaking layout:

  • Line height (line spacing) at least 1.5 times the font size
  • Spacing after paragraphs at least 2 times the font size
  • Letter spacing (tracking) at least 0.12 times the font size
  • Word spacing at least 0.16 times the font size
p {
  line-height: 1.5;
  margin-bottom: 2em;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

Font Selection for Accessibility

1. Font Readability

Choose fonts with these characteristics for better readability:

  • Adequate x-height: Taller lowercase letters are generally more readable
  • Open counters: The enclosed spaces in letters like 'e', 'a', and 'o' should be clearly defined
  • Distinct letterforms: Letters should be easily distinguishable (e.g., 'I', 'l', and '1' should look different)
  • Consistent stroke width: Extreme variations in thickness can reduce readability

2. Sans-serif vs. Serif

Both sans-serif and serif fonts can be accessible:

  • Sans-serif fonts (like Arial, Verdana, Inter) are often recommended for digital displays
  • Serif fonts with moderate contrast can work well for longer text if they have good readability characteristics

The most important factor is not the presence or absence of serifs, but the overall readability of the specific font.

3. Dyslexia-Friendly Fonts

Some fonts are designed specifically for readers with dyslexia:

  • OpenDyslexic
  • Dyslexie
  • Lexie Readable

However, research on their effectiveness is mixed. Many dyslexic readers benefit just as much from standard readable fonts like Arial, Verdana, or Helvetica with appropriate spacing.

Typography Size and Scale

1. Minimum Text Size

For body text, aim for:

  • At least 16px (1rem) for body text
  • Larger sizes (18-20px) for improved readability, especially for older users
  • No text smaller than 12px, even for footnotes or captions

2. Accessible Type Scale

When creating a type scale:

  • Ensure sufficient size differentiation between hierarchy levels
  • Consider using a more conservative scale ratio (like 1.2 or 1.25) for better readability
  • Test your scale with users who have visual impairments

The TypeScale Generator can help you create a harmonious and accessible type scale.

Layout and Spacing

1. Line Length

Optimal line length improves readability:

  • Aim for 50-75 characters per line (including spaces)
  • Too long: Difficult to track from the end of one line to the beginning of the next
  • Too short: Creates excessive eye movement and breaks reading rhythm
p {
  max-width: 70ch; /* Limits width to approximately 70 characters */
}

2. Line Spacing (Leading)

Adequate space between lines improves readability:

  • Minimum line-height of 1.5 for body text
  • Larger line spacing benefits users with dyslexia and cognitive disabilities
  • Headings may use slightly tighter line spacing (1.2-1.3)

3. Paragraph Spacing

Clear separation between paragraphs helps users track their position:

  • Use margins of at least 1.5 times the font size between paragraphs
  • Avoid using only indentation to separate paragraphs

Text Formatting and Alignment

1. Text Alignment

Alignment affects readability:

  • Left-aligned text is most readable for left-to-right languages
  • Right-aligned text for right-to-left languages
  • Justified text can create uneven spacing and "rivers" of white space, making text harder to read
  • Centered text should be used sparingly, mainly for short headings

2. All Caps and Italics

Use formatting judiciously:

  • Avoid extended passages of ALL CAPS text (reduces word shape recognition)
  • Use italics sparingly (can be difficult for dyslexic readers)
  • Never use these formatting options as the only way to convey information

3. Underlines

Be careful with underlines:

  • Reserve underlines primarily for links
  • Underlined text can obscure descenders (the parts of letters that extend below the baseline)
  • If you need emphasis, consider bold text instead

Responsive Typography

1. Fluid Typography

Adapt typography to different screen sizes:

/* Basic fluid typography using clamp() */
:root {
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
}

body {
  font-size: var(--font-size-base);
}

h1 {
  font-size: calc(var(--font-size-base) * 2.5);
}

2. Viewport Considerations

Ensure text remains readable on all devices:

  • Avoid font sizes that are too small on mobile devices
  • Test your typography on various screen sizes and orientations
  • Consider increasing the size ratio between headings and body text on larger screens

Testing Typography Accessibility

1. Automated Testing

Use tools to identify basic issues:

  • WAVE - Web Accessibility Evaluation Tool
  • axe DevTools - Browser extension for accessibility testing
  • Lighthouse in Chrome DevTools

2. Manual Testing

Supplement automated tests with manual checks:

  • Zoom text to 200% and verify readability
  • Test with screen readers (VoiceOver, NVDA, JAWS)
  • Navigate using only a keyboard
  • Test with high contrast mode enabled

3. User Testing

The most valuable feedback comes from real users:

  • Include people with various disabilities in your user testing
  • Consider working with accessibility consultants
  • Gather feedback from users who use assistive technologies

Accessible Typography Checklist

  • ✓ Body text is at least 16px (1rem)
  • ✓ Text has sufficient color contrast (4.5:1 for normal text, 3:1 for large text)
  • ✓ Line height is at least 1.5 for body text
  • ✓ Line length is limited to 50-75 characters
  • ✓ Font is readable with distinct letterforms
  • ✓ Text can be resized up to 200% without loss of content
  • ✓ Headings use proper HTML hierarchy (H1-H6)
  • ✓ Text spacing can be adjusted without breaking layout
  • ✓ Typography is responsive across different devices
  • ✓ No information is conveyed through color alone

Further Resources