Calculate fluid clamp() values for font sizes and spacing between two viewport widths.
Loading tool
About CSS Clamp Calculator
Calculates a CSS clamp() value that grows linearly from a minimum size at one viewport width to a maximum size at another and stays fixed outside that range. Enter sizes in px or rem, the viewport range and root font size, and get the clamp() expression in rem or px along with the slope, vw value and intercept used. A type scale mode generates a full set of --step custom properties from separate ratios at the small and large viewport, and a slider previews the computed size at any width.
Common uses
- Make headings scale smoothly between mobile and desktop without media queries
- Generate a fluid modular type scale as CSS variables
- Create fluid spacing values for padding and gaps
- Check the exact font size a clamp() resolves to at a given viewport width
FAQ
- How does CSS clamp() work?
- clamp(MIN, PREFERRED, MAX) uses the preferred value but never goes below MIN or above MAX. For fluid type the preferred value is usually a rem value plus a vw value, so it grows with the viewport.
- How is the vw value calculated?
- slope = (max size - min size) / (max viewport - min viewport), and the vw value is slope x 100. The intercept is min size - slope x min viewport, which becomes the rem part of the expression.
- Why combine rem and vw instead of using only vw?
- A size in pure vw ignores the user's browser font-size setting. Including a rem part keeps part of the size tied to that setting, and the rem-based MIN and MAX bounds follow it too.