When you’re designing, line spacing (or leading) is just as important as font size. Line spacing has an undervalued impact on scan-ability and readability—but more importantly on accessibility.
What is line spacing?
Line spacing is the amount of space between lines of text within a paragraph, the property set by “line-height” in HTML code.
Line spacing is expressed in HTML as a number value or factor of the font size, such as 1.5× or 150%. As an example: 1.5× line height on size 12 text is 18 (by math 12 × 1.5).
History lesson: The term “leading” (the print name for line spacing) comes from printing presses when type was manually set with movable metal type letters.
“Line spacing is just as important as font size.”
The spacers between rows of characters were made from the metal lead, so the name “leading” was born (pronounced like “ledding,” as in wedding).
Why does line spacing matter?
In the same way that font, size, weight, and color are important considerations for typography, so is line spacing.
Line spacing impacts the feel of a design
, rhythm of the typography, and readability. Too tight and text will feel crowded and become harder to read. Too large and lines will appear unrelated and spacey.
Related: The big list of free typography resources
Line spacing also impacts accessibility. Users with cognitive disabilities or visual impairment have trouble tracking lines of text when too closely spaced. Providing the right balance of line spacing allows users to move down to the next line of text more easily.
What is the right line spacing?
To meet W3C accessibility guidelines “Line spacing is at least space-and-a-half within paragraphs—that’s 150%.”
Many default line spacing settings are lower than this guideline. An example:
- The default leading for most browsers is 110% to 120%
- Sketch and Adobe Creative Suite’s default setting for auto leading is 120%
- Bootstrap’s paragraph text default line height is 1.428 (142%)
- Foundation has a default line-height for paragraphs at 1.5625 (hooray!)
Only one of these default settings meets accessibility guidelines. Too often these default leading settings find their way into design mockups, and into real world websites.
Using default leading sizes is unacceptable. It is our responsibility as designers to do better. This also doesn’t mean setting 150% as your default and forgetting about it. Line spacing should be carefully designed, taking into account line lengths, font size, and other type specifications. Some styles may need more leading and others better suited to having less leading (with caution!)
“Using default leading sizes is unacceptable.”
As general rules:
- Smaller text sizes require larger line spacing
- Wider paragraph widths and longer paragraphs require more line spacing
- Larger font sizes (such as headings) can handle less line spacing
Why I love big line spacing
I err on the larger side for line spacing when typesetting styles for the web. I love larger line spacing (of course, we’re talking within a reasonable range).
The benefits of larger line spacing:
- Accessibility
- Easier and quicker for users to consume content
- More scannable
- Readability
In designing for the web, line lengths become responsive to different screen sizes. A paragraph that’s 2 lines on desktop may become 4-6 lines on mobile. Tighter line spacing would work for 2 lines on desktop, but it’d cause readability issues on mobile because it’d be a large chunk of text. (Of course, line spacing can be adjusted for different break-points, in the same way as font size, but realities are that most cases they are not).
Larger line spacing ratio—that works for both shorter and larger paragraphs—won’t have these issues. In print design, increasing leading by just 10-20% can increase page count significantly, causing a jump in print costs. Thankfully, in HTML, there’s no similar cost. The only tax on bigger leading is arguably scroll fatigue—but the increase is negligible when compared with the benefits of larger line spacing.
With everyone talking about scan-ability, accessibility, how impatient users are becoming, and how we don’t really mind longer pages on the web—I’m surprised there aren’t a plethora of articles and recommendations arguing for larger line spacing.
Don’t be afraid to embrace larger line spacing! When setting the size, color, font, and weight of your typography, make sure to put time into designing and checking your line spacing. Your readers and users will thank you.
For more on accessibility, don’t miss our ultimate guide to web content accessibility.
Damian likes laughing, biking and everything about web design and UI design. Building brands online and crafting digital experiences is what his human form does best. damianjolley.com
