CSS clamp() Formula: Calculate Fluid Font Sizes from Two Points

Find the slope and intercept

For a font that grows from 16px at 320px viewport width to 32px at 1280px, the slope is 16 divided by 960, or one sixtieth. The line’s intercept is the starting size minus the slope multiplied by the starting width: approximately 10.6667px. A vw unit represents one percent of viewport width, so multiply the slope by 100 to obtain approximately 1.6667vw.

Convert the root-relative terms consistently

At a 16px root, the bounds become 1rem and 2rem and the intercept becomes approximately 0.6667rem. Put the intercept and viewport contribution inside calc for readability. Keep enough decimal precision to avoid visible endpoint drift. If the root size changes, rem terms change while the viewport contribution follows viewport width; the original pixel checkpoints were calculated for the supplied root assumption.

Verify the middle as well as both ends

At the midpoint viewport of 800px, the preferred size should be 24px under that same root assumption. Below the lower width it stops at the minimum, and above the upper width it stops at the maximum. Test the actual page under zoom and text resizing, especially for long headings and fixed-height controls. A mathematically correct formula does not guarantee that every layout container can accommodate enlarged text.

Worked example

font-size: clamp(1rem, calc(0.66666667rem + 1.66666667vw), 2rem);
/* 320px → 16px, 800px → 24px, 1280px → 32px at a 16px root */

Can I use identical minimum and maximum sizes?

Yes. That produces a constant size. A reversed viewport range is invalid because the two interpolation points would not define the intended interval.

Reference and further reading

Read the official documentation ↗