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 emphasizes clarity and legibility.
- 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.
- Some designers recommend sans-serif faces for UIs and serif faces for longform reading, but these are not hard-and-fast rules.
- For an easy place to get started, the U.S. Web Design Standards (USWDS) Typography page includes a set of open source typeface recommendations that emphasize legibility.
- Factors to consider:
- 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.
- Inclusive Design Patterns by Heydon Pickering
- Better Web Type by Matej Latin
- Text legibility - Material Design