A power function raises a base to an exponent: pow(base, exponent). For example, pow(2, 3) is 8. Positive exponents increase a value by repeated scaling; negative exponents reduce it. section 3.2.4
In CSS, pow() is useful when each design step should multiply rather than add. A typographic scale can keep 1rem as its base size and use a ratio such as 1.25 for progressively larger headings or smaller supporting text. section 3.2.4 section 3.7
For a scale based on calc(1rem * pow(1.25, step)):
- Use step 0 for the unchanged base size: 1rem. section 3.2.4
- Use positive steps for larger text; step 3 multiplies the base by 1.25 raised to 3. section 3.2.4
- Use negative steps for smaller text; steps -1 and -2 create caption and footnote sizes below the base. section 3.2.4
Exponential type scale
Assign each element a --step custom property, then calculate font-size with calc(1rem * pow(1.25, var(--step))). The same rule can size headings, body text, captions, and footnotes while the step controls the result. section 3.2.4
Listing 3.12 An exponential typographic scale using pow()
<head>
<style>
.scale {
font-size: calc(1rem * pow(1.25, var(--step)));
}
.step-3 { --step: 3; }
.step-2 { --step: 2; }
.step-1 { --step: 1; }
.step-0 { --step: 0; }
.step--1 { --step: -1; }
.step--2 { --step: -2; }
</style>
</head>
<body>
<h1 class="scale step-3">Heading (Step 3)</h1>
<h2 class="scale step-2">Subheading (Step 2)</h2>
<h3 class="scale step-1">Section title (Step 1)</h3>
<p class="scale step-0">Body text (Step 0)</p>
<p class="scale step--1">Small caption (Step -1)</p>
<p class="scale step--2">Footnote (Step -2)</p>
</body>
Inspect a complete scale where one pow() formula serves six text roles through different positive, zero, and negative steps. section 3.2.4
Use a larger base ratio when the interface needs more aggressive growth. CSS pow() is supported in Chrome 120+, Firefox 118+, and Safari 15.4+; JavaScript provides the equivalent Math.pow(). section 3.2.4
