CSS & Layout
Set a minimum and maximum size with the viewport range they span, and get a responsive clamp() value that scales smoothly in between — no media queries.
Live Preview
Viewport 800px → 24.0pxThe quick brown fox
The size is locked at the min below the min viewport and at the max above the max viewport, scaling linearly between. Based on a 16px root for rem conversion.
This free tool turns a minimum size, a maximum size, and a viewport range into a single CSS clamp() value, so type scales smoothly between phone and desktop without media queries.
Use it for headings and any text that should grow with the screen. One line of CSS replaces a stack of breakpoints, which keeps your stylesheet smaller and your layout calmer.
Worked example: a heading that grows from 28px at a 400px viewport to 56px at 1200px becomes clamp(1.75rem, 0.875rem + 3.5vw, 3.5rem). Enter those four numbers above to get the same result with a live preview.
Related: All tools · Palette generator · Responsive grid example