Mental model
Accessible Typography
The practice of designing text to be legible and readable for the widest possible audience, including those with visual or cognitive impairments.
Discover
You're designing a new website. To make the text easy for everyone to read, what's the most important typographic choice to get right first?
Select the most critical starting point.
Let's break down the process of creating readable text.
Understand
Understand
Accessible typography is arranging text so it's easy for everyone to read, regardless of their abilities. The most crucial first step is ensuring an adequate font size, as text that is too small is a barrier for many. Think of it like a building's ramp—it makes access possible for those who need it and easier for everyone else. For example, a restaurant menu with a large, clear font allows an older person to read it easily without their glasses.
Try this: Look at the text settings on your phone and see if increasing the font size makes articles easier to read.
Full explanation
Full explanation
Accessible typography follows a procedural hierarchy to ensure text is both legible (how well you can distinguish letters) and readable (how easily you can scan and understand words).
The Process
The process begins not with choosing a fancy font, but by establishing a solid foundation.
-
Input & Foundation: Start with an adequate base font size (at least 16 pixels for web body text is a common standard) and ensure high color contrast between the text and its background. This is the most critical step, as it addresses the most common barriers.
-
Structure & Rhythm: Next, adjust the line height to be about 1.4 to 1.6 times the font size. This vertical spacing, called leading, prevents lines from blurring together. Also, keep the line length (or measure) to a moderate width—typically 50–75 characters—so the reader's eye can easily find the start of the next line.
-
Font Choice & Refinement: Finally, select a typeface designed for screen reading. Look for fonts with open shapes, clear distinctions between similar characters (like 'l', 'I', and '1'), and even spacing. Many simple sans-serif fonts (like Arial or Verdana) or serif fonts (like Georgia) work well.
Real-World Examples
- Public Transit: Highway signs and transit maps use specific, highly legible typefaces with large sizes and high contrast so they can be read quickly from a distance by drivers and commuters.
- E-Readers: Devices like the Kindle succeed by giving users full control over typography. Readers can adjust font size, line spacing, and even the font itself to match their personal needs, making reading accessible to millions.
- Government Forms: A well-designed government form uses clear headings, generous spacing, and a simple font to reduce cognitive load, helping people with anxiety or learning disabilities fill it out more accurately.
Research
Research
Research distinguishes legibility (distinguishing letters) from readability (scanning text). Foundational elements like size, contrast, and spacing have a greater impact on comprehension than the serif vs. sans-serif typeface debate.
- Fonts with a large 'x-height' (height of a lowercase 'x') are more legible at small sizes [4]. (2012)
- Moderate line lengths of 50–75 characters support faster reading by easing eye tracking between lines [2]. (2020)
- For dyslexia, certain font traits like increased character spacing can help, but no single font is a universal solution; user choice is critical [1]. (2013)
Limitations
Limitations
No single font is universally accessible. Context (e.g., headlines vs. body text) and writing systems (e.g., Latin vs. CJK scripts) necessitate different approaches. Effective accessibility prioritizes user-customizable settings for size, spacing, and contrast over a single, rigid design.
Try it
Synthesize
Choose a pattern from the guide, then pick an action to try with it.
Which pattern stands out?
What will you try?
Choose a pattern above to select an action.
Sources
Sources
- [1] Good fonts for dyslexiaLuz Rello & Ricardo Baeza-Yates - 2013
- [2] Legibility, Readability, and Comprehension: Making Users Read Your WordsJakob Nielsen - 2020
- [3] Web Content Accessibility Guidelines (WCAG) 2.1 - 1.4.4 Resize textW3C Web Accessibility Initiative (WAI) - 2018
- [4] The Elements of Typographic StyleRobert Bringhurst - 2012
Try it
Check your understanding
After setting a readable font size and high contrast, what should you typically adjust next to improve reading flow?
Show the guide's explanation
Answer: Adjust the line height and paragraph width
After establishing the foundation of size and contrast, the next procedural step is to manage the rhythm and flow of text through proper spacing (line height and measure/width). This prevents eye strain and helps readers track lines.
A city is redesigning its public transit maps. Which typographic choice would best serve a diverse population, including tourists, older adults, and people in a hurry?
Show the guide's explanation
Answer: Choosing a highly legible font with clear numbers and symbols
For quick, at-a-glance information under pressure, legibility is paramount. A font with unambiguous characters (like a clear '1' vs 'l') is crucial for usability in a public setting.
Which of the following is a common myth about accessible typography?
Show the guide's explanation
Answer: There is one specific 'dyslexia-friendly' font that works for everyone.
While some fonts have characteristics that can help people with dyslexia, research shows there is no single font that is best for all dyslexic readers. Personal preference and customizable settings are more effective.
Keep exploring
Find another idea for the decision in front of you.
The complete Reframo library is free to read. Explore another guide whenever you are ready.