CSS line-height
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 software.
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.
Thank you for reading!
Wanna read more? Subscribe to our newsletter!
Creating
software solutions
that work
