When to use clamp instead of media queries?

When you want a value to scale gradually with the viewport, not in discrete jumps. For typography, clamp is almost always better.

CSS clamp() Generator

Q: What does clamp() do?

clamp(min, ideal, max) constrains a value between a minimum and maximum, scaling between them based on viewport. Ideal for fluid typography.

Q: Is clamp() well supported?

Yes — full support in every modern browser since 2020. No fallback needed.

What clamp() is

clamp() is a CSS math function that takes three values: min, ideal and max. It returns the ideal, but bounded by the extremes. It is the most practical tool for fluid typography and any value that should scale smoothly with viewport width.

Syntax

font-size: clamp(MIN, IDEAL, MAX);

Concrete example: clamp(16px, 4vw, 32px). The browser uses 4vw as preferred, but never below 16 or above 32. At 400px viewport, 4vw is 16px (equal to min). At 800px, 4vw is 32px (equal to max). Between them, linear scaling.

Why it beats media queries

One line instead of three or four media queries.
Continuous scaling: no visible jumps as the user resizes.
More predictable: define two extremes, the rest is computed.
Less code, fewer breakpoints to maintain.

How the formula is built

For the scaling to be exact between two viewports, the ideal value uses vw plus a rem offset:

slope = (maxSize - minSize) / (maxVw - minVw)
yAxisIntersection = -minVw * slope + minSize
preferred = yAxisIntersection rem + slope * 100 vw

This generator computes that exact formula so the size scales linearly between your min and max viewport. Outside that range, clamp pins it.

Use cases

Responsive typography: titles that grow smoothly from mobile to desktop.
Spacing: padding, margin, gap that scale with the viewport.
Widths: containers with fluid max-width.
Icons: proportional sizes without falling below a legible minimum.

Best practices

Always define a legible minimum. For body text, do not go below 14–16 px. For headings, set a reasonable max: on ultra-wide displays an h1 with no cap looks silly. Test your clamp by resizing from 320 to 1920 and confirm it looks right at every intermediate size.

Browser support

Full support since 2020 in Chrome, Firefox, Safari and Edge. No fallback needed. If your audience includes very old browsers, add a static font-size before the clamp line as a fallback.

FAQ

What does clamp() do?

Constrains a value between a min and max, with fluid scaling in between.

Is clamp well supported?

Yes, full support in modern browsers since 2020. No fallback needed.

When to use it over media queries?

When you want gradual scaling instead of discrete jumps. For typography, clamp wins almost every time.