Learning About Leading in Web Design

Wooden type letters
Wooden type letters.

Web design has always borrowed principals and definitions from the world of graphic and print design. This is especially true when it comes to web typography and the way in which we get letterforms on our web pages. These parallels are not always 1 to 1 translations, but you can certainly see where one discipline has influenced the other. This is especially evident when you consider the relationship between the traditional typography term "leading" and the CSS property known as "line-height."

The Purpose of Leading

When people used to manually handset metal or wooden letters in order to create the typography for a printed page, thin pieces of lead were placed between horizontal lines of text in order to create spacing between those lines. If you wanted a bigger space, you would insert larger pieces of lead. This is how the term "leading" was coined. If you looked up the term "leading" in a book about typographic design and principals, it would read something to the effect of -"the distance between the baselines of successive lines of type."

Leading in Web Design

In digital design, the term leading is still used to refer to the spacing between lines of text. Many programs use this exact term, even though actual lead is obviously not being used in those programs.This is a great example of new forms of design borrowing ideas from traditional ones, even though the exact implementation of that principle has changed.

When it comes to web design, there is no CSS property for "leading." Instead, the CSS property that would handle this visual display of text is called line-height. If you want your text to have additional space between horizontal lines of text, you would use this property. For example, say you wanted to increase the line-height for all paragraphs inside the <main> element of your site, you could do so like this:

main p {
line-height: 1.5;

This would now be 1.5 times the normal line height, based on the default font size of the page (which is normally 16px). 

When to Use Line-Height

As detailed above, line-height is appropriate to use to space the lines of text in paragraphs or other blocks of text. If there is too little space between lines, the text can become jumbled and difficult to read for viewers to your site. Similarly, if the lines are spaced too far apart on the page, the normal flow of reading will be interrupted and readers will have trouble with your text for that reason. This is why you want to find the appropriate amount of line-height spacing to use. You can also test your design with actual users to get their feedback on the readability of the page.

When Not to Use Line-Height

Do not confuse line-height with the padding or margins that you would use to add whitespace to your page's design, including underneath heading or paragraphs. That spacing is not leading, and therefore it is not handled by line-height. 

If you want to add space under certain text elements, you would use margins or padding. Going back to the previous CSS example we used, we could add this:

main p {
line-height: 1.5;
margin-bottom: 24px;

This would still have the 1.5 line height between lines of text for our page's paragraph's (the ones inside the <main> element). Those same paragraphs would also have 24 pixels of whitespace beneath each of them, allowing for the visual breaks that allow readers to easily identify one paragraph from another and make website reading easier to do.  You could also use the padding property in place of margins here:

main p {
line-height: 1.5;
padding-bottom: 24px;

In almost all cases, this would display the same as the previous CSS.

Say you wanted to add spacing underneath list items that were inside a list with a class of "services-menu", you would use margins or padding to do so, NOT line height.

So this would be appropriate.

.services-menu li {<
padding-bottom: 30px;

You would only use line-height here if you wanted to set the spacing of the text inside the list-items themselves, assuming they had lengthy runs of text that could run to multiple lines for each bullet point.