Introduction to line-height in CSS 🧵

The line-height property controls the vertical spacing between lines of text. It's one of the most important typography-related properties in CSS because it directly affects readability, aesthetics, and layout structure. Whether you’re working with paragraphs, headings, or UI text — mastering line-height is essential! 🔥

Why Use line-height? 🤔

Syntax 📌

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

Available Values 🧩

1. normal

The browser’s default line height. Usually between 1.1 and 1.4, depending on the font.

2. <number> (Recommended) 👍

A multiplier of the font size. Example: line-height: 1.5; means 150% of the font size.

3. <length>

A fixed value such as 20px, 1.5rem, etc. Best for precise control, but not responsive.

4. <percentage>

Calculated based on the element’s font size. Example: 150%.

Examples 🔥

1. Using Number (Most Common) ✨

p {
  line-height: 1.6;
}

2. Using Pixels (Fixed spacing) 📏

p {
  line-height: 24px;
}

3. Using Percentage (%)

p {
  line-height: 150%;
}

4. Tight vs Loose Line Height 🔍

.tight {
  line-height: 1.1;
}

.loose {
  line-height: 2;
}

Comparison Table 📚

Visual Example 🖼️

How different line-heights look:

Conclusion 🎉

The line-height property is crucial for improving text readability and visual structure. By adjusting spacing between lines, you can create clean, accessible, and beautifully designed content. Start experimenting with 1.4–1.8 for paragraphs — your readers will thank you! 🚀