CSS Type Scale with pow()
CSS type scale with pow()
The old way required Sass or JavaScript to compute exponential type scales. pow() does the math at runtime in the browser so you control the base and ratio with custom properties.
// Sass — computed at build time, ratio is baked in@use "sass:math";$base: 1rem;$ratio: 1.25;h1 { font-size: $base * math.pow($ratio, 4); } // 2.441remh2 { font-size: $base * math.pow($ratio, 3); } // 1.953remh3 { font-size: $base * math.pow($ratio, 2); } // 1.563remh4 { font-size: $base * math.pow($ratio, 1); } // 1.25remh5 { font-size: $base * math.pow($ratio, 0); } // 1rem:root { --scale-base: 1rem; --scale-ratio: 1.25;}h1 { font-size: calc(var(--scale-base) * pow(var(--scale-ratio), 4)); }h2 { font-size: calc(var(--scale-base) * pow(var(--scale-ratio), 3)); }h3 { font-size: calc(var(--scale-base) * pow(var(--scale-ratio), 2)); }h4 { font-size: calc(var(--scale-base) * pow(var(--scale-ratio), 1)); }h5 { font-size: calc(var(--scale-base) * pow(var(--scale-ratio), 0)); }pow Browser Support
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
pow() is Baseline 2023 (Newly available). Supported in Chrome 120+, Firefox 118+, Safari 15.4+, Edge 120+. Consider providing hardcoded fallback sizes for older browsers.
No build step
Sass math.pow() runs at compile time. CSS pow() runs in the browser, so the values are live custom properties you can swap at runtime without rebuilding.
One variable to tune
Change --scale-ratio and every heading updates. Change --scale-base and the whole scale shifts. Two knobs, consistent math.
Composable with clamp()
Wrap each size in clamp() to add fluid scaling on top of the modular ratio. The two techniques combine without conflict.
How it works
A modular type scale sets heading sizes using a fixed ratio. If your ratio is 1.25 and your base is 1rem, h4 is 1.25rem, h3 is 1.5625rem, h2 is 1.953rem, h1 is 2.441rem. The sizes are not arbitrary — they come from multiplying the base by the ratio raised to a power.
Before pow(), you had two options. Compute the values by hand and paste them in as magic numbers, or use Sass math.pow() to compute them at build time. Either way, the ratio was baked into the output. You could not change it in the browser.
pow(base, exponent) is a CSS math function that returns a number. Inside calc(), you can use it with custom properties: calc(var(--scale-base) * pow(var(--scale-ratio), 3)). The browser evaluates it fresh every time the custom property changes, which means theming, user preferences, or JavaScript overrides work without a rebuild.