As a web designer, part of your job is making written text look good. That’s not always easy — in addition to choosing aesthetically pleasing typefaces and fonts, you need to set appropriate line heights and letter spacings, which can quickly add complexity to your project.
Of course, it’s time well spent: When text appears as manageable “chunks" of content, more people will actually read your website.
However, text spacing and line height can also have an impact on accessibility. Many people magnify text or change their browser preferences to ignore CSS (Cascading Style Sheets) in favor of their own settings. If your text spacing doesn’t accommodate these users, you have an accessibility issue — here’s how to avoid it.
Before we dive into specific guidance, let’s define our terms:
Line spacing or line height is the amount of empty space between vertically adjacent lines of text.
Letter spacing or tracking refers to the empty space between letters.
Word spacing refers to the empty space between words.
When line spacing and letter spacing is extremely tight, text may look more impactful, but it becomes less readable. When spacing is too wide, text appears lighter in weight, but readers may have trouble finding where each word begins.
For the most part, line spacing and height are design decisions — in some cases, you may want extremely wide or tight spacing to get a certain effect. However, it’s important to remember that people might ignore your hard work.
People with vision disabilities, attention-related disorders, and neurocognitive conditions may view your website with a conventional web browser, but change their settings by magnifying text or overriding CSS with their preferred text styles. You need to make sure that your website is still readable for these people.
The World Wide Web Consortium (W3C) publishes standards for CSS and HTML, and they’ve also got rules for accessible text spacing. The Web Content Accessibility Guidelines (WCAG) are widely considered the international standards for accessibility, and WCAG 2.1 Success Criterion (SC) 1.4.12, “Text Spacing,” provides simple rules for testing your content.
Related: How CSS Benefits Accessibility
WCAG success criteria are written as pass-or-fail statements sorted into three potential levels of conformance: Level A (the lowest and most essential level), Level AA, and Level AAA (the most strict level). Most websites should aim for Level AA conformance. Read more about WCAG conformance levels.
Here’s the full text of WCAG 2.1 Success Criterion 1.4.12, “Text Spacing,” which is a Level AA guideline:
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.
A “loss of content or functionality" can occur if the user’s preferred CSS settings force content to appear out of order or obscure certain controls. Here’s a few examples of common WCAG text spacing failures:
A website has a form with a “Submit" button that disappears or becomes unreadable when line spacing changes.
A website has a “sticky" header that remains in place as the user scrolls through content. When the text spacing is increased, the header becomes larger and obscures the content at the top of the page.
Three hyperlinked subheadings appear side-by-side at the top of a page. When text spacing is increased, the subheadings are cut off, and the user can’t determine the purpose of the links.
Of course, these are major accessibility issues — and they’re completely avoidable with proper use of CSS.
Related: Web Accessibility Tips: Don't Disable Zooming (Yes, Even On Mobile)
You can test your content for conformance with WCAG SC 1.4.12 by temporarily modifying your CSS or by downloading a browser extension that provides that capability. Since you’ll need to test your CSS frequently, the best option is probably a browser plugin such as Stylus for Google Chrome or Stylus for Firefox.
Here are some quick tips for testing:
Pay close attention to form labels and instructions, subheadings, and text that appears over images.
You should also make sure that your content can be resized (or zoomed) by at least 200% without losing content or functionality.
Remember, WCAG doesn’t require you to permanently change your CSS to meet the specified metrics — only that your website can accommodate those metrics without disrupting the user’s experience.
Additionally, WCAG does not require websites to provide users with a way to change the default style.
For more guidance, send us a message or start building a plan for WCAG conformance with our free, confidential WCAG Level A/AA website analysis.