Line height in CSS - Performance & Optimization

Performance: Line height

MEDIUM IMPACT

Line height affects text layout and vertical spacing, impacting layout stability and paint performance.

Setting line height for readable text without causing layout shifts

CSS

p { line-height: 1.5; }

Using a fixed numeric line height ensures consistent spacing, reducing layout shifts and reflows.

📈 Performance Gainreduces CLS and limits reflows to initial layout only

Setting line height for readable text without causing layout shifts

CSS

p { line-height: normal; }

Using 'normal' lets browsers calculate line height differently, causing inconsistent spacing and layout shifts.

📉 Performance Costtriggers multiple reflows on font load and layout shifts during page interaction

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using 'normal' line-height	Minimal	Multiple on font load and resize	Medium	[X] Bad
Using fixed numeric line-height (e.g., 1.5)	Minimal	Single initial reflow	Low	[OK] Good

Rendering Pipeline

Line height influences the Style Calculation and Layout stages by determining vertical spacing of text lines. Changes cause reflows and repaints.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout

Core Web Vital Affected

CLS

Line height affects text layout and vertical spacing, impacting layout stability and paint performance.

Optimization Tips

1Use numeric line-height values instead of 'normal' for consistent spacing.

2Avoid changing line-height dynamically to prevent layout thrashing.

3Consistent line-height reduces layout shifts improving CLS scores.

Performance Quiz - 3 Questions

How does using 'normal' line-height affect page performance?

A Causes inconsistent spacing and layout shifts triggering multiple reflows

B Improves paint speed by reducing layout calculations

C Has no impact on rendering performance

D Reduces bundle size significantly

DevTools: Performance

How to check: Record a performance profile while loading the page and resizing text. Look for Layout and Recalculate Style events.

What to look for: Frequent Layout events indicate costly reflows caused by unstable line heights.