Fluid Typography with One Line of clamp()

The classic approach to responsive type is a staircase: 28px base, 36px at the tablet breakpoint, 48px at desktop. Between steps, nothing changes; at each step, everything jumps. Fluid typography replaces the staircase with a ramp:

h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}

clamp(min, preferred, max) means: try the middle value, but never below the first or above the last. The middle value mixes a fixed part with a viewport-relative part, so as the screen widens, the size slides smoothly from 28px to 48px and then stops growing.

How to actually pick the numbers

Decide two anchor points, e.g. 28px at a 360px viewport and 48px at 1160px. The slope is the size difference over the viewport difference:

slope = (48 - 28) / (1160 - 360) = 0.025 = 2.5vw
intercept = 28px - (360px * 0.025) = 19px ≈ 1.2rem

Hence clamp(1.75rem, 1.2rem + 2.5vw, 3rem). Do this math once in a comment or use one of the fluid type calculators; either way, the numbers stop being mysterious.

The accessibility rule that separates good from bad fluid type

Never use a pure vw value as the preferred size. Browser zoom scales rem but not vw, so font-size: 4vw barely responds when a low-vision user zooms to 200% - a real WCAG failure. The rem component in the formula is what keeps zoom working. Rule of thumb: rem part should dominate; the vw part seasons it.

clamp() is not just for type

.container {
    /* fluid gutters: 16px floor, 5vw preferred, 64px ceiling */
    padding-inline: clamp(1rem, 5vw, 4rem);
}

.prose {
    /* line length that adapts but stays readable */
    max-width: clamp(45ch, 60vw, 75ch);
}

section {
    margin-block: clamp(3rem, 8vh, 7rem);   /* vertical rhythm scales too */
}

Fluid spacing is arguably the bigger win: sections that breathe on desktop without turning cavernous, gutters that never crush content on small phones.

Notes

• Support is everywhere (2020+). min() and max() ship alongside for one-sided constraints.
• Headlines sized with clamp() pair beautifully with text-wrap: balance - smooth size, balanced breaks.
• Keep the media-query staircase for genuine layout changes; use clamp for everything that should scale continuously.

One line per element, no breakpoints, and the design holds together at every width including the weird ones - split-screen tablets, folded phones, that one user with a 4K portrait monitor.