Typography scale generation in SASS - Performance & Optimization

Performance: Typography scale generation

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how font sizes are calculated and applied across the site.

Generating consistent font sizes across a website

SASS

$font-size-base: 1rem;
$scale-ratio: 1.25;

@function type-scale($step) {
  @return $font-size-base * pow($scale-ratio, $step);
}

h1 { font-size: type-scale(3); }
h2 { font-size: type-scale(2); }
h3 { font-size: type-scale(1); }
p { font-size: type-scale(0); }

Using a function to generate sizes reduces repetition and keeps CSS smaller and more maintainable.

📈 Performance GainSaves CSS size and reduces parsing time by avoiding repeated manual values.

Generating consistent font sizes across a website

SASS

$font-size-base: 16px;

h1 { font-size: $font-size-base * 2.5; }
h2 { font-size: $font-size-base * 2; }
h3 { font-size: $font-size-base * 1.75; }
p { font-size: $font-size-base; }

Repeating manual calculations for each element leads to duplicated CSS and larger file size.

📉 Performance CostAdds extra CSS bytes and can increase parsing time slightly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual repeated font sizes	Minimal	Multiple reflows if sizes change dynamically	Medium paint cost due to text rendering	[X] Bad
Function-based scale generation	Minimal	Single reflow on load	Lower paint cost with consistent sizes	[OK] Good
Loop with runtime calculations	Minimal	Multiple reflows if recalculated often	Higher paint cost	[!] OK
Precomputed size list	Minimal	Single reflow	Lowest paint cost	[OK] Good

Rendering Pipeline

Typography scale generation affects the Style Calculation and Layout stages by defining font sizes that influence text layout and reflows.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive because font size changes can trigger reflows of text blocks.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how font sizes are calculated and applied across the site.

Optimization Tips

1Use Sass functions to generate font sizes instead of manual repetition.

2Precompute font sizes in lists to reduce Sass compile time and CSS size.

3Minimize the number of unique font-size declarations to reduce layout reflows.

Performance Quiz - 3 Questions

How does using a function to generate a typography scale in Sass affect CSS size?

A It has no effect on CSS size.

B It increases CSS size because functions add extra code.

C It reduces CSS size by avoiding repeated manual font-size declarations.

D It causes the browser to download fonts multiple times.

DevTools: Performance

How to check: Record a page load and interaction; look for Layout and Recalculate Style events in the flame chart.

What to look for: Long Layout or Style Recalculation times indicate typography scale inefficiencies causing reflows.