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.
2236 blocks and 1325 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.
Browse the blocksNo signup for the tools. MIT for free blocks, commercial licence for Pro.