line-height

lets take a look at the line-height property

line-height is the CSS property that adds or subtracts the amount of vertical space between each line of your text element, which is helpful to adjust the readability and the appearance of the text.

taught by Tina May

line-height can be set as a ratio to the font-size (recommended)

You can set the line-height in a decimal number that works as a ratio to the element’s font size. So if the paragraph element has a font-size of 20px and a line-height of 1.55, that line height is equal to 31px.

line-height:

Tip: A line-height of 1 will give each line almost the same height as the text itself, which looks very condensed for paragraphs but nicely fit for headings. As a general rule, your paragraph should be at least 1.4 to give it more space.

Oh hey there fellas!

I knew exactly what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

line-height can be set with pixel units

You can also set the line-height in pixels, but if you change the font-size you’ll need to go back and adjust the line-height if you want it to stay in the original proportion.

line-height:

Oh hey there fellas!

I knew exactly what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

line-height can be set with rem units

You can also set the line-height in rem which is always relative to the font-size of the html selector.

line-height:

Tip: In case of rem, if we set the html font-size to 16px, then 1rem = 16px. And if we say 0.75rem then it’s going to equal to 12px (0.75 x 16).

Oh hey there fellas!

I knew exactly what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

line-height can be set back to default

You can also set the line-height back to normal (default), which is about 20% larger than the font size.

line-height:

Oh hey there fellas!

I knew exactly what to do. But in a much more real sense, I had no idea what to do.

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<div>
  <p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
  <p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
  <p class="style-3">This morning I saw a YouTube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.</p>
</div>

Tuition is valuable. But you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

This morning I saw a YouTube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.

CSS

/* Change the line-height of the first paragraph*/

.style-1 { line-height: normal; }

/* Change the line-height of the second paragraph*/

.style-2 { line-height: 1.5; }

/* Change the line-height of the third paragraph*/

.style-3 { line-height: 24px; }

reults

Try changing the spacing between lines of each of the following elements, below we’ve put 3 paragraphs with a class of ‘style-1’ ‘style-2’ and ‘style-3’.

You can use different values in pixels or the decimal number, and bring it back to normal (default) if you want to.

Try these (or anything else!):

Copyright 2023