Tag line-height

📏 CSS line-height: Controlling the Vertical Rhythm of Text

When it comes to typography on the web, it’s not just what you write, but how easy it is to read. The CSS line-heightproperty controls the vertical spacing between lines of text, playing a key role in readability, aesthetic flow, and overall user experience.

🧾 What is line-height?

The line-height property sets the distance between the baselines of two adjacent lines of text. Think of it as the space between lines in a paragraph — the “leading” in print typography.

A good line-height ensures that text doesn’t feel cramped or overly spaced out, and makes content easier to scan.

🧬 Syntax

selector {
  line-height: normal | number | length | percentage | inherit;
}

Value Types:

ValueDescription
normalBrowser-default spacing (usually about 1.2x font size)
<number>A unitless multiplier of the element’s font size (e.g., 1.5)
<length>Fixed spacing (e.g., 20px, 1.2em)
<percentage>Percentage of the element’s font size (e.g., 150%)
inheritInherits the value from the parent element

🎯 Example Usage

1. Using a Unitless Multiplier (Recommended)

p {
  font-size: 16px;
  line-height: 1.5;
}

This sets the line height to 1.5× the font size, or 24px in this case. Unitless values are inherited proportionally, making them ideal for scalable, responsive design.

2. Using Fixed Units

h1 {
  line-height: 48px;
}

This gives a heading a consistent vertical rhythm, but won’t scale naturally across different screen sizes.

3. Using Percentages

.article-text {
  line-height: 150%;
}

This sets the line height to 150% of the font size — similar to using a unitless 1.5.

🧠 How It Works

  • Unitless numbers (like 1.5) are multiplied by the font size and scale well across child elements.
  • Fixed units apply a set height, useful for pixel-perfect layouts.
  • Normal is browser-defined and varies slightly between fonts/browsers.
  • Larger line-heights improve readability in body text, while smaller ones may be used for headings.

🛠️ Best Practices

  • For body text, use a line-height of 1.4 to 1.6 for comfortable reading.
  • Prefer unitless values for flexibility, especially in responsive designs.
  • Be careful with very tight line spacing (< 1.2) — it can reduce readability.
  • Combine with good font-size and letter-spacing for clean typography.
  • Use tools like vertical rhythm calculators to create consistent layouts.

✅ Browser Support

The line-height property is fully supported in all browsers:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Internet Explorer 6+

🔚 Conclusion

The line-height property is essential for creating visually pleasant and readable text. Whether you’re designing blogs, marketing pages, or UI components, understanding how to manage vertical space ensures that your typography feels professional and effortless.