Skip to Content
Learn
CSS Typography
Line Height

We often modify line-height to make text on a web page easier to read. When text is styled to appear larger, the vertical spacing between lines of text can decrease, creating text that is difficult to read, particularly in paragraphs.

We can use the line-height property to set how tall we want the line containing our text to be, regardless of the height of the text. Line heights can take one of several values:

  1. A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size.
  2. A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.

Generally, the unitless ratio value is the preferred method, since it is responsive and based exclusively on the current font size. In other words, if we change the font size, a unitless line-height would automatically readjust, whereas the pixel value would remain static.

p { line-height: 1.4; }

Instructions

1.

Let’s change the line height of the text within the banner.

In style.css, set the line height of the paragraph element within the banner class to 1.4. You’ll notice the line height increase.

Folder Icon

Take this course for free

Already have an account?