The Math Behind CSS Clamp: How the Formula Actually Works

Two Known Points Define a Line

The preferred value inside clamp() is calculated using linear interpolation — the same math behind drawing a straight line through two known points. Here, the two points are: the target font size at your minimum viewport width, and the target font size at your maximum viewport width.

The Formula

slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - (slope × minViewport)

The slope becomes your vw coefficient — how many viewport-width units the font grows for every unit the viewport widens. The intercept becomes your rem base value — a fixed starting size.

A Worked Example

Say you want text to scale from 24px at a 320px viewport, up to 48px at a 1280px viewport:

slope = (48 - 24) / (1280 - 320) = 24 / 960 = 0.025
intercept = 24 - (0.025 × 320) = 24 - 8 = 16

A slope of 0.025 translates to 2.5vw (multiply by 100 to convert to a percentage-style viewport unit). An intercept of 16px translates to 1rem (16px is the standard default root font size). The resulting declaration:

font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);

Verifying It Works

At exactly 320px viewport width: 2.5vw is 8px, plus 1rem (16px), totals 24px — exactly the minimum. At exactly 1280px: 2.5vw is 32px, plus 16px, totals 48px — exactly the maximum. Everywhere in between, the formula produces a proportionally correct value along that straight line.

Why a Tool Beats Doing This by Hand

The math itself isn't difficult, but doing it correctly, converting between px, rem, and vw consistently, and avoiding small arithmetic slips is tedious enough that a calculator genuinely saves meaningful time and avoids easy-to-make errors, especially across a full set of type scale steps.