AtoZ CSS Screencast: The CSS Line-Height Property

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

The CSS line-height property acts in a similar way to leading in print design.

It allows us to control the spacing between lines in paragraphs, headings and other text elements.

line-height can also be used as a base to create consistent vertical rhythm and spacing throughout an entire project.

In this episode, we’ll look at:

• the difference between line-height and leading
• using line-height for vertical alignment and
• using the value of line-height to set up site wide default spacing.

line-height vs. Leading

Leading is a typesetting term which describes the distance between the baselines in the text. The term comes from the days of hand-typesetting when strips of lead were used to space out the block of type. When talking about leading, the space is always added below the line.

line-height is a CSS property that controls the height of a line where the spacing is equal above and below the text.

If I have a paragraph with 1em or 16px font-size, and a line-height of 24px, there will be 4px of space added above the text and 4px of space added below; the height of the line will be

4 + 16 + 4 = 24px

This is the major difference between line-height and leading. In CSS, the text is vertically centered within the line and in print, the space is added beneath the line.

Vertical Centering

We can use this knowledge of line-height to create a crude form of vertical centering – something that is typically quite difficult to do in CSS.

Let’s take a look at an example.

I want to create an image rollover effect and display a semi-transparent title with vertically centered text over the top of an image.

I’ll create a container and add a 400x400 image inside of it. I’ll now add the title inside with a line of text. This overlay title will be placed on top of the image with position:absolute and then given a semi-transparent background. As I know the height of the image and image-container, I can use line-height to vertically center the text within the box.

There’s one small downside to this technique as if the text is too long and wraps onto multiple lines, the height of each of those lines will be 400px and the text will overflow the box.

For an alternative approach to vertical alignment, keep a look out for “Episode 22: Vertical Alignment in CSS”.

Project Wide Spacing

We’ve seen how line-height can control the spacing of lines of text in a paragraph. I like to carefully pick this value and use it as an underlying foundation for most spacing throughout a site.

I’ll often set default font-size and line-height on the body which will then cascade down through all my text elements. line-height can be specified in pixels, ems, rems, percentages or can be left unitless. With unitless line-height, which is my preference, all elements receive vertical spacing of their font-size multiplied by my “spacing factor”. I often use 1.5 as my factor but as it’s predominantly set in one place, it’s easy to change.

body {
  font-size: 16px;
  line-height: 1.5;
}

If my default font-size is 16px then all paragraphs will have a line-height of:

1.5 * 16 = 24px

If my default h1 font-size is 2em then it will have an equivalent font-size of 32px and an equivalent line-height of 48px

16 * 2 = 32px 
32 * 1.5 = 48px

I would continue to use this 1.5 factor throughout the rest of the site. I’d add 1.5em margin beneath headings, paragraphs, list, list-items and form inputs. If I wanted a larger amount of space between elements, I’d double my 1.5em to 3em. If I wanted less space – perhaps for padding around buttons or form inputs, I might half it to 0.75em or quarter it to 0.375em. The aim of the game is to keep the factor consistent throughout.

With this consistent spacing set up, if I were now to change the default font size in the body, the relative spacing in and around each element would remain consistent too.

Working out this spacing multiplier is probably one of the most important things to do at the start of a new project. If any specific elements need to be adjusted away from the “magic factor”, that’s totally do-able, but I think it’s always smart to set a good solid foundation and then build upon that, rather than dialing everything in by eye each time where there’s a risk of things not lining up or being inconsistent from page to page.

Quick Tip

Now, in this bonus 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;
}