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

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