Design for readability

Readability and legibility are key considerations for all users. For people with disabilities, these attributes can be essential to a successful user experience. For example, some people may have difficultly tracking along a line of text if its line height (a.k.a. leading) is too wide or too narrow. Some people need to enlarge text to read it and will not be able to access content set in a text size that is small or doesn't scale correctly.

For optimal readability:

  • Use visual and semantic space. Space is an important visual design tool that helps us identify groups of related content and delineate unrelated content. Non-visual users benefit from "space" that is created using semantic markup (see Solid Structure).
  • Provide the right amount of space between lines of text. For most content work, the interline spacing (line-height) is applied automatically.
  • Use clean typography. Avoid changing the typeface from that specified by the website. 
  • Avoid using all caps. Readability is reduced with all caps because all words have a uniform rectangular shape, meaning readers can't identify words by their shape.
  • Don’t underline text. Reserve underlining for identifying links.
  • Use left-aligned text. A consistent left margin makes reading easier.
  • Support text resizing. Check how your content responds to enlarged text. Avoid using narrow columns of content because they will not respond well to scaling.

Testing

  • Ensure your content is coded using semantic markup (see Testing section under Identify headings, lists, and tables).
  • Scan the “color” of your page. Is there an even color, with only important elements drawing attention, like headings?
  • Enlarge your text size in the browser. Does the text resize? Does the layout stay intact, or do elements overlap and clip?

Resources

✎ Technique: Readable paragraph text

Paragraphs of text are a fundamental core of web content, so it's important to display them in a fashion that is optimally readable to the majority of your audience without requiring them to change their display settings. For people who do need to customize display of text to make it easier to read, it's important to support this customization rather than forcing them to read the text the way you specify.

For the most part, this means applying typesetting best practices, which predate the web.

Examples

Bad example


p.bad {
  font-family: serif;
  line-height: 1;
  text-align: justify;
}

There are a number of things wrong with this example:

  • The line-height or "leading" is too tight at just 1. There needs to be some space (although not too much!) between each run of text, to separate them. A value of 1.3 to 1.5 is optimal, depending on the font.
  • Justified text can produce readability issues for people with dyslexia and other conditions that affect reading and comprehension.
  • Justified text can produce unevenly enlarged spaces between certain words, sometimes known as "rivers".
  • The width of a paragraph is called the "measure." Measures that are too wide make it difficult for readers to scan back to find the start of the following line. In this case, it is not set at all, meaning it can easily grow too large on wider viewports.
  • The typeface is a serif font. While accessibility requirements do not mandate use of specific fonts, be aware that people who have online reading difficulties benefit from body text set using a clear, consistently formed and balanced sans-serif font.
Careful styling can help overcome these issues in HTML documents and in online documents that are published in other formats, such as Word or PDF, while also providing flexibility for people who need to customize text appearance.
 

Code editor

In the code editor, you'll find the bad example described above and an alternative. Try different fonts to see where the line-height and other metrics need to be adjusted.

See the Pen good and bad examples of readable text by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.

✎ Technique: Text and images of text

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options provided by online content editors should allow you to update the style for that text.

Only in extreme circumstances, such as when a logo is used, should you provide an image of text rather than text. If you do this, you'll need to provide that same text as the image’s text alternative so that screen-reader users can access the text.

Examples

Bad example

In a WYSIWYG editor, it is possible to upload an image of some text (let's say, "delicious pancakes") and insert it into the page with alternative text that matches the text exactly:


<img src="/path/to/text.png" alt="delicious pancakes" />

One disadvantage here is that screen readers will, in some contexts, read the alternative text with "graphic" appended, and you might not want the user to know that the text is really an image. In addition, text that’s inside an image isn’t translatable into different languages, selectable for copy/paste, or resizable without degrading its quality.

Use CSS and web fonts

 

Write the text as text in the editor and let the publishing system apply styling.

Behind the scenes, the text will be styled using web fonts and CSS properties such as background, text-shadow and color.


.pancakes-text {
  font-family: PancakeFont, FallbackFont, sans-serif;
  color: SandyBrown;
  text-shadow: 0.02em 0.02em 0 Brown, 
                        0 0 0.5em violet;
}

Code editor

You can experiment with CSS text styling in this code editor, using the above rules as a starting point.

See the Pen CSS text styling by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.