Unitless value
A ratio like 1.6 scales with the current font size.
Platform under construction
Line Height
Line height controls vertical breathing room inside text. It can make paragraphs calm and readable or cramped and tiring.
body { line-height: 1.6; }
h1 { line-height: 1.05; }
Typography & Visual Style
Line height decides whether text feels readable or trapped.
line-height controls the distance between text lines. It affects paragraphs, headings, buttons, navigation and form labels.
A unitless line-height is usually best because it scales with the element font size. That means child elements inherit a flexible ratio instead of a fixed pixel value.
Headings often need tighter line-height. Body text usually needs more breathing room. Interface labels need enough height to remain legible without feeling loose.
Paragraph rhythm
Long text usually needs more line-height than labels.
Heading tightness
Large headings can use tighter line-height without becoming cramped.
Inheritance
line-height is inherited, so body choices affect many children.
Visual model
Make visual decisions systematic instead of random.
Typography and visual style are where CSS starts to feel like design. These models turn subjective choices into reusable decisions you can explain, test and improve.
Display headings can be tight when words are large.
Interface headings need control and readability.
Paragraphs need air for comfortable reading.
Examples
High-end visual CSS has a reason behind every value.
Readable rhythm
body { line-height: 1.6; }
h1, h2 {
line-height: 1.05;
}
Cramped text
p {
font-size: 18px;
line-height: 18px;
}
Rules that matter
Visual style becomes professional when it becomes repeatable.
A beautiful one-off style is not enough. The goal is a visual system that keeps working when the site grows, content changes and new pages are added.
Use unitless line-height
It scales more safely through inheritance.
Give paragraphs air
Long reading text should not feel compressed.
Tighten large headings carefully
Large type often needs less line-height than body copy.
Test wrapping
A heading that looks good on one line may fail on two lines.
Avoid fixed pixel line-height for systems
It can break when font size changes.
Check buttons and labels
Small UI text still needs enough vertical room.
Production thinking
Visual polish must survive real content, real users and real devices.
Why does this matter?
Line height is invisible until it is wrong. It has a huge effect on whether people keep reading.
Accessibility
Readable line height helps users with low vision, dyslexia and zoomed text settings.
Production note
Set sensible line-height defaults at body and heading levels, then override intentionally for components.
SEO note
Comfortable reading supports longer visits and better content engagement.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change paragraph line-height to 1 and read the result.
- Change h1 line-height to 1.5 and decide if it feels loose.
- Add a longer heading and check wrapping.
Practice assignment
Do this before moving to the next lesson.
- Create one heading and two paragraphs.
- Use different line-height values for heading and body text.
- Explain why body text needs more breathing room.
Try it yourself
Tune paragraph rhythm
Self-check
Before you continue, prove that you understand Line Height.
Answer these questions before moving on. If your answer is vague, change the lab values and judge the visual result again.
- Can you explain why unitless line-height is useful?
- Can you choose a different line-height for headings and paragraphs?
- Can you spot cramped body text?
- Can you test line-height when text wraps?
- Can you avoid fixed pixel line-height in a reusable system?
Senior audit upgrade
Line-height changes by context.
Paragraph text usually needs relaxed line-height. Buttons and compact UI labels often need tighter values, but custom fonts can clip if you go too tight.
Paragraphs
Use comfortable unitless line-height for reading.
Buttons
Button text can be tighter, but height should still create a strong hit area.
Custom fonts
Test ascenders, descenders and accents so text does not clip.