Property - line-height

Introduction

CSS line-height is one of the fundamentals of CSS.

It can be used to make content easier to read and comprehend.

It can be used to control the vertical rhythm of layouts.

CSS line-height can even be used to center content vertically.

Before diving in, let’s go back in time and look at the term “leading”.

Leading

Back in the “good old days” type was set by hand using printing presses.

Printed material was created by setting out letters in rows. Each letter was set on an individual block.

Leading, or lead strips were added between the lines of letters when additional vertical space was required.

The term “leading” is still used today in print typography. It refers to the distance between the baselines of successive lines of type.

In CSS, the line-height property is used to control the vertical space between lines.

However, the term “leading” is still used in association with CSS line-height.

Line-height Syntax

The CSS line-height property syntax looks like this:

<'line-height'> =
  normal |
  <number> |
  <length> |
  <percentage> |
  inherit

The pipe symbols "|" stand for "OR", so it could be written as:

<'line-height'> =
  normal OR
  <number> OR
  <length> OR
  <percentage> OR
  inherit

This means that line-height can be specified using one of the following methods:

Option 1: line-height can be specified as normal which is the initial value.

The normal value is interpreted differently by each browser, but most browsers interpret this value to be somewhere between 1.0 and 1.2.

p {
  line-height: normal; 
}

Option 2: line-height can be specified as inherit which inherits the line-height from the parent.

p {
  line-height: inherit; 
}

Option 3: line-height can be specified using a percentage value.

p {
  line-height: 120%; 
}

Option 4: line-height can be specified using a length value.

p {
  line-height: 2em; 
}

A wide range of different types of length values can be used such as:

Font-relative lengths:

