CSS Clamp Calculator

Before clamp(), responsive typography meant a media query for every breakpoint. With clamp(), scaling happens continuously between two screen sizes.

The CSS `clamp(min, preferred-value, max)` is a mathematical function that constrains a value between a minimum and a maximum. For fluid typography, the preferred value is a combination of `vw` (viewport width) with a fixed `rem` offset, geometrically derived from the target font sizes and viewport widths. The slope formula is simple: `(maxPx - minPx) / (maxVp - minVp)`. The intercept positions the line at the origin. The result is text that scales pixel-by-pixel between viewports with no jumps at all.

Set the extremes and let the math work.

1. Define the minimum and maximum size (in px or rem) and the bounding viewports where each size applies.
2. Review the detailed calculation with slope and intercept, then check the three-scale preview.
3. Copy the CSS and paste it into your token file or global CSS variable.

Use this tool on your site

<iframe
  src="https://jkit.tools/embed/en-US/css-clamp-calculator"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="CSS Clamp Calculator"
></iframe>

Sources and references for this tool

These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.

• clamp()MDN Web Docs, Clamp function reference with examples for fluid typography and spacing.
• CSS Values and Units Module Level 4, clamp()W3C, Formal specification of CSS math functions including clamp().
• Fluid Typography, Josh W. ComeauJosh W. Comeau, Reference technical article on the slope-intercept formula for fluid typography with clamp().

Frequently asked questions

Where to go next