Who does accessible typography benefit? You’re probably thinking of a person with low-vision; maybe they have glaucoma, cataracts, or amblyopia. Though the World Health Organization estimates 2.2 billion people in the world have a vision impairment or blindness, more people benefit from legible text on a webpage than those with traditional vision loss.
And before we review specific user groups, note that accessible typography profits all users by boosting user attention, word recognition, and information processing.
Older adults
As we age, so does our eye-sight due to natural changes in the eye’s structure. According to the NIH, “About 93% of the estimated 43.9 million Medicare beneficiaries aged 65 years or older reported using eyeglasses for either distance or near vision correction.”
Whether we like it or not, each one of us will be an “older adult” eventually. And unfortunately, we can’t stop time or the effects of aging, so we must account for our older users (you’re designing for the future you).
People with cognitive disabilities
The term “cognitive disabilities” is quite broad, and many people with a wide range of abilities are combined in this group. It includes people with intellectual and learning difficulties, such as Down Syndrome, dyslexia, and amnesia.
Neurodivergent people
Similar to cognitive disabilities, “neurodivergence” is also an umbrella term that encompasses various abilities. A person with autism (ASD), attention-deficit/hyperactivity disorder (ADHD), or obsessive-compulsive disorder (OCD) are neurodivergent.
Though neurodivergent people have brains that function a little differently to what’s considered “typical,” web content must be created keeping these users in mind.
Miscellaneous user groups
- Non-native speakers who aren’t as familiar with certain letter-forms and patterns
- Temporary disabilities, like migraine auras or pink eye
- Situational disabilities, like poor screen lighting, glares from the sun, or forgetting glasses
- People with eye strain or fatigue–caused by prolonged focus on screens or lack of sleep
You might be thinking questions like, should I pick a serif or sans-serif? Do I need to use a dyslexic-friendly font, like Open Dyslexic? Can I not use any “fun” font anymore?
Many characteristics make up an accessible font, but it doesn’t constrain your selection of fonts as much as you’d assume. Serif and sans-serif fonts can be accessible. Fonts not built specifically for users with dyslexia can still be readable. And fonts can be fun and unique without losing their clarity.
Font choice
- Ensure the font has clear character recognition (e.g., differentiation between capital “I,” lowercase “l,” and numeral “1”)
- Choose fonts that have open letter shapes; these have a larger aperture (or space) in letters like “c” and “a”
- Avoid mirrored letters, which are commonly found in letter sequences like “dbqp”
- Use “Regular” font weight for body text (or value of 400 in CSS)
Font size
- Use a minimum of 16 CSS pixels for body text; if smaller is needed, do not use sizes below 12 CSS pixels
- Ensure the sizing between headings and body text is distinct for clear hierarchy
- Check for responsiveness by resizing the text at least 200% to see if any content or functionality is lost
- For fonts smaller than 24 CSS pixels, make sure the text color has a contrast ratio of at least 4.5:1 to its background
Note: There isn’t a WCAG guideline that specifies font size usage, but there are best practices to optimize readability for a majority of users (without scaling the text).
Line length, height, and spacing
- Ideal line-length is around 50 to 75 characters long (long lines of text can be intimidating)
- For longer lines of text, like on desktop devices, the line-height should be about 1.4 to 1.5 times the font size
- For shorter lines of text, like on mobile devices, should be about 1.3 times the font size
- Ensure letter and word spacing is not so tight that separate letters or blend together, as well as not so loose that it’s hard to put letters together (this is important to consider as the font size increases and decreases)
- Spacing between paragraphs need to be large enough to be easily recognized, but not so large that the paragraphs seem disconnected
But wait, isn’t there a WCAG guideline for text spacing?
WCAG does include success criteria about text spacing under SC 1.4.12 Text Spacing, Level AA. It specifies the following:
- Line-height should be at least 1.5 times the font size
- Letter spacing (or tracking) should be at least 0.12 times the font size
- Word spacing should be at least 0.16 times the font size
- Spacing after paragraphs should be at least 2.0 times the font size
Don’t worry; you don’t have to meet these requirements in how you style the original text content. This guideline ensures your text content can be overridden to these spacing requirements if the user prefers.
In other words, make sure your text content can be customized to meet the WCAG spacing requirements without losing functionality or content overlapping each other.
Alignment and layout
- Use left-alignment for text; avoid justified text because it creates a “river effect” in body text
- Provide a logical and consistent text structure by using headings (H1 to H6) and white space
- Use bulleted or numbered lists to make information more digestible for users
- Keep text paragraphs short (less than 200 words); think about splitting different concepts into sub-paragraphs instead of putting them in one block of text
Though we addressed best practices when picking accessible fonts, here is a rapid round of common font issues, as well as strategies to check for accessible fonts.
Avoid the following
- Overly stylized or decorative fonts (they’re pretty, but at a cost)
- Expressive fonts as body text (use minimally)
- Tiny text for the aesthetic (I get it, but text should be large enough to read without zoom)
- Underlining text for emphasis (reserve underlined text for hyperlinks)
- All-caps and italics (use sparingly, if at all)
- Text with low-contrast color over “hero” images (make sure each part of the text has adequate color contrast)
Strategies to check for accessible fonts
- Simulate specific disabilities, like color-blindness and dyslexia with the Chrome extension, Web Disability Simulator
- Check characters that can often look similar, like “Il1,” “eoc,” and “O0C”
- Scale the font size to see if any content overlaps or is lost (in Chrome, this can be done in Settings → Appearance → Font size → Choose “Very large” from the dropdown)
- Check letters that can mirror each other, like “dbqp”
- Use relative units, like em or percentages, so the font scales proportionally to the user’s settings
- Ensure the style and semantic structure match (e.g., Heading 1 is largest, Heading 2 is second-largest, etc.)
I know; you want to apply accessible practices to your designs, but you’re lost on which font to pick–there are so many! But resources like ADA Site Compliance and Siteimprove offer suggestions on accessible fonts, both serif and sans-serif. Let’s test them out below.
Serif fonts
- Arvo
- Georgia
- Lora
- Palatino
- Rockwell
- Times New Roman
Verdict: Most of the fonts have good character differentiation. The least distinct is Rockwell, which has a similar lowercase “l” and numeral “1,” as well as having more closed letter forms. My personal favorite is Arvo since it’s a subtle serif, but maintains distinction between characters.
Sans-serif fonts
- Arial
- Atkinson Hyperlegible
- Droid Sans
- Helvetica
- Tahoma
- Verdana
Verdict: Surprisingly, Arial and Helvetica have little character differentiation between the uppercase “I” and lowercase “l,” as well as mirroring letters in the “dbqp” sequence. My personal favorite is Atkinson Hyperlegible with its open letter shapes and distinct characters.
As a quick tip, if you ever see an accessible font you like on a browser website, you can use the Fontanello Chrome extension to quickly get the font details. You only need to select a part of the text on the webpage, right-click (or control-click) to open the contextual menu, then select the Fontanello extension to get the font styling used.
