Fluid clamp() generator
Set a minimum size and a maximum size. Then set the screen width for each size. The tool makes a clamp() value that increases smoothly between the 2 widths. Paste the value into a Webflow size field.
clamp(2rem, 1.2958rem + 3.0047vw, 4rem)Fluid heading
How to use it
- Set the minimum size and the maximum size.
- Set the screen width for each size.
- Copy the clamp() value into Webflow.
How the tool makes the value
The format is clamp(MIN, PREFERRED, MAX). PREFERRED is a rem value plus a vw value. Between the 2 widths, the size changes in a straight line. Outside the 2 widths, the size stays at the minimum or the maximum.
How to use clamp() in Webflow
Webflow accepts clamp() in size fields. Type the value into Font size, padding or gap. Set the value 1 time on the base breakpoint. You do not need a different value for each breakpoint.
Questions
Is clamp() accessible?
Yes, if you use rem for the minimum and the maximum. Then text changes with the browser zoom of the visitor. For body text, keep the maximum below approximately 2.5× the minimum.
Do all browsers support clamp()?
Yes. All current browsers support clamp().