CSS Clamp Calculator

What this tool is used for

• Producing a fluid type size that scales between two viewport widths.
• Getting clamp values for spacing that grows with the viewport.
• Replacing a set of breakpoint overrides with one fluid value.
• Comparing two scaling rates before choosing one.
• Producing a value a designer specified as a range.

Frequently Asked Questions

How does clamp() produce fluid typography?

`clamp(min, preferred, max)` picks the preferred value unless it falls outside the bounds. Making the preferred term a linear function of viewport width — a rem base plus a vw slope — gives a size that scales smoothly between two viewports and stops at each end.

How is the slope calculated?

From the two points you supply: slope = (maxVal − minVal) ÷ (maxVp − minVp), converted to vw by multiplying by 100. The intercept is then whatever makes the line pass through the minimum point. It is the equation of a line through two coordinates, expressed in CSS units.

Why should the intercept be in rem rather than px?

Because a px-only clamp ignores the user's browser font-size setting entirely, which fails WCAG 1.4.4 — text must be resizable to 200%. Keeping the constant term in rem means a user who sets a larger default still gets larger text at every viewport.

Does clamp() replace media queries for type?

For scaling a single value, yes, and it does it more smoothly — no jump at a breakpoint. What it cannot do is change something non-numeric, like switching a heading from two lines to one or altering letter-spacing at a size where the fluid value stops looking right.

What viewport range should I use?

320px to 1440px covers phone to laptop and is the default here. Going wider makes the slope shallower, so the text barely moves across the common range; going narrower makes it steep enough to overshoot noticeably just outside the bounds before clamping catches it.

Common errors and gotchas

• Using viewport units without a minimum, so text becomes unreadable on small screens.
• Scaling type so aggressively that it breaks the type scale's relationships.
• Preventing the user from zooming effectively by pinning sizes to the viewport.
• Getting the preferred term's slope wrong, so the value hits its bounds too early.
• Using clamp for a value that should snap at a breakpoint rather than scale smoothly.