CSS line-height

DZone 's Guide to

CSS line-height

We take a look at his CSS property that can help you improve the look and user experience of your front-end application.

· Web Dev Zone ·
Free Resource

The CSS property line-height defines the amount of space used for lines, most commonly in 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 the line-height property, space is always added equally above and below the text.

Another important property for text formatting is the font size property. In modern websites, it is common practice to use relative font size.

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. Check out other useful articles about absolute and relative positioning, nesting in Sass and Less and the calc property.

css ,web dev ,front-end development

Published at DZone with permission of Tatjana Boskovic , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}