CSS Clamp Calculator — Fluid Typography & Spacing

What clamp() actually does

CSS clamp(min, preferred, max) takes three values and returns the middle one — clamped to the range between min and max. It was added in CSS Values Level 4 and has full browser support since April 2020, which means every user on the planet now has it.

On its own clamp() is unremarkable. It becomes powerful when the preferred value is a linear function of the viewport width, turningclamp() into a concise way to build fluid responsive typography and spacing without media queries. No breakpoints, no sudden jumps, no JavaScript.

The formula

The preferred value has the shape slope * 100vw + intercept:

slope      = (maxSize - minSize) / (maxViewport - minViewport)
intercept  = minSize - slope * minViewport
preferred  = (slope * 100)vw + intercept

At minViewport the preferred value equals minSize. At maxViewport it equals maxSize. Between them it interpolates linearly. Outside that range, clamp() pins it to the bounds.

Example: fluid body text from 16px at 320px wide to 18px at 1280px wide.

font-size: clamp(1rem, 0.208vw + 0.958rem, 1.125rem);

The 0.208vwis the slope — at 1280px that's 2.66px, plus the 15.33px intercept = 18px. The clamp() ensures the size never drops below 1rem or climbs above 1.125rem even if the viewport stretches outside the design range.

How to use this tool

1. Pick a preset (Body text, H1 hero, H2 section, Small caption, Section padding) or enter custom values
2. Set the size range — the font size (or any length) at the minimum and maximum viewports
3. Set the viewport range — the narrow and wide breakpoints where your design should hit its extremes. Common values: 320px (small phone) → 1280px (laptop) → 1440px (wide desktop)
4. Choose the output unit: rem (recommended — respects user font-size preferences) or px
5. Copy the clamp() value or the full font-size: ... line
6. Check the preview row — shows the computed size at 320 / 640 / 1024 / 1440 viewport widths, with a live sample character in each

Why rem over px

Output in remis the recommended default because it respects the user's browser font-size preference. If a user sets their browser base font to 20px (because they prefer larger text), rem-based values scale proportionally. Px-based values stay hard-coded and ignore the preference. This is an accessibility win with zero cost.

The one time px makes sense is for things that genuinely must not scale with font preferences — border widths, tiny icons, pixel-perfect layouts. For typography and spacing, use rem.

Real-world patterns

Fluid body text

16px at 320px wide, 18px at 1280px wide. Slow, subtle scaling that keeps reading comfortable on any device without ever getting cramped on mobile or too big on desktop.

body {
  font-size: clamp(1rem, 0.208vw + 0.958rem, 1.125rem);
}

Dramatic hero headline

32px at 320px wide, 72px at 1440px wide. Aggressive scaling so the headline dominates on desktop without overflowing on mobile. Pair with text-wrap: balance if you want the browser to even out line lengths.

h1 {
  font-size: clamp(2rem, 3.571vw + 1.286rem, 4.5rem);
  text-wrap: balance;
}

Responsive section padding

The same trick works for any length value, not just font-size. 32px padding on mobile, 96px on wide desktop:

section {
  padding-block: clamp(2rem, 5.714vw + 1.143rem, 6rem);
}

Container max-width with fluid margins

Clamp is also great for container widths. A reading column that's 90% of viewport on mobile, caps at 720px on desktop:

.prose { width: clamp(20rem, 90vw, 45rem); margin-inline: auto; }

Accessibility — the 5x rule

WCAG 1.4.4 ("Resize text") requires that text can be resized up to 200% without loss of function. Pure-vw sizes (like font-size: 4vw) fail this because they ignore the user's zoom level entirely. Clamp with a rem-based intercept passes because the rem portion responds to zoom.

Rule of thumb: keep the slope modest. If maxSize / minSize is more than 5, your typography will feel wildly different between mobile and desktop. A 2–3x range is usually safe for body text; 4–6x is acceptable for display headings.

Common mistakes

• Using px in the intercept instead of rem: breaks user zoom. Always use rem for the constant term. This tool defaults to rem output
• Swapping min and max: clamp(2rem, 1vw + 1rem, 1rem) is a contradiction — the browser handles it by picking min or max depending on which is "larger" in the current context, which is unpredictable. This tool warns when you enter invalid bounds
• Forgetting that viewport units ignore scrollbars: on Windows with visible scrollbars, 100vw can be ~17px wider than the visible area, causing horizontal overflow. Use 100% on containers and 100svw (small viewport width) or 100dvw (dynamic) if you need precise width
• Too aggressive slopes: scaling from 14px to 80px across viewports creates jarring differences. Keep typographic ratios reasonable
• Using vw instead of cqw in containers: inside a container with its own container-type, you probably want container query units (cqw) not viewport units. Clamp math is the same, just swap the unit

clamp() vs media queries

Media queries give you explicit breakpoints — exactly what you want for layout shifts (single column → two columns). But for properties that should change smoothly with viewport (font size, spacing, element size), clamp() is better:

• No abrupt jumps. A media query jumps from 16px to 20px at exactly 768px wide. Clamp scales smoothly from 16px to 20px over the full range
• One line, not three. A three-step media query (mobile / tablet / desktop) becomes one clamp()
• No magic breakpoint numbers. You pick the min and max directly from the design, not from invented "mobile" and "desktop" cutoffs
• Easier to keep type scales in harmony. If body is 16→18px over 320→1280px viewports, H1 at the same slope stays proportionally larger at every width

Privacy

Everything runs in your browser. The numbers you enter never leave your device. Safe for private design systems and unreleased brand work.

Frequently asked questions

Does clamp() work inside calc()?

Yes — clamp(), min(), and max() can all be nested inside calc()or each other. Modern CSS math functions are fully composable. Most of the time you don't need the wrapping calc() — clamp does arithmetic on its arguments directly.

Can I use negative values?

Yes, for properties that accept them (margin, transform translate, etc.). For sizes that must be positive (font-size, width, padding), keep min ≥ 0 or the browser will clamp it.

Why does my slope look like a weird decimal?

The slope is (maxSize - minSize) / (maxViewport - minViewport) × 100. It's a pure ratio expressed as a vw percentage, so you get numbers like 0.208vw or 3.571vw. Don't try to round — the exactness is what keeps the curve hitting your chosen endpoints. The tool rounds to 3 decimals, which is precise enough for subpixel perfection.

How do I make the clamp fire above/below the design range?

By definition, clamp fires at its bounds outside the range you specified. At 280px wide (below your minViewport), the font size will equal your minSize. At 1600px wide (above your maxViewport), it will equal your maxSize. If you want the text to keep growing past the max, increase the maxViewport to the widest size you care about.

Does this work with container queries?

Yes. The math is identical — just replace vw with cqw (container query width) in the preferred value. All values then scale with the ancestor container instead of the viewport. Container queries need container-type: inline-size on the container.

Can I use this for anything other than font-size?

Yes — clamp() works on any length property: margin, padding, width, height, gap, border-width, border-radius, etc. Fluid spacing (sections that breathe more on desktop) is probably the second most common use after fluid typography.

Is my data sent anywhere?

No — the clamp math runs in your browser. No numbers are logged, no network calls made, and the tool works fully offline once loaded.