CSS Fundamentals

CSS Line Height

⏱ 7 min read📖 Beginner

The line-height property controls the vertical space between lines of text. A unitless number like 1.6 is the recommended way to set it — it multiplies the font size and scales automatically when the font size changes.

p {
  line-height: 1.6;
}

h1 {
  line-height: 1.1;
}

Let me ask you something.

Have you ever tried to read a paragraph on a website and it just felt exhausting? The lines were packed so tightly together that your eye kept losing its place. You kept rereading the same line over and over.

That is a line height problem.

Line height is one of those things that nobody notices when it is right. But when it is wrong it makes reading feel like work. Getting it right is one of the easiest ways to make your page feel more professional and comfortable.

Let me show you how it works.

What is Line Height

Line height is the vertical space between lines of text. Think of it like the spacing between lines in a notebook. Too tight and everything feels cramped. Too loose and the paragraph feels disconnected and hard to follow.

In CSS you control it with the line-height property.

At 1 the lines are packed tightly together. Reading it feels uncomfortable.

Now try this.

Immediately more breathable. The lines have space between them and your eye can follow each one naturally without getting lost.

How Line Height Values Work

You can set line height in a few different ways.

A unitless number — like 1.6 or 2. This is the recommended way. The number is a multiplier of the font size. So if your font size is 16px and your line height is 1.6 the actual line height becomes 25.6px.
px — a fixed pixel value. Like line-height: 24px. This works but it does not scale if you change the font size later.
% — a percentage of the font size. Like line-height: 160%. Works the same as the unitless number but less commonly used.

The unitless number is the best choice almost every time. It stays proportional to the font size automatically.

Three paragraphs, same text, completely different feel. The tight one feels cramped. The loose one feels disconnected. The normal one feels just right.

💡

For body text most designers use a line height between 1.5 and 1.8. This is the sweet spot that feels comfortable to read on screens. For headings you can go tighter — around 1.1 to 1.3 — because headings are usually short and do not wrap across many lines.

Line Height on Headings

Line height matters on headings too especially when they are long enough to wrap onto two lines.

A tight line height on a big heading looks sharp and intentional. If you left it at the default the gap between the two lines would feel too large and the heading would look broken in two.

💡

Whenever you have a large heading that wraps onto two or more lines always check the line height. The default browser line height on headings is usually too loose and makes them look disconnected. Bring it down to around 1.1 or 1.2 and it will look much tighter and more professional.

Building the Netflix Clone

Let us add proper line heights to our Netflix clone. The paragraphs especially need some breathing room.

The headings feel tight and bold. The paragraphs breathe comfortably. Everything has its own rhythm now.

In the next lesson I am going to show you padding — the space inside an element between its content and its edges. It is one of the most used properties in CSS and once you understand it everything about layout starts to click. Come on in.

Learn about Padding →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.