Responsive type scale with CSS clamp(), no media queries

Two ways most teams handle responsive type are bad. The first is to set body to a fixed 16px and forget it — type looks tiny on a 4K monitor and cramped on a phone. The second is to stack five media queries per heading — the CSS file doubles, and the gaps between breakpoints look like a staircase.

The right way in 2025 is CSS clamp(). One declaration per heading. Fluid resize between two viewport widths. No media queries. The trick is computing the slope and intercept correctly so the type hits exactly your minimum at the smallest viewport and exactly your maximum at the largest.

What it gives you

• Seven type levels — body, h6, h5, h4, h3, h2, h1 — generated from a base size and a scale ratio

• Two output formats — CSS custom properties + utility classes, and Tailwind fontSize config

• Eight built-in ratios from minor second (1.067, quiet) to golden (1.618, theatrical)

• Live preview at any viewport — resize your browser and watch the scale slide

The clamp() formula

For a heading that should be 20px at 360px viewport and 32px at 1400px viewport, you want:

font-size: clamp(20px, slope·vw + intercept, 32px);

Where slope = (32 − 20) / (1400 − 360) = 0.01154, expressed as 1.154vw. And intercept = 20 − 0.01154 × 360 = 15.85px. So:

font-size: clamp(20px, 1.154vw + 15.85px, 32px);

Doing that arithmetic seven times per project is annoying. This tool does it for you, across every heading level, for any base size and ratio.

Choosing a ratio

Ratios are not interchangeable. A 1.125 (major second) feels editorial — long-read newspapers, journal posts, anything you want to disappear into. A 1.333 (perfect fourth) feels confident — marketing sites, product pages, decks. A 1.618 (golden) feels theatrical — hero pages, museums, fashion. Pick the ratio that matches the room you're putting the type into, not whichever sounds prestigious.

If you don't know which to pick, start at 1.25 (major third). It works for almost everything and signals nothing in particular.

Why it has utility classes

CSS custom properties alone leave the line-height conversation unfinished. We bake matched line-heights into the utility classes — 1.05 for h1, climbing to 1.55 for body. Headings should breathe less than paragraphs. The tool's defaults are tuned for sans-serif at the default ratio; you'll want to nudge them for serif or for unusually tight scales.

Use it

Single HTML file. Open on GitHub →. Open in a browser. Slide the controls. Copy the output. Paste into your design system.