CSS clamp() Calculator
Fluid sizing between two viewports, no media queries.
How the formula works
clamp(min, preferred, max) lets an element scale fluidly: it never goes below min, never above max, and follows the preferred value in between. The calculator derives the preferred value so the size hits your minimum exactly at the small viewport and your maximum at the large one — a linear slope expressed as calc(Xrem + Yvw), the core of every fluid-typography system.
The result: headlines that read well on a 360px phone and a 1440px monitor with zero media queries. One declaration replaces a stack of breakpoint overrides, and the scale is perfectly continuous so there are no jumps when the window crosses a breakpoint.
FAQ
Should I use rem or px for min/max?
rem respects the user's browser font-size preference — better for accessibility. Viewport slope (vw) is unavoidable inside the calc; the rem base keeps the floor user-scaled.
Can I use this for spacing too?
Yes — the same math produces fluid padding and margins. Many design systems define a "space scale" of 4-5 clamp() values used site-wide.
What if my min viewport is larger than max?
Swap the values — min viewport must be smaller than max viewport, and min size smaller than max size, for a valid slope.