Leading or Line-height

By: Skillcrush

Category: Uncategorized

In the print world, leading is the space between lines of text. On the web, that space is called line-height.

The word leading literally comes from pieces of lead. Back in the golden olden days of big printing presses, typesetters used pieces of lead to increase space between lines of text.

Since you don’t need any lead to typeset on the Internet, online we call leading line-height. To set the line-height of all the paragraphs on your website you might write something like this in your CSS document:

p {
font-size: 16px;
line-height: 19px;

The line-height attribute in CSS takes a few different parameters. Most of the time, you will see developers express line-height in pixels, like the example above. You can also set your line-height using EM’s, points (pts), percentages, or just straight numbers.

What all those different measuring units mean can be a bit confusing, which is why many developers stick to the known, pixel height. That said, what EMs, percentages, and straight numbers have going for them is that they are all relative measurements, which can be super useful when your site needs to look great across a variety of browsers and devices.

When choosing line-height, legibility is key. As a general rule of thumb, we recommend that your line-height be about 20% larger than your text size. One way to do this is to write the following:

p {
line-height: 1.2;

In this instance, the line-height is measured relative to the font-size. Thus, if the font-size is 16px, the line-height is 1.2 times 16px, or around 19 or 20 px, which is just right. Learn more about these units here.

Cocktail Party Fact

We know typesetters used lead to increase line-height, hence the name leading, but where does the word kerning come from? Kerning, in print production, is the space between individual letters.

The word kerning, it turns out, is derived from the word corner because letters that needed kerning (your T’s and A’s and V’s) would have their corners notched out so that they could overlap one another on the printing press.

Want to learn more about line-height and designing for the Web? Check out our downloadable PDF, The Basics of Web Design.


Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.