Performance: Font size
MEDIUM IMPACT
Font size affects the rendering speed and layout stability of text content on the page.
0
0
Font size in CSS - Performance & Optimization
Setting font size for responsive text
CSS
html { font-size: 100%; } body { font-size: 1rem; } h1 { font-size: 2rem; } p { font-size: 0.875rem; }Using relative units like rem scales text smoothly across devices and reduces layout shifts.
📈 Performance Gainreduces reflows on zoom and resize, improving CLS
Setting font size for responsive text
CSS
body { font-size: 16px; } h1 { font-size: 32px; } p { font-size: 14px; }Using fixed pixel sizes can cause poor scaling on different devices and trigger layout shifts when zooming or resizing.
📉 Performance Costcan cause multiple reflows on viewport changes, increasing CLS
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Fixed pixel font sizes | Minimal | Multiple on resize/zoom | Moderate | [X] Bad |
| Relative font sizes (rem, em) | Minimal | Single or none on resize | Low | [OK] Good |
Rendering Pipeline
Font size changes affect style calculation and layout stages, as text size determines element dimensions and line breaks.
→Style Calculation
→Layout
→Paint
⚠️ BottleneckLayout
Core Web Vital Affected
CLS
Font size affects the rendering speed and layout stability of text content on the page.
Optimization Tips
1Use relative font sizes like rem or em for better scaling and fewer layout shifts.
2Avoid frequent or dynamic font size changes that trigger layout recalculations.
3Test font size impact by resizing and zooming to check for layout stability.
Performance Quiz - 3 Questions
Test your performance knowledge
Which font size unit helps reduce layout shifts when users zoom or resize the browser?
DevTools: Performance
How to check: Record a performance profile while resizing the browser or zooming the page. Look for layout and paint events triggered by font size changes.
What to look for: High number of layout recalculations or long layout durations indicate costly font size usage.