Line Height

In the last lesson you learned about Font Weight. That controlled how thick or thin your letters look. Now let’s look at the space between the lines of your text. This is called line height.

📏 What is Line Height?

When you write a paragraph with many lines, each line sits above the next one. The gap from one line to the next is the line height. Line height is the full height of each line of text. It includes the words plus the little bit of space above and below them.

Think of a school notebook. The ruled lines on the page are not stuck together. There is a fixed gap between each line. So your handwriting has room to breathe. Line height is that same gap, but for text on a web page.

So line height is not about the letters themselves. It is about how far apart the lines sit from each other.

🤔 Why Do We Need It?

Here is the real problem. By default, text lines can sit very close together. When the lines are too tight, your eyes get tired. You finish one line, jump to the next, and lose your place. Reading becomes hard work.

Good line height fixes this. Here is what it gives you:

• More space between lines. So each line is easy to follow.
• Text that feels calm and clean, not crammed.
• Easier reading for long paragraphs, like a blog post or a news article.

Big sites like Medium and the Netflix help pages use generous line height. Generous just means roomy, with plenty of space. That is one reason their text feels nice to read.

🧩 The Syntax

The property is called line-height. You give it a value, and that value decides the gap.

Here is the basic shape of it.

p {
  line-height: 1.5;
}

That 1.5 means each line takes one and a half times the font size. So if your font is 20px, each line will be 30px tall. A plain number like 1.5 is the best way to write it. We will see why soon.

You can write line height in a few ways. Here are the common ones.

/* ✅ Good: a plain number (no unit) */
p { line-height: 1.5; }

/* OK: a fixed pixel value */
p { line-height: 30px; }

/* OK: a percentage */
p { line-height: 150%; }

The plain number is special. A number with no unit means “this many times the font size of the element”. So the gap scales with the font. If the font grows, the gap grows too. A pixel value does not do that. It stays the same no matter what.

👀 A Simple Example

Let’s see two paragraphs. One has tight lines. The other has comfortable lines.

First the HTML with two paragraphs.

<p class="tight">This text has very little space between its lines. Read it and notice how the lines feel close and crammed together on the page.</p>

<p class="airy">This text has more space between its lines. Read it and notice how each line is easy to follow and the paragraph feels calm.</p>

Now the CSS that gives each paragraph a different line height.

.tight {
  line-height: 1;
}

.airy {
  line-height: 1.8;
}

The first paragraph uses 1. So the lines sit right on top of each other. The second uses 1.8. So there is a clear gap between every line.

The word airy here just means full of space and easy to breathe in. That is the feeling good line height gives your text.

💡 A Real Example

Imagine you are making a blog post page. The article has long paragraphs. You want people to actually finish reading.

Here you set a comfortable line height on the article text.

.article {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}

That line-height: 1.6 gives each line enough room. The font is 18px. So each line becomes about 29px tall. The text now reads like a clean article, not a wall of words stuck together.

For body text, a value between 1.4 and 1.7 works well. Headings can use a smaller value, like 1.1 or 1.2. They are big and usually short, so they do not need as much room.

⚠️ Common Mistakes

A few things trip people up with line height. Let’s go through them.

• Setting line height too small. A value like 1 or 0.9 makes lines touch and look cramped. Give your body text room.
• Setting it too big. A value like 3 spreads lines so far apart that they stop feeling like one paragraph.
• Always using a fixed px value. If the font size later changes, the gap will not grow with it. The text can then look wrong.

Here is that fixed value trap shown in code.

/* ❌ Avoid: fixed gap that ignores font size */
p { line-height: 24px; }

/* ✅ Better: gap that scales with the font */
p { line-height: 1.5; }

If the font later grows to 30px, the 24px line height becomes too small and the lines start to overlap. The plain number 1.5 would just grow along with the font.

✅ Best Practices

Keep these simple habits in mind and your text will read well.

• Use a plain number, like 1.5, not a fixed px value. It scales with the font.
• For paragraphs and body text, stay around 1.4 to 1.7.
• For large headings, use a smaller value, like 1.1 or 1.2.
• Check your text on a phone screen too. Lines that look fine on a laptop can feel tight on a small screen.

🧩 What You’ve Learned

Let’s quickly go over what we covered here.

• ✅ Line height is the space between the lines of your text, like the gap between ruled lines in a notebook.
• ✅ Good line height makes long text easy and calm to read.
• ✅ The property is line-height, and a plain number like 1.5 is the best value to use.
• ✅ A plain number scales with the font size, but a fixed px value does not.
• ✅ Body text reads well around 1.4 to 1.7, and headings use a smaller value.

🚀 What’s Next?

Now that your lines have good spacing, let’s learn how to position your text on the left, the right, or in the center of the page.

Text Alignment