CSS clamp() Generator
Generate a fluid CSS clamp() value for responsive typography — set min/max font size and viewport range and copy the math-perfect clamp() line.
How to Use
- Set the minimum font size (in px) you want at the smallest screen.
- Set the maximum font size (in px) you want at the largest screen.
- Set the minimum and maximum viewport widths (in px) where those sizes lock in — commonly 320 and 1280.
- Leave the root font size at 16 unless your html element uses a different base for rem conversion.
- Watch the live preview sentence scale as you resize your browser window, and check the computed breakpoints.
- Click Copy to grab the ready-to-paste font-size: clamp(...) declaration.
font-size: clamp(1rem, 0.6rem + 1.25vw, 2rem);
The quick brown fox jumps over the lazy dog.
How the clamp() math works
A fluid clamp() value has three parts: a lower bound, a preferred expression, and an upper bound — written clamp(MIN, PREFERRED, MAX). The browser computes the preferred value and then snaps it back into range if it falls below the minimum or above the maximum. For responsive typography the preferred value is a straight line: a vw term that scales with the viewport, plus a rem intercept that anchors the line so it passes through your exact target sizes at your two chosen viewport widths.
Picture a graph with viewport width along the bottom and font size up the side. You want the line to hit your minimum size at the minimum viewport and your maximum size at the maximum viewport. The slope of that line is the rise over the run: the difference in font sizes divided by the difference in viewport widths. Because 1vw equals one hundredth of the viewport width, multiplying the slope by 100 converts it into a number of vw units. The intercept is where the line would cross a zero-width viewport, found by subtracting slope × minViewport from the minimum size. Dividing the pixel values by your root font size converts them to rem so the result still respects user zoom.
The formulas
Why keep a rem term — accessibility
It is tempting to write a preferred value made purely of vw, but that breaks browser text-zoom: a viewport-width unit ignores the user’s chosen default font size, so increasing text size in the browser does nothing, which can fail WCAG 1.4.4 (resize text up to 200%). This generator always emits a rem intercept alongside the vw term. Because part of the expression is relative to the root font size, a reader who bumps up their default size still gets larger text, and the fluid scaling continues to work. The minimum and maximum bounds are likewise expressed in rem for the same reason. The net effect is responsive type that scales with the screen and respects the reader’s preferences — the modern, accessible default. Everything is computed in your browser; nothing is uploaded.
About the CSS clamp() Generator
Use the CSS clamp() Generator — a free, easy tool for web development and data tasks. Nothing is uploaded, and you do not need an account. Generate a fluid CSS clamp() value for responsive typography — set min/max font size and viewport range and copy the math-perfect clamp() line.
How it works
Pick your options and the tool makes the result right away. Do not like it? Make another one — you can do this as many times as you want. When it looks right, copy it into your own project. Everything is made on your device, so it is yours alone.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What does CSS clamp() do?
clamp(MIN, PREFERRED, MAX) returns the PREFERRED value but never lets it drop below MIN or rise above MAX. For typography the preferred value is a viewport-relative expression, so the text grows smoothly with the screen and then locks at sensible limits. It replaces the old pattern of stacking multiple media queries to step font sizes up and down.
What is fluid typography?
Fluid typography means the font size scales continuously between a minimum and a maximum as the viewport width changes, rather than jumping at fixed breakpoints. Instead of "18px on mobile, 24px on desktop" with a hard switch, the size interpolates linearly across the whole range, so every screen width gets a proportionate size and there are no abrupt steps.
Why combine vw with rem in the preferred value?
The vw part is what makes the text scale with the viewport; the rem part is the intercept that anchors the line so it passes through your exact min and max at the chosen breakpoints. A pure vw value would either be too small on phones or too large on desktops. Adding the rem intercept tilts and offsets the line precisely, and keeping it in rem (rather than px) means it still respects the user's root font size.
Does pure vw scaling cause accessibility problems with zoom?
A preferred value built only from vw units does not respond to browser text-zoom, because vw is tied to the viewport, not the font size — that can fail WCAG 1.4.4 (resize text up to 200%). Mixing in a rem term, as this generator does, restores zoom support: because part of the expression is relative to the root font size, increasing the user's default text size still enlarges the result. Always keeping a rem component is the recommended, accessible approach.
How should I choose the min and max sizes and viewports?
Pick the min font size from how small the text may safely get on a phone (often 16–18px for body copy to stay legible), and the max from your desktop design. Set the min viewport to your smallest target device width (commonly 320px) and the max viewport to where your layout stops widening (1140–1440px is typical). The wider the viewport range, the gentler the scaling.
Is clamp() supported in browsers?
Yes. clamp(), min(), and max() are supported in all modern browsers — Chrome, Edge, Firefox, and Safari — and have been for years (since roughly 2020). They are part of CSS Values and Units Level 4. For very old browsers you can supply a static font-size first as a fallback, and the clamp() line will override it where supported.
How do I use the CSS clamp() Generator?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Do I need to install or sign up for anything?
Not at all — it runs in the browser with nothing to install and no account. After it loads once, it even works without an internet connection.
Is my information private?
Yes. Everything happens in your browser. Nothing you type is sent to a server or saved anywhere.
Common Use Cases
Responsive headings
Make h1/h2 scale smoothly from mobile to desktop without writing breakpoint after breakpoint.
Fluid body copy
Keep paragraph text comfortably readable on phones while letting it grow on large screens.
Design-system type scale
Generate consistent clamp() values for every step of a modular type scale.
Fluid spacing and gaps
The same min/max/viewport math works for padding, margins, and grid gaps, not just font size.
Hero and landing sections
Dial in oversized display text that fills the hero on desktop but stays sane on mobile.
Replacing media-query soup
Collapse several font-size media queries into a single accessible, math-driven line.
Last updated: