0
0
CSSmarkup~8 mins

Line height in CSS - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
Using 'normal' line-heightMinimalMultiple on font load and resizeMedium[X] Bad
Using fixed numeric line-height (e.g., 1.5)MinimalSingle initial reflowLow[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
Test your performance knowledge
How does using 'normal' line-height affect page performance?
ACauses inconsistent spacing and layout shifts triggering multiple reflows
BImproves paint speed by reducing layout calculations
CHas no impact on rendering performance
DReduces 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.