Take me back!! I want my CSS!! Click me to get back :)

×

Are you missing out on your dream job?

Enrollment for Skillcrush Blueprints JUST OPENED. Register today!

Click Here

Leading or Line-height

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

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 {
font-size:16px;
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.

Your email address will not be published.

One сomment

  1. Jason Jehosephat Replied

    The graphic above is inaccurate. Leading is still leading in the CSS world, though it isn’t an explicitly declared measure. Line-height is NOT the spacing between the lines of text, analogous to leading, as shown. It’s the character height (AD = ascender height + descender depth) PLUS the leading. The browser is supposed to create an inline block containing the text with the leading distributed so that half is above and half is below each line of text. If the line height is specified as 1.2, 1.2em, or 120%, for example (or if it’s any of these by default), then vertical spacing of 10% of AD is inserted above each line of text and 10% below.

Want more articles like this?

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