CSS clamp() generator
Enter the smallest and largest size and the two screen widths to get fluid type with no media queries.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter minimum size, maximum size, minimum viewport width, maximum viewport width, root font size and unit.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Slope = (max size - min size) ÷ (max width - min width). Intercept = min size - slope × min width. Value = clamp(min, intercept + slope × 100vw, max), with rem = px ÷ root font size.
Example
Inputs: Minimum size = 16 px, Maximum size = 24 px, Minimum viewport width = 320 px, Maximum viewport width = 1,280 px, Root font size = 16 px. Result: clamp() value: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem); Slope: 0.8333 vw; Intercept: 13.3333 px.
Limits and caveats
- Values are rounded to 4 decimals; the difference is a fraction of a pixel.
- Mixing rem with vw respects browser zoom better than px alone, but it does not guarantee 200% zoom in every case.
Questions about this tool
What happens outside the two widths?
The value stops at the minimum on narrower screens and at the maximum on wider ones; that is what clamp() does.
Why add rem to vw instead of vw alone?
vw alone ignores the user zooming text, while the rem part grows with browser settings.
Does it work for spacing too?
Yes. Use the same value for padding, gap or margin instead of font-size.