</> Dev Tools

CSS clamp() Calculator for Fluid Typography

Pick your min and max viewport widths, your min and max sizes. Get the exact clamp() value, scrub a live preview across every viewport, and copy production-ready CSS.

✓ Pure CSS output ✓ Live preview ✓ rem & px ✓ No signup
px
px
px
where scaling starts
px
where scaling stops
px
browser default is 16px — change only if you override html { font-size: ... }
font-size
font-size: clamp(1rem, 0.667rem + 1.667vw, 1.5rem);
Live preview 800 px
The quick brown fox
computed: 20.00px
200 px simulated viewport width 1920 px
ViewportComputed sizeNotes

What clamp() actually does

The CSS clamp() function takes three values: a minimum, a preferred, and a maximum. At any given viewport width, the browser evaluates the preferred value and returns it if it falls between the bounds. Otherwise it returns the nearest bound. The result is a single property declaration that scales smoothly across viewport widths without media queries or visual "jumps."

The preferred value is a linear formula in vw units. The formula is what this calculator generates — it solves the line between your two points (min-vw, min-size) and (max-vw, max-size), then outputs the slope and intercept in the form a + b·vw.

The formula, plainly

If your minimum size is S₁ at viewport width V₁, and your maximum size is S₂ at viewport width V₂:

The full output is clamp(min, intercept + slope·vw, max). The calculator above does this math for you and formats the output for both rem and px.

When to use clamp()

Use it for things that should scale with the viewport but stay within sane limits:

Don't use it for things that should be the same on every screen — icon sizes, border widths, fixed UI element heights. Fluidity is a feature, not a default.

Why rem instead of px?

The calculator defaults to rem because rem respects the user's browser font-size setting. A user who has bumped their default from 16px to 20px for accessibility reasons still gets proportionally larger text. Hard-coding px values everywhere is the most common accessibility regression in modern CSS.

If your codebase is all px and changing it is more work than it's worth, the calculator outputs px values too — just toggle the unit.

Common gotchas

Looking for the next engineering role?

Browse engineering jobs at companies vetted for actual engineering culture.

Browse Engineering Jobs →

More Dev Tools

JSON Formatter Regex Tester Cron Builder HTTP Status Codes JWT Decoder Conventional Commits CIDR Calculator All Dev Tools →

Frequently Asked Questions

What is the CSS clamp() function?+
clamp() is a CSS function that takes three values — a minimum, a preferred value, and a maximum — and returns the preferred value if it falls between the minimum and maximum, otherwise it returns the nearest bound. It's used to create fluid typography and spacing that scales smoothly with viewport width while staying within safe limits.
Why use clamp() instead of media queries?+
Media queries create discrete jumps at fixed breakpoints — a heading might be 24px at 767px wide and suddenly 32px at 768px. clamp() interpolates continuously, so the heading scales fluidly across every viewport width. It removes the visual "jump" and dramatically reduces the number of media queries you need to write.
What's the difference between vw and clamp()?+
Pure vw units scale linearly without bounds — a font-size of 4vw is huge on a desktop and tiny on a phone. clamp() lets you cap both ends, so the size scales fluidly between two viewport widths but never goes below your minimum or above your maximum. clamp() uses vw under the hood for the preferred value but adds bounds.
Should I use clamp() for everything?+
clamp() is best for things that should scale with viewport — type, hero spacing, gap sizes, and large layout dimensions. It's overkill for things like icon sizes, border widths, and fixed UI elements that should be the same on every screen. Use it where fluidity adds value; stick to fixed values where it doesn't.
Is clamp() supported in all browsers?+
Yes — clamp() has been supported in all modern browsers (Chrome, Safari, Firefox, Edge) since 2020. It's safe to use in production. If you need to support older browsers, provide a static fallback before the clamp() line.
Why does the calculator use rem instead of px?+
rem units respect the user's browser font-size setting, which matters for accessibility — users who increase their default font size for readability still get scaled-up text. The calculator outputs both rem and px so you can choose what fits your codebase, but rem is generally the better default for fluid type.
How do I pick min and max viewport widths?+
Common defaults are 320px (small phone) to 1280px (laptop) or 1440px (desktop). The min is the smallest viewport you want to support; the max is the viewport at which the type should stop growing. Outside this range, clamp() clamps to your min or max size.