CSS clamp() Calculator
A CSS clamp calculator takes the guesswork out of fluid typography: enter a minimum size, a maximum size, and the viewport range — all in px — and it outputs a ready-to-paste clamp() declaration. Instead of writing media queries for every heading, one line of CSS scales your text smoothly between breakpoints. This guide explains the math behind the preferred value, when to use rem over px, and how to apply the same technique to spacing.
The quick brown fox jumps over the lazy dog.
font-size: clamp(1rem, ...);
How the clamp() formula actually works
clamp() takes three arguments — clamp(minimum, preferred, maximum) — and the browser picks the middle value: it never goes below the minimum, never above the maximum, and tracks the preferred value in between. The preferred value is where the fluid behavior lives. It is a linear function of the viewport width, derived from your four inputs:
slope = (max-size − min-size) / (max-viewport − min-viewport)
preferred = intercept + slope × 100vw
where intercept = min-size − slope × min-viewportA concrete example: minimum 16px at a 320px viewport, maximum 32px at a 1280px viewport. The slope is (32 − 16) / (1280 − 320) = 0.0167, which becomes 1.6667vw. The intercept is 16 − 0.0167 × 320 = 10.67px, or 0.6667rem. The calculator outputs:
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);At 320px the middle term equals exactly 16px, at 1280px it equals exactly 32px, and everywhere between it glides smoothly. Below 320px the minimum wins; above 1280px the maximum wins. Knowing this math lets you sanity-check any generated value: if the middle term doesn't look like a blend of rem and vw, something is off.
Use rem, not px, for accessible fluid type
Browser zoom multiplies CSS pixels, so clamp() never blocks zooming — but your choice of units still matters. A px minimum ignores a visitor's preferred default font size, while rem respects it: if someone sets their browser default to 20px instead of 16px, every rem-based size grows proportionally. For body text and headings, always generate the clamp() value in rem and reserve px for fixed details like hairline borders. This tool takes px inputs and converts the output to rem using the root font size you set. Also keep the minimum readable — fluid type shrinking to 10px on a phone fails real users even when the math is elegant, so a 14–16px floor for body text is a safer starting point.
Beyond font-size: fluid spacing and layout
The same formula works for any length property. Fluid spacing keeps a design's proportions consistent instead of jumping between breakpoints — and this tool's Property dropdown generates the declaration for font-size, padding, margin, gap, or width directly:
/* section padding that breathes with the viewport */
padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
/* gaps, radii, and container widths work too */
gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
border-radius: clamp(0.5rem, 0.25rem + 1vw, 1rem);
max-width: clamp(20rem, 10rem + 30vw, 60rem);One caution: don't make everything fluid. Borders, icon sizes, and 1px dividers usually look better fixed. Use clamp() for the measurements that define rhythm — type scale, section padding, grid gaps — and leave the details alone.
How to use it
- Enter the smallest and largest sizes in px, plus the viewport widths where they apply — 360px and 1440px are the defaults.
- Set the root font size (16px default) — it controls the px-to-rem conversion in the output — and pick the CSS property from the dropdown.
- Drag the Preview viewport slider to watch the sample text scale live between your settings.
- Copy the generated declaration and paste it into your CSS. Add a static fallback line yourself if you support browsers older than 2020 (see below).
How it works
The calculator finds the straight line between your two (viewport, size) points, then expresses that line as rem + vw so it renders identically to a real CSS engine. The min and max in the clamp() call are your two boundary sizes, converted to rem using the root font size you set.
Limitations
This assumes a linear relationship between viewport and size, which is what clamp() itself does — it won't produce eased or stepped scaling. It also assumes your root font size doesn't change at different breakpoints; if it does, the rem-based output will be slightly off.
Fallback for older browsers
clamp() works in every modern browser released since 2020. If you support anything older, declare a static size first — browsers that don't understand clamp() ignore the second line and keep the first:
h1 {
font-size: 2rem; /* fallback */
font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}Frequently asked questions
- What does CSS clamp() actually do?
- clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max. It's most often used to scale font size or spacing smoothly with the viewport, without a set of fixed breakpoints.
- Why does the preferred value use rem and vw together?
- The vw part makes the size scale with the viewport; the rem part is a fixed offset so the math works out to your exact min and max at the two ends of the range. Mixing them is what makes the curve linear between those two points.
- Does this replace media queries entirely?
- No. clamp() is great for values that should scale smoothly, like type size or padding. Layout changes, like switching from one column to three, still need a media query.
- Why rem instead of px in the output?
- rem respects a user's browser font-size setting, which px ignores. This calculator assumes a 16px root font size unless you change it below.
- Does clamp() work in all browsers?
- All modern browsers since 2020: Chrome 79+, Firefox 75+, Safari 13.1+, and Edge 79+. For older browsers, put a static font-size declaration on the line before the clamp() declaration as a fallback — unsupported browsers ignore what they cannot parse and keep the static value.
- Why is my clamp() text not scaling?
- Three usual causes: the minimum is larger than the maximum, which collapses the function to a fixed size; the viewport range is inverted; or a later rule with higher specificity overrides it. Open DevTools, inspect the computed font-size, and check which declaration actually wins.
- Can I use clamp() for padding and margins?
- Yes — clamp() accepts any CSS length, so padding, margin, gap, border-radius, and max-width all work. Fluid spacing keeps vertical rhythm proportional across screen sizes. This tool's Property dropdown generates the declaration for font-size, padding, margin, gap, or width directly. Keep 1px details like borders fixed, and reserve fluid values for the measurements that define the layout's rhythm.