AtoZ CSS Quick Tip: Setting the Line-Height

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for line-height here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the line-height property for you.


L is for line-height

In this quick tip, we’ll look at a shorthand for setting font-size and line-height together to save yourself a couple of extra keystrokes.

line-height, as discussed in the original screencast video, is a property for setting the height of a line in CSS. It’s similar (but slightly different) to leading in print design.

Tip 1

line-height only applies to elements that have their display set to inline or inline-block and it actually sets the height of the line box that bounds the element. If you set line-height on a block element, you may still see some changes to your styles but it’s actually the inline child elements that are being affected as line-height is an inherited property.

When setting line-height without a unit (as I recommend in the video), the computed value is the line-height multiplied by the current element’s font-size.

  font-size: 20px;
  font-family: 'Avenir', sans-serif;
  line-height: 1.5; /* 30px */

Tip 2

If you need to set both line-height and font-size at the same time, there’s a handy shorthand via the font property.

This shorthand allows you to set font-style, font-variant, font-weight, font-size, line-height and font-family in a single line.

The snippet from the tip above, could be combined into a single font shorthand as follows:

  font: 20px/1.5 'Avenir', sans-serif;

When using this shorthand syntax, the order of declaration is important.

  1. The font-family must be the last declaration
  2. The line-height must follow the font-size immediately and be separated by a forward slash /
  3. font-style, font-variant and font-weight must be defined before font-size and line-height.

A full example using all the available font properties may look as follows:

  /* style | variant | weight | size/line-height | family */

  font: italic small-caps 700 20px/1.5 'Avenir', sans-serif;