When web developers and designers follow the WCAG 2.1 – 1.4.12 Text Spacing (Level AA) Guideline, it ensures that website visitors can override author-specified line height spacing to improve their reading experience.

Some history

In typography, “leading” refers to the distance between adjacent lines of type.

When type was set by hand in printing presses, “slugs”, or strips of lead of appropriate thicknesses were inserted between the lines of type to add vertical space that made the content easier to read.

In today’s markup, leading is referred to as “line height” or “line spacing”, which is the amount of space between lines of text within a paragraph.

Design rule to follow for better readability

Set line height to at least 1.5 times the font size. Use the % or ems relative units rather pixels for better scalability.

Sample Code

HTML

<h3>Paragraph displayed: standard line-height</h3>
<p class=”example1″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3>Paragraph displayed: line height of 200%</h3>
<p class=”example2″>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

p.example1 {
width: 30%;
}

p.example2 {
line-height: 200%;
width: 30%;
}

Browser display

Who benefits

• People with low vision who require increased space between lines of text so they can read the content.
• People with dyslexia who need to increase vertical space between lines to speed up reading comprehension.
• White space between blocks of text helps people with cognitive disabilities discern sections of content.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===