Fluid Type Clamp Calculator

This free clamp calculator generates modern, fluid clamp() typography that scales smoothly between two viewport widths. Build multi-step type scales, preview the curve on a live graph, and export ready-to-paste CSS or SCSS with shareable links. Everything runs right in your browser, so your values never touch a server. There’s no signup, no tracking, and complete privacy while you fine-tune your fluid typography.

clamp(min, intercept + slope×unit, max)

How to use the clamp calculator

1. Set your minimum viewport (for example 320px) and maximum viewport (for example 1240px). These are the two screen widths your type will scale between.
2. Enter a minimum font size for the small viewport and a maximum font size for the large viewport, in pixels or rem.
3. Watch the live graph plot how the size grows as the viewport widens, then flattens once it hits your maximum.
4. Add more steps to build a complete type scale — headings, body, captions — all sharing the same min and max viewports.
5. Copy the generated clamp() value, export the full scale as CSS or SCSS custom properties, or grab a shareable link to send the exact configuration to a teammate.

How CSS clamp() works

The CSS clamp() function takes three arguments: clamp(MIN, PREFERRED, MAX). The browser uses the preferred value, but never lets it drop below the minimum or rise above the maximum. For fluid typography, the preferred value is a viewport-relative expression, so the font size tracks the screen size between two clamps. A real token looks like this:

font-size: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);

Here the text never shrinks below 1rem on narrow screens and never grows past 1.5rem on wide ones, while the middle term drives the smooth transition in between. Because the calculation happens natively in the browser, there’s no JavaScript and no layout thrash — the value recalculates as the viewport changes.

Why fluid typography beats fixed breakpoints

Traditional responsive design snaps font sizes at a handful of media-query breakpoints. A heading might be 24px below 768px and jump to 40px above it, leaving an awkward gap at every threshold and nothing tuned for the widths in between. Fluid typography replaces those jumps with one continuous curve. The text grows by a fraction of a pixel for every pixel of viewport width, so a 900px tablet and a 1400px laptop each get a size that fits, not a one-size-fits-a-range compromise.

The maintenance win is just as real. Instead of redeclaring sizes across three or four breakpoints for every element in your scale, you set a min and a max once and let clamp() interpolate. That means dramatically fewer media queries, less duplicated CSS, and a type system that stays consistent as your design grows. A clamp calculator does the slope math for you so you never have to hand-derive the vw coefficient.

How the preferred value is computed

The middle argument is the engine of fluid typography, and it’s built from two parts: a fixed rem base plus a vw slope, for example 0.75rem + 1.25vw. The slope (the vw term) sets how fast the size changes as the viewport widens, and the base (the rem term) anchors the line so it passes through your exact minimum and maximum at the chosen viewport widths. The calculator solves for both from the four numbers you supply — min size, max size, min viewport, max viewport — using simple linear interpolation.

It’s tempting to skip the rem base and write something like font-size: 4vw. Don’t. A pure vw value ignores the user’s browser settings, and critically it breaks zoom: when someone zooms in to read more comfortably, a vw-only size stays locked to the viewport and refuses to grow, which is a real accessibility failure. Pairing rem with vw fixes this — the rem portion responds to the user’s root font size and zoom level, so the text still scales up when people need it to. The rem+vw combination is what keeps fluid type both responsive and accessible.

Building a full fluid type scale

A single fluid value is useful, but the real payoff is a coordinated scale where every step shares the same minimum and maximum viewports. That shared range means all your text — from fine print to hero headings — reaches its largest size at the same screen width, keeping visual rhythm intact as the layout grows. The table below shows a five-step scale clamping between a 320px and 1240px viewport.

Export the whole set as custom properties — --step-0, --step-1, and so on — and reference them throughout your stylesheet. Update a viewport bound once and every step re-derives in lockstep.

Using clamp() beyond font size

Fluid type is the headline use, but clamp() works on any length-valued property, so the same min + rem/vw + max pattern that scales your headings can scale the space around them. Reach for it on padding, margin, gap, border-radius, and even width. Fluid spacing is what makes a layout feel like it was designed for the screen rather than stretched to fit it: cards breathe a little more on a wide desktop, sections tighten up on a phone, and you write zero media queries to get there.

