Text

Summary

Whenever you create text, make sure that it is equally accessible to sighted users, users with low vision, and users who can not see the text at all. Factors that contribute include:

  • Font type and style
  • Text alignment
  • White space
  • Line length

Impact

Impact

Many studies of online reading have found that web users typically scan online text rather than read every word. 

On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.

How Little Do Users Read? from Nielsen Norman Group

Presenting a “wall of text” in a digital document or webpage can discourage reading and prevent understanding, much like the meaningless lorem ipsum dummy text below.

Dos and Don'ts

Dos and Don'ts

Expand all

Format Text Based on Its Meaning

We have internalized conventions about how content of different types looks and functions.

For example, readers know how to use a book, such as how to:

  • Use a table of contents
  • Turn pages
  • Understand the relationships between sections and subsections based on the style of headings and subheadings

In digital documents, if you use the formatting toolbar incorrectly, you can prevent people who use voice control and screen reader software from understanding the meaning of the content. 

Do

Follow the core skills of accessibility, no matter what technology you use to present digital text:

Format Long Quoted Text as Block Quotes

Do

On web pages, format large blocks of text quoted from another source that are not otherwise mentioned on the page as block quotes with an optional citation.

  • Block quotes are part of the regular content flow, and not repeated text "pulled out" to draw extra attention. 
  • Correctly formatted block quotes should be coded with <blockquote> tags.
  • If you use the Folwell Design System block quote component, the content will be correctly coded with <blockquote> and optional <cite> tags.

Don't

Don't use a block quote on a webpage just to make a portion of text stand out, or to draw attention to text that already appears elsewhere on the page, called a "pull quote."

  • If <blockquote> tags are used this way, people who use screen reader and other specialized software may have problems understanding the page.
  • If you use the Folwell Design System, format this kind of content as a pull quote or callout instead.

Use Legible and Readable Fonts and Font Styles

How you display digital text impacts both the accessibility and usability of your content.

Your text should be both:

  • Legible: An ergonomic term that refers to whether it’s physically possible to read the text
  • Readable: Easily understood

Do

Use sans-serif fonts for body text. They are more suited for screen reading. 

Use serif fonts for printed documents.

Use standard fonts, such as Arial, Calibri, Helvetica, Times New Roman, Tahoma, and Verdana. Users are more familiar with standard fonts and can thus read them faster, and those with low vision can read the information more easily.

Use mixed-case text.

When emphasizing text, use a key word like “Note” or “Important” in addition to bold or underlined text.

Strive for plain and simple language rather than verbose and complex.

Don't

Don't use fonts that are hard to read.

Don't use more than three fonts in a document or webpage.

Avoid using all-caps or all-lower case text.

Avoid using italics.

Align Text Appropriately

The way text is aligned impacts its accessibility and usability. Justified text is more difficult to read because of extra space between the words. Centered text is challenging for readers with dyslexia because of the jagged way in which it moves the eye around the text.

Do

Left-align text in most instances.

If you are writing in a language that is written from right to left, use right-aligned text.

Don't

Don't justify text.

Avoid centered text.

Use White Space and Headings for Scannability

Scannability means that the reader can quickly scan down the page to find out what it contains. Scannability is enhanced when

  • Headings are appropriately formatted and descriptive
  • There is adequate space between paragraphs of text
  • White space is used effectively. White space draws the user’s eye to the text and helps to offset large amounts of text. This can be helpful for readers with dyslexia and visual processing difficulties, as well as many other people.

Do

Leave ample margins to the left and right of your text.

Choose uncluttered layouts that include no more than three columns.

Experiment with line heights and paragraph spacing to find the right balance of text to white space.

Write shorter sentences and paragraphs.

Use appropriately formatted and descriptive headings.

Don't

Don't alter text character spacing to fit in more text, or it may be difficult to scan.

Control Line Length for Comfortable Reading

The length of a line of digital text can makes it hard for all users to read, and even harder to read for people with impaired vision and reading disorders.

Do

Maintain a comfortable line length for reading body text.

Use your type size and line width to determine line height, according to the U.S. government's Accessibility for Teams site. This will be different for:

  • Body text
  • Headings
  • Captions

Don't

Don't display body text in line lengths that are too short, or users may have to switch focus too often.

Don't display body text in line lengths that are too long, or there may be too few breaks for the eyes.

How-to

How-to