Skip to content
tally learning

Text Size and Spacing

6 minute read

Last updated:

Summary

Section titled “Summary”

Even when we make the best possible choices for text size and spacing, some people will need different options to read the text easily or even to read at all. The needs are so varied that it is impossible to style text that is easy for everyone to read. Instead, people must be able to adjust text size and spacing themselves.

Overview

Section titled “Overview”

Two main factors that impact readability are text size and spacing between letters, words, lines, and paragraphs. These criteria are essential to provide optimum readability for people with vision-related or cognitive and learning disabilities related to reading processing skills.

Readability is affected when:

  • text size is too large or too small;
  • text weight is too heavy or too light for the font’s size;
  • letter, line, or paragraph spacing is too tight or too loose.

Which text formats work best? That is highly subjective. We need to make text formatting choices that are optimal for most people while allowing everyone to make their own choices. The text features that improve readability for people with disabilities improve readability for everyone. If you’ve ever read a document or web page and wished you could adjust the text to make it just a bit larger, a bit darker, or have a bit more spacing between lines, then you will appreciate the need for all readers to have the ability to adjust the text to meet their individual needs.

This short Customizable Text video from the Web Accessibility Initiative provides a quick insight into how adjusting text can improve readability.

Who is Helped

Section titled “Who is Helped”
  • People with low vision or vision-related disabilities, such as macular degeneration, benefit from larger fonts and good color contrast. They also benefit from a reasonable line length, enough white space, and good text spacing.
  • People with reading or language disabilities, like dyslexia, benefit from shorter lines and space between text.

Guidelines

Section titled “Guidelines”

The Web Content Accessibility Guidelines (WCAG) require that users can adjust text size and spacing. If users can control these text attributes, they can usually adjust other text attributes as well.

  • Responsive web design is one method that helps meet these criteria. It supports people’s ability to adjust a site to their needs while ensuring it works on mobile devices.
  • Another method of supporting text customization is including code that allows people to adjust text to meet their needs.

People should be able to adjust text using:

  • Alternative CSS style sheets (see Zoom and Reflow)
  • Accessibility Bookmarklets (see Single-Purpose Bookmarklets)
  • Browser Extensions
  • Browser and Platform (computer) settings (see Browser and Platform Settings (Ta11y))
  • Assistive technologies like ZoomText

Although WCAG does not specify a minimum text size, it is a best practice to avoid smaller font sizes. Small text is difficult for most people to read, especially those with low vision. These guidelines provide an adequate text size for most people:

  • Text size should be at least 12 points (16 pixels) for primary or body text.
  • Text size should be at least 10 points (13.3 pixels) for all text. A smaller size is appropriate for a copyright notice, legal disclaimer, or similar content. However, you should not use small sizes for large amounts of text, like body text.

It is impossible to provide the correct text size for every person. Instead, you must ensure people can enlarge fonts or zoom in and out of a document or website to get the level of magnification they need.

WCAG requires that users can reset text spacing to the following parameters without loss of content or functionality:

  • Letter spacing (tracking) should be at least 0.12 times the font size.
  • Word spacing should be at least 0.16 times the font size.
  • Line height (line spacing) should be at least 1.5 times the font size.
  • Spacing that follows paragraphs should be at least two times the font size.

These text spacing recommendations can be general guidelines, but they will not work for every font. More importantly, no guidelines can provide perfect text spacing for every person.

The key to good readability is to start with text spacing options appropriate for the font you are using and then allow people to adjust text and text spacing themselves.

For an insightful example, visit the Readability Sandbox. You will quickly appreciate the impact of being able to adjust text spacing and how difficult it would be to choose the “best” spacing for every individual.

The examples in Figure 1 and Figure 2 below from the Accessible Community website show the impact of changes people can make to text spacing.

Screenshot of text on a web page before text spacing adjustments are applied.
Figure 1: Web Page without Text Spacing Adjustments
Screenshot of text on a web page after text spacing adjustments are applied. Differences in text spacing are clearly visible.
Figure 2: Web Page with Text Spacing Adjustments

You must ensure people can change text spacing. When the spacing changes, the page display must adjust to avoid loss of content or functionality.

Exceptions

Section titled “Exceptions”

WCAG requirements for text spacing only apply to content written using markup languages like HTML. They do not apply to images of text, as users cannot adjust text spacing in an image. Therefore, it is important to use text rather than images of text whenever possible.

See Images of Text for more information on using text in an image.

How to Test

Section titled “How to Test”

Check Text Size

Section titled “Check Text Size”

Verify a minimum text size of 10 points for all text and 12 points for body text. Use an accessibility test tool (browser extension) like WAVE to identify small text. See WAVE for more information on using this tool.

Screenshot of the WAVE test results “Details” panel. Among the errors shown, one highlighted alert identifies small text on the web page.
Figure 3: WAVE Test Results with a “Small Text” Alert

Check Text Spacing

Section titled “Check Text Spacing”

The easiest way to test the text spacing adjustments is to use an accessibility test tool (browser extension) such as the ARC Toolkit browser extension that lets you make the needed text spacing adjustments with a single click. Alternatively, you can use single-purpose test tools. An example is the Holistica11y Text Spacing Bookmarklet. Follow the instructions for installation, and you can easily perform this test.

Before and after view of the ARC Toolkit interface. “Check Text Spacing” is selected in the “after” view, and the text on the web page is visibly changed to show the text spacing adjustments.
Figure 4: ARC Toolkit “Check Text Spacing” Before and After View

After opening the ARC Toolkit, scroll down the Test pane to select the “Highlight” option. A second page will open in the Test pane. Select the “Check Text Spacing” option. The web page’s text spacing will immediately change.

Visually inspect the page.

  • Does any content overlap or hide other content?
  • Does any content become truncated or cut off?

If there are any problems with content that is hidden or truncated, they will need to be corrected.

See ARC Toolkit (Tally) for more information on using this tool.

References

Section titled “References”