Design

Why you should go big with line spacing

by

on

View all posts

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

Line spacing is expressed 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

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.

Line spacing

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 on the web there’s no similar cost. The only tax on bigger leading is arguably scroll fatigue—but increase is negligible when compared with the benefits of larger line spacing.

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.

Author

Damian Jolley

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

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.