Introduction to CSS line-height Property

The CSS property line-height defines the amount of space used for lines, most commonly in the text.

It is often confused with line spacing (leading) used in Photoshop and similar softwares.

Leading is a term that describes the distance between the baselines in the text. In the case of defining leading, space is always added below the text. But, when working with line-height property, space is always added equally above and below the text.

Line-height uses several different types of units:

• px,
• em,
• %,
• unitless number.

It’s important to mention that the unitless value is, basically, just a percentage. So, if the line-height has a property of 1.2, it means it just has a value of 120%.

Importance of line-height

The most important use of line-height is making your text readable. It is recommended to use unitless values of any other unit that isn’t static like the px unit.

If there is a need to set the font size and line-height at the same time, there is a handy CSS shorthand:

html {
  font: 24px/1.5 ‘Lato’, sans-serif;
}

By using this shorthand you will be able to set 3 elements at the same time:

• font-size,
• line-height,
• font-family.

The line-height property applies only to elements that have their display property set to inline or inline-block. If the line-height is set on a block element, there might be some changes, but it is probably just the inline child elements that have been affected.

If you set the line-height without a unit, the result is the line-height value multiplied by the element’s font-size.

div {
  Font-family: ‘Lato’, sans-serif;
  Font-size: 14px;
  Line-height: 2 // equals to 28px
}

Hope this article helped clarify the meaning and usage of the line-height property.

Previously published at kolosek.com/css-line-height/