Typography
Can you read and comprehend textual information on the page?
Why it’s important:
- Derek has strained eyes after a long day working on a computer.
- Debbie has low vision and has trouble reading small text.
- Te Koha has dyslexia and finds the readability of a piece varies depending on the font used.
Next steps
- The body text font size should be large enough so that people can comfortably read. Use an effective size of at least 16px, this may vary depending on the design of the font.
- Work with developers to use relative font sizes such as percentages or units of em instead of absolute sizes such as pixels or points. This allows text to be more appropriately resized across multiple devices and platforms.
- Maintain a line length that provides more efficient reading. A legible line length is between 50 and 75 characters, with 66 characters the ideal. Shorter pieces of text are acceptable for captions, marginal text, and forms.
- Choose a typeface that emphasizes clarity and legibility. Elements to consider:
- The font performs well whether 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 may be confused with others. For example: I, l, and 1 are distinct as are 0 and O.
- The typeface supports all the characters and font styles that are needed.
- Use headings to communicate hierarchy. The style of the heading needs to differ from the paragraph through a combination of size, weight and colour. This will ensure they are distinct from the paragraph text but still relate to each other, which helps with scanning.
- The typeface should be easily-parsed so that it becomes familiar. Most standard fonts available in modern operating systems meet these requirements.
- Ensure the line height (line spacing) is at least 1.5 times the font size. Spacing following paragraphs is at least 2 times the font size. Letter spacing 0.12 times the font size and word spacing at least 0.16 times the font size.
- Use bold and italics for emphasis only, never for visual headings.
- Advise developers to use relative measures (percent of a whole) for font-size rather than absolute measures (precise number of pixels) to give users flexibility in their font sizes.
References
Resources
- Typefaces and Fonts(this link opens an external website)
- Accessibility and Usability at Penn State(this link opens an external website)
- Text legibility(this link opens an external website)