1. css
  2. /properties
  3. /line-height

line-height

Definition

The line-height property is used to control the height of each line of text. It specifies the vertical space between lines and is typically used to improve the readability of text. The line-height property applies to block-level and inline-level elements and the text within them.

Examples

Setting line-height to 1.5:

p {
  line-height: 1.5;
}

Setting line-height to 120%:

h1 {
  line-height: 120%;
}

Setting line-height to 2em:

span {
  line-height: 2em;
}

Values

ValueDescription
normalSets the line height to the normal height for the font used.
<number>Sets the line height to a specific number of times the font size.
<length>Sets the line height to a specific length.
<percentage>Sets the line height to a percentage of the font size.
inheritInherits the line height from the parent element.

Best Practices

  • Use a line-height value that is easy to read and suits the content. For body text, a line-height value of 1.5 to 1.7 times the font size is generally recommended.
  • Avoid using very small or very large line-height values, as they can make text hard to read.
  • Use consistent line-height values throughout a document to maintain visual consistency and improve readability.
  • Consider the effects of line-height on different font sizes and weights. Larger fonts may require more space between lines to be easily readable.
  • Use unitless values for line-height when possible, as they are more flexible and will scale better across different font sizes.

Browser Compatibiility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes