Give me a value at a small viewport and at a large viewport — I'll fit a straight line between them, express the slope in vw + rem, and wrap it in clamp(min, preferred, max). Perfect for font-size, padding, radius, or any spacing token that should scale smoothly with the browser width without touching a media query.
Below the min viewport the value is pinned to the min. Above the max viewport it's pinned to the max. In between it scales linearly — the accent line is the preferred term inside clamp().
Preferred term. A straight line through the two endpoints has slope m = (v₂ − v₁) / (w₂ − w₁) and intercept b = v₁ − m·w₁. Since 1vw = 1 % of the viewport width, the slope is expressed as (100·m) vw and the intercept is emitted in your chosen unit. That's the middle argument of clamp().
Min / Max terms. These pin the value below w₁ and above w₂. Emitted in the same unit as the preferred term for the cleanest reading.
Why rem, not px. A user who bumps their browser's base font size to 20px expects your layout to grow with them. If both the slope and the constants are expressed in rem, the whole line scales with root font size and honours that user preference — one of the quiet accessibility wins clamp() gives you almost for free.
Direction guard. If min value is larger than max value, the browser evaluates clamp() as max(MIN, min(preferred, MAX)) — MIN wins over MAX so the value stays pinned at MIN forever. This tool flags that combination as a warning.