Read time: 1 minute 42 seconds
Can you easily read and comprehend textual information on the page?
Why it's important
- Zelda has low vision and has trouble reading small text.
- Yulia’s eyes are strained after a long day of working on a computer.
Steps to take
- Use a large enough font size for body text so that people can comfortably read. Use at least an effective size of 16px, but this can vary depending on the design of the font.
- Maintain a line length that promotes comfortable reading. Don’t make lines too long or too short: 45-75 characters per line is acceptable and approximately 66 characters per line is comfortable. Shorter pieces of text are fine for captions, marginal text, and forms.
- Choose a typeface that emphasises clarity and legibility. Some designers recommend sans-serif faces for user interfaces (UI) and serif faces for long-form reading. But these are not hard-and-fast rules. Factors to consider:
- it performs well when it’s small or large
- it has a large x-height
- the character is large for its point size
- the metrics (such as x-height) are consistent between letterforms
- individual letterforms are distinct in shape and can’t they be confused with others. For example: I, l, and 1 are distinct. 0 and O are distinct
- the typeface supports all of the characters and font styles that are needed
- Use headings to communicate hierarchy. Ensure heading styles differ from paragraph text by some combination of size, weight, face, or color. This ensures they’re distinct from paragraph text but are related to each other with some consistency, which helps with scanning.
- Use your type size and line width to determine a line height that people can comfortably read. The larger the type size and line width, the larger the line height should be. For running/body text, that’s usually around 1.4-1.65, headings at around 1-1.3, and captions or short lines at around 1.3. Lines that are leaded too tightly or loosely can diminish readability by making it harder for the eye to know where to return to when the line breaks.
- Test what it’s like to view your designs through the NoCoffee vision simulator (chrome extension) or similar tool.
- Australian Government Design System
- Inclusive design patterns (Heydon Pickering)
- Better web type (Matej Latin)
- Text legibility (Material Design)
- Design assets in sketch (Australian Government Design System)