CSS Clamp Generator — fluid typography & spacing

The CSS clamp generator on this page turns four simple numbers — a minimum size, a maximum size, and the viewport range you want them tied to — into a single, production-ready clamp() declaration you can paste straight into your stylesheet. No more writing five separate media queries just to get a heading that scales smoothly from a phone to a widescreen monitor.

We built this tool because it's one we reach for constantly at Arb Digital when we're hand-coding responsive typography for client sites — it's faster than doing the linear-interpolation math by hand every time, and it removes the guesswork of picking a "reasonable" vw multiplier.

What This CSS Clamp Generator Does

Modern CSS gives us a function called clamp(MIN, PREFERRED, MAX) that lets a value — most often a font-size, but it works equally well for padding, margin, gap, or width — grow and shrink fluidly with the viewport, while never dropping below a floor or exceeding a ceiling. Instead of you working out the slope-intercept form of that "preferred" middle value by hand, this generator does it instantly: type in your smallest size, your largest size, and the two viewport widths those sizes should apply at, and it outputs the exact clamp() string, ready to copy.

It also renders a live preview table so you can see, in real numbers, what the computed size will be at a handful of common screen widths — 375px (a small phone), 768px (a tablet), 1024px, 1440px, and 1920px (a large desktop) — so you're not just trusting the formula blindly.

How to Use the CSS Clamp Generator

1. Set your minimum size. This is the smallest the element should ever render, in rem units (e.g. 1rem for body text, or 1.5rem for a small heading).
2. Set your maximum size. This is the largest the element should render on a big screen, again in rem.
3. Set the min and max viewport widths in pixels — the screen width at which the min size should apply, and the width at which the max size should apply.
4. Click "Generate clamp()". The tool computes the slope and intercept of the linear ramp between those two points and assembles the full three-part clamp() value.
5. Copy the output directly into your CSS — for example, as the value of font-size on an h1, or padding on a section.
6. Check the live preview rows to confirm the computed size at 375px, 768px, 1024px, 1440px and 1920px looks right for your design.

The Formula — How clamp() Fluid Scaling Is Calculated

A fluid clamp() value has three parts: clamp(MIN, PREFERRED, MAX). The browser evaluates PREFERRED continuously and then clamps that number so it never goes below MIN or above MAX. The trick is building PREFERRED as a linear equation of the form A*vw + B, where A is a slope expressed in viewport-width units and B is a fixed offset in rem.

To find that slope and offset, we treat it as two points on a line: at the minimum viewport width, the value should equal the minimum size; at the maximum viewport width, the value should equal the maximum size. That gives us a classic slope calculation: slope = (maxSize - minSize) / (maxVw - minVw). We then convert that slope into a vw coefficient by multiplying by 100 (since 1vw = 1% of viewport width) and dividing by the root font size in pixels (to convert the rem-based sizes into the same px basis vw uses). The intercept is simply minSize - slope * minVw, expressed back in rem. The final string looks like clamp(1rem, 0.86rem + 0.71vw, 2.5rem) — exactly what this generator builds for you automatically. For the authoritative technical reference on how the browser evaluates this function, see the MDN documentation on clamp().

Why Fluid Typography Beats Fixed Breakpoints

Traditional responsive type relies on a handful of media-query "jumps" — say, 16px on mobile, 20px on tablet, 24px on desktop. The problem is the size snaps abruptly at each breakpoint instead of growing smoothly, and it does nothing useful for the (very common) viewport widths that sit between your breakpoints, like a foldable phone unfolded to 700px or a small laptop at 1152px. A clamp()-based value scales continuously across every width in between, so the type always looks proportionate to the screen it's on, and you write one line of CSS instead of four or five media queries per element.

This matters even more once you're maintaining a design system with dozens of type sizes — headings, subheadings, body copy, captions, button labels. Multiply five breakpoints by a dozen text styles and you're maintaining sixty media-query overrides. Multiply one clamp() line by a dozen text styles and you're maintaining twelve lines, full stop.

Common Use Cases Beyond Font Size

clamp() isn't limited to font-size. It works on any length-valued CSS property, which opens up a few patterns worth knowing:

