CSS Clamp Calculator

What is CSS clamp()?

clamp() is a CSS function that takes three arguments: a minimum, a preferred value, and a maximum. The browser uses the preferred value when it falls between the min and max; otherwise it uses the min or max. For fluid typography you write something like clamp(1rem, 2vw + 1rem, 2rem) so font size scales with viewport but never goes below 1rem or above 2rem—without any media queries.

clamp() vs media queries

Media queries give you discrete breakpoints: one set of values below 768px, another above. Fluid values with clamp() scale continuously between two viewport widths. That often looks smoother and requires less CSS. Use media queries when you need layout or content changes at breakpoints; use clamp when you only need a value to scale smoothly.

px vs rem for fluid typography

rem is relative to the root font size, so it respects user preferences (e.g. larger default font). That makes rem a good choice for accessibility. px is fixed and doesn’t scale with user settings. For min and max in your clamp, many teams use rem so that the whole scale respects the root font size. Viewport units in the preferred part (e.g. vw) are the same in both cases.

When NOT to use clamp()

Avoid clamp when you need exact pixel values at specific breakpoints (e.g. design specs that must match at 375px and 1440px exactly). Don’t use it for layout-critical values where a small change could cause overflow or overlap—test on real devices. For very small ranges (e.g. 14px–15px), a fixed value or a single media query may be simpler.

Accessibility considerations

Ensure minimum font sizes stay readable (e.g. at least 16px or 1rem for body). Use rem so users who increase their default font size get a proportional scale. Test with zoom and with narrow viewports to make sure text doesn’t become too small. Avoid using clamp for line-height in a way that could make lines overlap at small sizes.