CSS clamp() calculator

Fluid typography scales text smoothly with the viewport instead of jumping at breakpoints. CSS clamp(min, preferred, max) makes this possible in a single line: the preferred value uses viewport units to grow with the screen, while min and max keep it within sensible limits. Working out the preferred value requires a little algebra, which this calculator does for you.

How to use it

1. Enter the minimum size and the viewport width at which it applies, for example 16 px at 360 px.
2. Enter the maximum size and its viewport width, for example 24 px at 1280 px.
3. Copy the generated clamp() value.

The math

Slope = (max size - min size) / (max viewport - min viewport). Intercept = min size - slope × min viewport. The preferred value is intercept + slope × 100vw.

Worked example

16 px at 360 px to 24 px at 1280 px: slope = 8 / 920 = 0.0087, so 0.87vw. Intercept = 16 - 0.0087 × 360 = 12.87 px = 0.804rem. Result:

font-size: clamp(1rem, 0.804rem + 0.87vw, 1.5rem);

At 360 px wide the text is 16 px, at 1280 px and wider it is 24 px, and in between it scales linearly.

Accessibility notes

• Always include a rem component in the preferred value. Pure vw sizes do not respond to browser zoom or the user's font-size setting, which can fail WCAG 1.4.4 (resize text).
• Keep the ratio between max and min modest for body text; large jumps are better suited to headings.
• The same technique works for padding, gaps and margins to create fluid spacing.