• Fluid section padding — so a hero section has generous 96px padding on a widescreen monitor but tightens to 24px on a phone without a dozen media queries.
• Fluid gap in a CSS Grid or Flexbox layout — card grids that need a bit more breathing room at large sizes and a tighter gap on mobile.
• Fluid max-width on a content column — letting a text block widen gracefully on large screens while staying readable on small ones.
• Fluid border-radius or icon sizing — subtle, but it keeps small UI details visually consistent in proportion to the rest of the fluid layout.

Browser Support and Fallbacks

clamp() has been supported in all major evergreen browsers (Chrome, Firefox, Safari, Edge) since 2020, so in practice you rarely need a fallback for modern projects. If you must support a genuinely ancient browser, declare a plain fixed-size font-size rule first and then the clamp() version immediately after it in the same rule block — browsers that don't understand clamp() will simply ignore that second declaration and keep the fixed fallback, while modern browsers will use the fluid one, since the last valid declaration wins.

Building a Fluid Type Scale With Multiple clamp() Values

Most real projects don't need just one fluid size — they need a whole scale: a small caption size, a body size, a subheading, an H2, an H1, and maybe a large display heading for a hero section. A common pattern is to run this generator once per step in that scale, keeping the min and max viewport widths consistent across every step (say, 400px to 1400px, matching the defaults above) while varying only the min and max sizes per step. That consistency matters more than it might seem: if every size in your scale ramps up across the exact same viewport range, the whole page scales in visual harmony — a heading and the body text beneath it grow at proportional rates rather than one snapping ahead of the other at a different width. Many production design systems store this as a small table of "min rem / max rem" pairs and generate every clamp() value from the same two shared viewport anchors, which is exactly the workflow this tool is built to support.

It's also worth deciding, project by project, whether your min and max viewport anchors should track actual device breakpoints or your content's own natural constraints. Some teams anchor the minimum to their smallest supported phone (often 320–360px) and the maximum to a "typical" desktop content width (1200–1440px) rather than the full width of a 4K monitor, since text rarely needs to keep growing past a certain absolute size just because the window got wider — very large body text on an ultra-wide monitor usually looks worse, not better.

Testing Your clamp() Value in the Real Browser

Once you've copied a generated value into your stylesheet, don't just trust the math — open your browser's responsive design mode and physically drag the viewport width slider from your smallest supported width up to your largest. Watch specifically for two failure modes: text that clips or wraps awkwardly at your minimum width (meaning your min size might still be a touch too large for that content), and text that looks disproportionately huge relative to surrounding fixed-size elements at your maximum width (meaning your max size may need trimming, or the surrounding elements should be fluid too). It only takes a few seconds per element, and it catches the kind of subtle sizing mismatch that's easy to miss when you're only looking at the numbers this calculator outputs rather than the rendered page itself.

Common Mistakes to Avoid With clamp()

• Mixing units carelessly. Keep your min/max sizes in rem and let the middle preferred value mix rem and vw — mixing raw px into a rem-based design system breaks accessibility scaling for users who increase their browser's default font size.
• Picking a max viewport that's too small. If your max viewport is 900px, every screen above that (which is most desktops) will render at the exact same maximum size, defeating the "fluid" part of fluid typography on the screens where it matters most.
• Forgetting the min viewport can be 0. If you want scaling to start immediately, set min viewport to a very small number rather than assuming it defaults to zero — the slope still needs two real points to calculate correctly.
• Not testing the extremes. Always check the computed size at both your smallest supported phone and your largest supported monitor, not just the two viewport widths you typed in.
• Using clamp() for line-height inconsistently. If font-size scales fluidly but line-height is a fixed pixel value, text can look cramped or overly loose at the extremes — prefer unitless line-height values so they scale proportionally with the font-size automatically.

Related Free Tools From Arb Digital

Pair this generator with the CSS Specificity Calculator to debug why a style isn't applying, the CSS Minifier to ship a leaner stylesheet, the CSS Grid Generator and CSS Flexbox Generator for building the layouts your fluid type will live inside, and the Viewport Size Checker to see exactly how your live viewport compares to the breakpoints you're designing for. Browse everything in our free online tools hub.

Frequently Asked Questions