/* The width of the glyph "0"  */
p { line-height: 1ch; }
/* The font-size of the element */
p { line-height: 1em; }
/* The x-height of the element's font */
p { line-height: 1ex; }
/* The font-size of the root element */
p { line-height: 1rem

Viewport-percentage lengths:

/* 1% of the height of the viewport */
p { line-height: 1vh
/* 1% of the width of the viewport */
p { line-height: 1vw
/* Equal to the smaller of vw and vh */
p { line-height: 1vmin
/* Equal to the larger of vw and vh */
p { line-height: 1vmax

Absolute length units:

/* One device pixel */
p { line-height: 1px
/* One millimeter */
p { line-height: 1mm
/* A quarter of a millimeter */
p { line-height: 1q
/* One centimeter */
p { line-height: 1cm

/* One inch */
p { line-height: 1in
/* One point */
p { line-height: 1pt
/* One pica */
p { line-height: 1pc

Option 5: line-height can be specified using a number value (a unit-less value).

p {
  line-height: 1.2; 
}

Number values can be specified in a range of different ways, as long as they are positive values.

body { line-height: 3; }
body { line-height: 3.01; }
body { line-height: .30; }
body { line-height: .3; }
body { line-height: 0; }
body { line-height: 0.0; }
body { line-height: -0.0; }
body { line-height: +0.0; }

Exercise 1: Write some line-height rules

Open this HTML file in an editor:
exercises-start/exercise-214-05-01.html

Write a CSS rule to style the element with a class of example1. Set with a line-height keyword value of normal.

/* Add styles here */
.example1 {
  line-height: normal;
}

Write a second CSS rule to style the element with a class of example2. Set with a line-height percentage value of 130%.

/* Add styles here */
.example2 {
  line-height: 130%;
}

Write a third CSS rule to style the element with a class of example3. Set with a line-height length value of 1.4em.

/* Add styles here */
.example2 {
  line-height: 1.4em;
}

Write a fourth CSS rule to style the element with a class of example4. Set with a line-height number value of 1.5.

/* Add styles here */
.example2 {
  line-height: 1.5;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-05-01.html

Shorthand line-height

The line-height property can also be specified within the shorthand font property.

The line-height value is written directly after the font-size value - separated by a slash "/".

p {
  font:
    <font-style>
    <font-variant>
    <font-weight>
    <font-size>/<line-height>
    <font-family>
}

The same five line-height value types can still be used:

/* normal */
body {
  font: 
    italic
    small-caps
    bold
    1em/normal
    Arial, sans-serif;
}

/* inherit */
body {
  font:
    italic
    small-caps
    bold
    1em/inherit
    Arial, sans-serif;
}

/* length */
body {
  font:
    italic
    small-caps
    bold
    1em/20px
    Arial, sans-serif;
}

/* percentage */
body {
  font:
    italic
    small-caps
    bold
    1em/120%
    Arial, sans-serif;
}

/* number */
body {
  font:
    italic
    small-caps
    bold
    1em/1.2
    Arial, sans-serif;
}

Exercise 2: Write some shorthand line-height rules

Open this HTML file in an editor:
exercises-start/exercise-214-05-02.html

Write a CSS rule to style the element with a class of example1. Set with font: 1em/normal Cambria, Georgia, serif.

/* Add styles here */
.example1 {
  font:
    1em/normal
    Cambria, Georgia, serif;
}

Write a second CSS rule to style the element with a class of example2. Set with font: 1em/140% Futura, 'Trebuchet MS', sans-serif.

/* Add styles here */
.example2 {
  font:
    1em/140%
    Futura, 'Trebuchet MS', sans-serif;
}

Write a third CSS rule to style the element with a class of example3. Set with font: 1em/1.6em 'Hoefler Text', Garamond, serif.

/* Add styles here */
.example2 {
  font:
    1em/1.6em
    'Hoefler Text', Garamond, serif;
}

Write a fourth CSS rule to style the element with a class of example4. Set with font: 1em/1.8 Helvetica, Arial, sans-serif.

/* Add styles here */
.example2 {
  font:
    1em/1.8
    Helvetica, Arial, sans-serif;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-05-02.html

Inheritance

Some CSS properties are inherited - which means that their values are passed down to 
descendant elements.

For the line-height property, inheritance is a little more complicated than many other properties.

To see how line-height inheritance works, let’s look at four examples where the line-height is set on the <body> element only.

Percentage line-height

In the following example, the <body> element has a line-height percentage value of 120%.

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

h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

The <body> element’s font-size of 16px multiplied by the line-height value of 120% creates a calculated line-height value of 19.2px.

16px x 120% = 19.2px

This calculated value of 19.2px is inherited by descendant elements.

This results is a line-height which is acceptable for paragraph content, but too small for headings and too large for the footer text.

Length line-height

In the following example, the <body> element has a line-height length value of 20px.

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

h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

The length value of 20px is inherited directly by descendant elements.

Again, this results in a line-height which is acceptable for paragraph content, but too small for headings and too large for the footer text.

Normal line-height

In the following example, the <body> element has a line-height keyword value of normal.

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

h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

The normal value rather than a calculated value is inherited by descendant elements.

Browsers may interpret the actual normal value in slightly different ways, but the value is generally a number of 1.2.

This method results in a line-height that is acceptable for all elements.

Number line-height

In the following example, the <body> element has a line-height number value of 1.2.

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

h1 { font-size: 32px; }
p { font-size: 16px; }
footer { font-size: 12px; }

The factor of 1.2 rather than a calculated value is inherited by descendant elements.

This method results in a line-height which is acceptable for all elements.

Which method is best?

Number values are the preferred method as they work well when inherited.

Unlike the “normal” keyword, number values allow us to set specific line-height for different types of elements.

Exercise 3: Write some line-height rules to observe inheritance

Open this HTML file in an editor:
exercises-start/exercise-214-05-03.html

Write a CSS rule to style the element with a class of example1. Set with line-height: normal.

/* Add styles here */
.example1 {
  line-height: normal;
}

Write a second CSS rule to style the element with a class of example2. Set with line-height: 120%.

/* Add styles here */
.example2 {
  line-height: 120%;
}

Write a third CSS rule to style the element with a class of example3. Set with line-height: 1.2em.

/* Add styles here */
.example3 {
  line-height: 1.2em;
}

Write a fourth CSS rule to style the element with a class of example4. Set with line-height: 1.2.

/* Add styles here */
.example4 {
  line-height: 1.2;
}

Notice how the different line-height values affect the smaller text. The percentage and length values have line-height that is too large.

Check your work against the finished HTML file:
exercises-finished/exercise-214-05-03.html

Ideal Line-height?

Research has shown that line-height that is too small can make content harder to read as users have to work harder to move from line to line.

Similarly, line-height that is too large can force users eyes to travel further to read content, which can become tiring.

The WCAG 2.0 guidelines state that: “line spacing is at least space-and-a-half within paragraphs”.

This means that general content such as paragraphs should be set to:

p {
  line-height: 1.5;
}

The same rules should apply to ordered and unordered lists which have multiple lines of content inside each list item.

ul li,
ol li {
  line-height: 1.5;
}

However, content-heavy list items could then bleed into each other, so you might want to add additional space after list items.

ul li,
ol li {
  line-height: 1.5;
  margin-bottom: .5em;
}

On the other hand, headings often look strange when there is too much line-height, so they could be set to a smaller value:

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

As with anything, the best way to determine the ideal line length for the content on your site is to test with real users.

Inline boxes and line-height

Inline elements are elements that do not form new blocks of content; the content is distributed in lines.

Inline elements include elements such as:

<!-- Inline elements -->
<a>
<abbr>
<b> 
<cite>
<code>
<em>
<i>
<span>
<sub>
<sup>

Inline elements sit inside inline boxes - that help determine how width, height, margin, padding, borders and margins behave.

How do browsers determine the height of these inline boxes?

Inline box height is determined by the line-height and font-size, using the following steps.

Step 1: Find the difference between the font-size and line-height. This determines the leading.

In the following example, the line-height is 20px and the font-size is 16px.

/* Formula */
<line-height> - <font-size> = <leading>

/* Example */
20px - 16px = 4px leading

Step 2: Divide the leading in half to create a “half-leading” value.

/* Formula */
<leading> / 2 = <half-leading>

/* Example */
4px / 2 = 2px half-leading

Step 3: Apply this half-leading value to the top and bottom of the content area.

However, if the line-height is smaller than the font-size, the inline box becomes the height of the line-height only.

In these circumstances, the content area pokes out the top and bottom of the inline box.

/* Formula */
<line-height> - <font-size> = <leading>

/* Example */
12px - 16px = -4px leading

/* Formula */
<leading> / 2 = <half-leading>

/* Example */
-4px / 2 = -2px half-leading

You can also set the line-height to a value of 0 which means the inline element has no height at all.

/* Formula */
<line-height> - <font-size> = <leading>

/* Example */
0 - 16px = -16px leading

/* Formula */
<leading> / 2 = <half-leading>

/* Example */
-16px / 2 = -8px half-leading

Using line-height to align content vertically

Line-height can be used to vertically align content inside a parent container as long as the content is one line only.

For example, you could have some text with font-size of 16px that needs to be vertically-aligned inside a parent that is 200px high.

If you set the line-height to 200px, the text automatically sits in the vertical center of the parent element.

/* Formula */
<line-height> - <font-size> = <leading>

/* Example */
200px - 16px = 184px leading

/* Formula */
<leading> / 2 = <half-leading>

/* Example */
184px / 2 = 92px half-leading

Exercise 4: Write some line-height rules for inline boxes

Open this HTML file in an editor:
exercises-start/exercise-214-05-04.html

Write a CSS rule to style the element with a class of example1. Set with line-height: 20px.

/* Add styles here */
.example1 {
  line-height: 20px;
}

Write a second CSS rule to style the element with a class of example2. Set with line-height: 12px.

/* Add styles here */
.example2 {
  line-height: 12px;
}

Notice how the line box has less height than the content area, so text pokes out the top and bottom of the line box.

Write a third CSS rule to style the element with a class of example3. Set with line-height: 0.

/* Add styles here */
.example3 {
  line-height: 0;
}

Notice how the line box has no height at all, so text pokes out the top and bottom of the line box.

Write a fourth CSS rule to style the element with a class of example4. Set with line-height: 200px and text-align: center.

/* Add styles here */
.example4 {
  line-height: 200px;
  text-align: center;
}

Notice how line-height is used here to center the text vertically.

Check your work against the finished HTML file:
exercises-finished/exercise-214-05-04.html