CSS clamp() Calculator (Fluid Typography)
Generate fluid, responsive font sizes and spacing with CSS clamp() — set min/max size and viewport range and get a copy-ready value with a live scaling preview. Free.
💡 About clamp()
clamp(MIN, PREFERRED, MAX)scales a value fluidly between two viewport widths, then stops.- Great for responsive font sizes, spacing, and padding without media queries.
- The preferred value mixes
remandvwso it respects user font-size settings.
Free CSS clamp() Calculator (Fluid Typography)
Generate fluid, responsive font sizes and spacing with CSS clamp(). Enter your minimum and maximum size and viewport range, and get a ready-to-copy clamp() value — with a live preview that shows exactly how it scales as the viewport changes. Free, no sign-up, runs in your browser.
What is CSS clamp()?
clamp() is a CSS function that takes three values — a minimum, a preferred, and a maximum — and returns the preferred value, but never lower than the minimum or higher than the maximum. Paired with viewport units, it creates fluid typography and spacing that scales smoothly with the screen size and then locks at sensible limits. It replaces stacks of media queries with a single, elegant line.
How to use the clamp calculator
It is instant:
- Enter the minimum size (for small screens) and the maximum size (for large screens).
- Enter the viewport range over which it should scale, in pixels.
- Copy the generated clamp() value.
- Drag the preview slider to watch the size scale and clamp at the limits.
How the fluid value is calculated
The calculator works out a linear equation that passes through your two points: the minimum size at the minimum viewport, and the maximum size at the maximum viewport. It expresses the preferred value as a rem base plus a vw slope, so the text scales with the viewport while still respecting the user's root font size. clamp() then bounds that preferred value between your minimum and maximum, so it grows smoothly in the middle and holds steady outside your range.
Why use rem plus vw instead of just vw
A preferred value built only from vw ignores the user's browser font-size preference, which is an accessibility problem. By combining a rem component with the vw component, the value still honours a user who has increased their base font size, while remaining fluid across viewports. This calculator always outputs the rem-plus-vw form for exactly this reason, so your fluid type stays accessible.
Where to use clamp()
clamp() shines for anything that should scale between breakpoints: heading and body font sizes, section padding and margins, gaps in a layout, and container widths. Define a min and max that look good at the smallest and largest screens you support, and let clamp() handle everything in between. The result is typography and spacing that feel intentional at every width, with far less CSS than a media-query approach.
Pro tip
Keep the minimum and maximum sizes reasonably close for body text so it never becomes uncomfortably large or small, and give headings a wider range for more dramatic scaling. Reuse a consistent viewport range across your type scale so everything grows in harmony. Combine this with our PX to REM Converter when you prefer to think in pixels.
FAQ
Is this clamp() calculator free?
What does CSS clamp() do?
How does clamp() replace media queries?
Why does the preferred value use rem and vw together?
Can I use clamp() for spacing and padding too?
What viewport range should I use?
Does clamp() work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Flexbox Generator for a faster SEO workflow.