When you think of making a document accessible, you probably think of things like adding alternative text to photos or graphics for screen readers. But accessibility isn't just about screen reader users. It's about ensuring as many people as possible can understand what you're communicating!
Unfortunately, when you're building accessible typography, it can be a bit overwhelming to think of all the elements you have to consider, such as typeface, styling, color contrast, layout, and spacing. However, if you follow the guidelines in this article, you'll be well on your way towards making your design more inclusive – and hopefully reaching your readers on their own terms.
Choosing accessible typefaces
Typeface selection is crucial for accessibility. Sans-serif fonts are generally considered more readable on screens, especially at smaller sizes. However, this doesn't mean you can't use serif fonts – they can work well for headings or large text. The key is to choose fonts with:
- Clear character differentiation – Letters like "I", "l", and "1" should be easily distinguishable from each other
- Open counters – The enclosed spaces in letters like "e" and "a" should be clear
- Adequate x-height – The height of lowercase letters should be proportional to the overall font size
- Consistent stroke weight – Overly thin or thick strokes can be difficult to read
Font size and scaling
Font size is one of the most important factors in accessible typography. The baseline recommendation is:
- Body text: Minimum 16px (1rem) for web content
- Allow text resize: Text should be able to scale up to 200% without loss of content or functionality (WCAG 2.1 Level AA)
- Relative units: Use relative units like rem or em rather than fixed pixel sizes to allow users to adjust text size according to their preferences
Line height and spacing
Proper spacing is essential for readability, especially for users with dyslexia or low vision:
- Line height: Set to at least 1.5 times the font size for body text (WCAG 2.1 Level AA)
- Paragraph spacing: Should be at least 2 times the font size
- Letter spacing: At least 0.12 times the font size
- Word spacing: At least 0.16 times the font size
Color contrast
Color contrast between text and background is critical for users with low vision or color blindness. WCAG 2.1 provides specific contrast ratio requirements:
- Normal text (under 24px or 18px bold): Minimum contrast ratio of 4.5:1 (Level AA) or 7:1 (Level AAA)
- Large text (24px and above or 18px bold and above): Minimum contrast ratio of 3:1 (Level AA) or 4.5:1 (Level AAA)
- Never rely on color alone: Always provide additional visual cues like icons, patterns, or text labels
Line length and column width
The optimal line length for readability is typically between 45-75 characters per line. Lines that are too long make it difficult for readers to track from the end of one line to the beginning of the next. Lines that are too short force the eye to move back and forth too frequently, breaking the reading rhythm.
For multi-column layouts, ensure adequate spacing between columns (at least 2em) and avoid too many columns, which can be overwhelming for users with cognitive disabilities.
Text alignment and justification
Left-aligned text is generally the most accessible for Western languages:
- Avoid full justification: It creates uneven spacing between words ("rivers of white") that can be difficult for users with dyslexia
- Use left alignment: Creates a consistent starting point for each line
- Avoid center alignment for body text: It makes it harder to find the start of each line
Special considerations
All CAPS
Avoid using all caps for more than a few words. All-caps text is harder to read because the uniform letter height reduces the distinctive shapes that help readers recognize words.
Italics
Use italics sparingly. While italics can add emphasis, long passages in italics can be difficult to read, especially on screens.
Underlining
Reserve underlining for links only. Underlining non-link text can confuse users about what is clickable.
Testing your typography
After implementing accessible typography choices, it's essential to test:
- Use contrast checkers: Tools like WebAIM's Contrast Checker or the built-in browser DevTools
- Test with browser zoom: Ensure content remains readable and functional at 200% zoom
- Test with different fonts: Allow users to apply their preferred fonts
- Get real user feedback: If possible, test with users who have different visual abilities
Conclusion
Making typography accessible is about more than just following a checklist. It's about understanding your audience and making thoughtful choices that improve readability for everyone. By considering typeface selection, size, spacing, contrast, and layout, you can create typography that is both beautiful and accessible.
Remember: Good typography is invisible. When readers can focus on your content rather than struggling to read it, you've succeeded in creating truly accessible typography.