CSS clamp() calculator
Generate a clamp() that scales text smoothly from small screens to large.
What clamp() does
clamp(min, preferred, max) uses the preferred value but never lets it leave the min–max range. With a preferred value of rem + vw, text grows linearly with viewport width and stops at both ends. One line replaces a stack of media queries.
The formula
A straight line through (min viewport, min size) and (max viewport, max size). Slope = (max size − min size) ÷ (max viewport − min viewport). Slope × 100 is the vw coefficient; the y-intercept is the fixed part.
Why rem instead of px
rem scales when users raise their browser's base font size. Fixing it in px ignores that setting — an accessibility failure. Use rem unless you have a specific reason not to.
Tips for common situations
Fluid Font Scaling Without Media Queries
Enter minimum and maximum font sizes in pixels along with viewport bounds to generate a precise clamp() formula using rem and vw units. Click the copy button to grab a clean, one-line CSS statement ready for your stylesheet.
Responsive Padding and Margin Values
Input your smallest mobile padding and largest desktop padding to produce a single clamp() rule that replaces repetitive @media query blocks. The generated value keeps spacing within safe minimum and maximum bounds as the viewport resizes.
Heading Hierarchy with CSS Variables
Generate clamp() values for each heading level from H1 down to body text so all sizes scale proportionally across devices. Store the computed values as CSS custom properties to maintain consistent typography across your entire site.
Tried with sample values
Screens and numbers from actually running this tool with sample values (2026-10-06, Chromium-based browser on a Mac). Results vary with your input and device.
With defaults—minimum 1 rem, maximum 2.5 rem, viewport range 360–1,280 px—the result is font-size: clamp(1rem, 0.413rem + 2.6087vw, 2.5rem). The value locks to the minimum below 360 px and to the maximum above 1,280 px.
At 768 px (tablet) the computed size is 26.6 px; at 1,280 px (laptop) it is 40 px. A copy button lets you paste the rule straight into your CSS, and because it uses rem, it scales with the user's browser font-size setting.
Frequently asked
Why not just use vw?
Pure vw gets too small on narrow screens and too large on wide ones. clamp locks the extremes.
Does this work for spacing?
Yes — the same math applies to padding, gap and margin.
Browser support?
All major browsers since 2020. Not IE, which is no longer a target.
What parameters are required to generate a fluid typography clamp() formula?
You simply enter your minimum and maximum font sizes along with the corresponding minimum and maximum viewport widths.
Can I easily copy the generated CSS clamp() value to my clipboard?
Yes, a dedicated copy button allows you to instantly copy the generated clamp() CSS rule.
Which CSS units are used in the generated clamp() formula?
The generated formula combines rem and vw units to create smooth scaling between your defined min and max bounds.
Is any account registration or subscription required to use this CSS tool?
No, the CSS clamp calculator is completely free to use directly in your browser without signing up.