CSS Clamp Generator

Fluid typography replaces a ladder of media-query breakpoints with one line of CSS: the size grows smoothly with the screen between a minimum and a maximum. Enter the smallest size you want (on a phone), the largest (on a desktop), and the viewport widths where growth should start and stop, and this generator writes the clamp() for you — with the in-between "preferred" value worked out so the size hits your minimum exactly at the narrow viewport and your maximum exactly at the wide one.

The output uses rem for the bounds and the fixed part of the preferred value, so it still respects a visitor who has set a larger default font size in their browser — px output is available in Options if you need it. Options can also switch the fluid unit from vw to the container query unit cqi, which makes a component scale with its container instead of the whole window, and set the property (padding, gap, margin) when you're making fluid spacing rather than type.

Type scale mode

A fluid type scale applies the same idea to a whole set of sizes. Pick a base size and a ratio for small screens and for large ones — say a 1.2 minor third on phones and a 1.25 major third on desktops — and every step is generated as a CSS custom property, from --step--2 for small print to --step-5 for the hero heading. Headings get proportionally more dramatic as the screen widens, while body text barely moves, which is exactly how hand-tuned responsive type behaves.

The zoom check (WCAG 1.4.4)

Fluid type has a known accessibility trap. When someone zooms the page, the browser shrinks the viewport in CSS pixels, so a size made mostly of vw grows much less than the zoom level — and can fail WCAG 1.4.4, which requires text to be resizable to 200%. The rule of thumb is to keep the maximum within 2.5× the minimum, because 500% zoom (the browser maximum) times the minimum must still reach twice the maximum. The generator applies that rule and also simulates zoom across window widths, and tells you where and by how much a size falls short.

Common uses

• Replace breakpoint-by-breakpoint font sizes with one fluid font-size declaration
• Build a fluid modular type scale as CSS variables for a design system or Tailwind theme
• Make padding, gaps, and section spacing grow with the screen
• Check an existing fluid design for zoom accessibility problems

Example

Size:     16px → 20px
Viewport: 320px → 1240px

font-size: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);

The preferred value is the straight line through (320px, 16px) and (1240px, 20px): it rises 4px over 920px of width, a slope of 0.4348vw, from an intercept of 14.61px (0.913rem).

Limitations

• The zoom check models standard browser zoom. Text-only zoom and a larger default font size scale rem but not vw, so a size that is mostly vw responds weakly to those as well — another reason to keep the ratio modest.
• Values are rounded to 4 decimal places, which can be off by a fraction of a pixel at the extremes; browsers round to device pixels anyway.
• cqi only works inside an element with container-type: inline-size; without one it falls back to the small viewport size.

How does CSS clamp() work for font sizes?

clamp(MIN, PREFERRED, MAX) returns the preferred value, but never less than MIN or more than MAX. For fluid type the preferred value mixes a fixed part and a viewport part, like 0.913rem + 0.4348vw, so the size grows steadily with the window and stops at the bounds. One declaration replaces several media queries.

How is the preferred value in clamp() calculated?

It is the straight line through your two points. The slope is (max size − min size) ÷ (max viewport − min viewport), written as slope × 100 in vw. The intercept is min size − slope × min viewport, written in rem. For 16px→20px over 320px→1240px: slope = 4 ÷ 920 = 0.4348vw, intercept = 14.61px = 0.913rem.

Is fluid typography accessible?

It can be, if the range is modest. Because zooming shrinks the viewport in CSS pixels, vw-based text doesn't grow as much as the zoom level, and a large max-to-min ratio can stop text from reaching the 200% WCAG 1.4.4 requires. Keeping the max within 2.5× the min, and using rem rather than px for the bounds, avoids the problem; the generator flags any size that breaks the rule.

Should I use rem or px in clamp()?

Use rem for the min, max, and fixed part of the preferred value. Rem scales with the visitor's default font size setting, while px ignores it. The vw part can't respect that setting either way, which is why the min and max bounds — the parts users can control — should be rem.

What viewport widths should I use for fluid type?

A common choice is 320px (small phones) to somewhere between 1240px and 1440px (laptop and desktop content widths). Below the minimum and above the maximum the size stays fixed, so pick the maximum where your layout stops getting wider.

What is a fluid type scale?

A modular scale multiplies a base size by a ratio for each step up (and divides for each step down). A fluid type scale uses a smaller ratio on small screens and a larger one on large screens, so headings grow faster than body text as the window widens. Each step becomes a clamp() stored in a custom property such as --step-3.

Can I use clamp() for spacing and with container queries?

Yes. clamp() works for any length, so the same math gives fluid padding, margins, and gaps — set the CSS property in Options. Switch the fluid unit to cqi to scale with the nearest container that has container-type: inline-size instead of the viewport, which suits reusable components.