How are Websites Designed for Web Accessibility?
Guideline 3.1 of the Web Content Accessibility Guidelines (WCAG) states that text content must be readable and understandable. 1 What this entails in terms of typefaces and fonts for your accessible website is far more nuanced than you might think. Typefaces are groups of designed text characters such as Arial, Helvetica, and Times New Roman, while fonts are sub-sets of typefaces with consistent appearances, such as point sizes and bold fonts in the Times New Roman typeface. Typography, how typefaces and fonts present text, is very impactful on reading, and reading is a core component of visual accessibility.
When most people read text, they do not read or parse individual characters or words, but instead the eye quickly scans through text and parses patterns or groups of characters which are converted into meaning by the human brain. 2 When unfamiliar characters or words interrupt theses pattern-to-meaning processes, it is a disruption of readability and/or understandability. Website designs optimized for readability and understandability may consider the following principles:
Use simple, familiar, and easily parsed fonts. Typefaces that the mind has already generated shape and pattern models for, or can generate those quickly, are the easiest to parse and read. There is not a best typeface or font. Rather, the best typefaces and fonts are ones that are familiar or are easily parsed so that they quickly become familiar.
Avoid character ambiguity. Similar appearing characters can introduce ambiguity which must be processed by the brain, impacting readability and understandability. The capital letters “C” and “O” could look very similar if the “C” has a small opening, and a capital “I”, lowercase “l”, and numeral “1” are quite indistinguishable in certain typefaces.
Avoid character complexity. Simpler shapes and patters are more quickly and accurately analyzed by the brain, so avoid complex fonts, especially for long sections of text.
Use a limited number of typefaces, fonts, and font variations. Each encounter with a new typeface, font, or font variation requires that a map or model of the characters and patterns to be built in your mind. Encountering a familiar typeface lessens this cognitive burden.
Consider spacing and weight. Adequate letter and word spacing, and thoughtful weight (thickness), can improve readability, since letters and words appearing very close together can introduce confusion.
Ensure sufficient contrast between the text and background. Ensure that there is sufficient contrast or brightness difference between text and background so that there is not too much or too little, which could negatively impact readability.
Avoid small font sizes and other anti-patterns. Relative font sizes (such as percents or ems) provide more flexibility in modifying the visual presentation compared with absolute units (such as pixels or points). Font size also impacts line length and layout, which should also be design considerations to ensure readability and understandability.
Use real text rather than text within graphics. Web content presented as real text is much more adaptable as it can be customized for readability, copied/pasted, adapted for screen size, is more compatible with search engines, and is more accessible in low bandwidth environments.
1 W3C, 2021, “How to Meet WCAG (Quick Reference)”
2 WebAIM, 2021, “Typefaces and Fonts”