Pick a size at a small viewport and a size at a wide one and get the clamp() that glides between them, as CSS, a Tailwind arbitrary value or an @theme token, read out at five real widths.
Ship the interface, keep the code
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
A preferred value written in vw alone is pinned to the window, so a reader who zooms in with the browser gets exactly the size they had before, which fails accessibility audits. Adding the rem intercept lets the value scale with their font setting while still following the viewport.
The two ends where you stop caring: a small phone at around 320 to 375px and the widest layout you design for, often 1280 or 1440px. Between them the size is a straight line; outside them it is clamped, so wider screens never get comically large type.
Yes. clamp() is a length, so the same expression works for padding, gap or a max-width. Paste the CSS into any property, or drop the @theme token into --spacing-fluid and use it as a utility.