The trick is to give your spacing the same shared viewport range as your type scale. When padding, gutters, and font sizes all reach their maximum at the same screen width, the whole composition grows in proportion instead of drifting out of rhythm. The recipes below clamp between a 320px and 1240px viewport — the same bounds used for the type scale above — so you can drop them straight into the same system.

Container widths benefit too. A wrapper written as width: clamp(20rem, 90vw, 70rem) stays comfortably padded on small screens, fills most of the viewport in the middle range, and caps out at a readable maximum on large monitors — one declaration replacing a stack of breakpoints.

clamp() vs min() and max()

CSS ships three comparison functions, and clamp() is really the other two combined. min() returns the smallest of its arguments, which counterintuitively sets a maximum ceiling: width: min(70rem, 90vw) never exceeds 70rem. max() returns the largest, setting a floor: width: max(20rem, 50%) never drops below 20rem. clamp(MIN, PREFERRED, MAX) enforces both bounds at once, which is exactly what fluid sizing needs.

The functions are formally related: clamp(a, b, c) is equivalent to max(a, min(b, c)). You can even pass the none keyword to leave one side unbounded, so clamp(a, b, none) behaves like max(a, b). Use plain min() or max() when you only need to limit one direction; reach for clamp() whenever a value should flex freely between a defined floor and ceiling.

Frequently asked questions

What does clamp() do in CSS?

CSS clamp() returns a value bounded by a minimum and maximum: clamp(MIN, PREFERRED, MAX). It picks the preferred value but clamps it to the floor or ceiling, which makes it perfect for sizes that should flex within safe limits.

What is fluid typography?

Fluid typography is type that scales continuously with the viewport instead of jumping at fixed breakpoints. Using clamp() with a vw-based preferred value, font sizes grow smoothly from a minimum on small screens to a maximum on large ones.

Why shouldn’t I use vw alone?

A pure vw font size doesn’t respond to browser zoom or the user’s root font-size preference, so people who zoom in to read get no help — an accessibility problem. Combining rem with vw keeps the text zoomable while still being fluid.

What’s the browser support for clamp()?

The clamp() function is supported in all current major browsers, including Chrome, Edge, Firefox, and Safari. It’s been broadly available for years, so for modern projects you can use it without a fallback in most cases.

How do I pick good min and max sizes?

Choose a comfortable minimum for the smallest screen you support (often a phone around 320–360px) and a maximum that looks balanced on a large desktop. Keep body text readable at the minimum — usually around 16px — and let headings have a wider range for more contrast.

Can I use clamp() for spacing, not just type?

Yes. The same min + rem/vw + max pattern works for margins, padding, gaps, and section spacing. Fluid spacing keeps your layout’s rhythm proportional to the screen, and this clamp calculator’s output applies anywhere a length is valid.

What viewport range should I use?

Set the minimum viewport to the narrowest device you design for and the maximum to where you want the scaling to stop — commonly the width of your content container, such as 1200–1440px. Beyond the max viewport the size holds steady at your maximum.

Is the clamp calculator free and private?

Completely. It’s free with no signup, and it runs entirely in your browser. None of your values are uploaded or stored on a server, so your work stays private.

What’s the difference between clamp(), min(), and max()?

min() picks the smallest value (acting as a maximum cap), max() picks the largest (acting as a minimum floor), and clamp() applies both at once. In fact clamp(a, b, c) equals max(a, min(b, c)), so use the single-bound functions when you only need to limit one side.

Can I use clamp() to set a fluid container width?

Yes. Something like width: clamp(20rem, 90vw, 70rem) gives a wrapper a sensible minimum on phones, scales with the viewport in the middle, and stops at a readable maximum on large screens — a flexible alternative to a fixed max-width plus media queries.

Does clamp() work for grid and flexbox gaps?

It does. Because gap accepts a length, you can write gap: clamp(1rem, 0.5rem + 1.5vw, 2rem) on any grid or flex container, and the spacing between items scales fluidly with the viewport just like fluid type.

Related design tools & guides

• Aspect Ratio Calculator — lock proportions for images, video, and responsive embeds.
• Cubic Bezier Editor — craft custom CSS easing curves for animations and transitions.
• Font Converter — convert between web font formats for faster, lighter pages.
• Browse all design tools — the full set of free, browser-based utilities.