Design for Readability

Readability and Legibility

Readability and legibility are key considerations for all users. For people with visual impairments and 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.
• Don’t put two spaces after a period. Period.
• 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.
  
  Source: Harvard Digital Accessibility
  
  

Text Alignment

By default, browsers align text to the left. Text can also be aligned to the right, centered, or justified (aligned on both the left and the right margins). Left-aligned text is almost always the easiest to read, except for some Asian and Middle Eastern languages that conventionally read vertically from top to bottom or horizontally from right to left.

Long blocks of centered text result in each new line beginning in a slightly different location. This can introduce overhead when reading.

Fully-justified text forces each line to extend to both left and right margins by adjusting word and letter spacing. Although the resulting presentation may appear more tidy at first, these spacing variations impair readability. Fully-justified text can also create distracting “rivers of white”—patterns of unintended whitespace that distract the eye from the natural flow of the text.

Some circumstances, like centered headings or a right-aligned date on a document, for example, might be appropriate, but these should be treated as exceptions.

Source: WebAIM

W3C – Aligning text on only one side

Similarly, when it comes to justified text, the W3C’s techniques for WCAG 2.0, G169: Aligning text to only one side, states: Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create “rivers of white” running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified.

Source: W3C