CSS clamp() Formula

The four inputs

This example starts at 16px when the viewport is 320px wide and reaches 20px at 1280px.

minimum size:      16px
maximum size:      20px
minimum viewport: 320px
maximum viewport: 1280px

1. Calculate the slope

Divide the change in font size by the change in viewport width.

slope = (20 - 16) / (1280 - 320)
      = 4 / 960
      = 0.0041667

Because one vw equals one percent of the viewport width, multiply the slope by 100. The viewport part is 0.4167vw.

2. Calculate the intercept

Subtract the slope multiplied by the minimum viewport from the minimum font size.

intercept = 16 - (0.0041667 × 320)
          = 14.6667px
          = 0.9167rem  /* at a 16px root size */

3. Put the line inside clamp()

font-size: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);

At 320px, the preferred value resolves to about 16px. At 1280px, it resolves to about 20px. Below and above those viewports, the minimum and maximum bounds stop it from moving further.

A reusable formula

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

font-size: clamp(minRem, interceptRem + coefficientVw, maxRem);

Keep the bounds in remso they follow the user's root text setting. Then test the result at 200% zoom; correct arithmetic does not guarantee that a component still wraps or reflows well.

Reference: MDN explains the three clamp() arguments and accessibility considerations. The CSS Values and Units specification defines the comparison function.

Generate the clamp values

Next, use the accessible fluid typography checklist, or return to the fluid typography guide.

For work across type tokens, components, and implementation, review the design system service.