CSS clamp() Calculator for Fluid Typography
Build a font-size that scales smoothly with the viewport, written as clamp(min, preferred, max). Enter the minimum and maximum sizes and the viewport widths where each applies. You may also like the px to rem Converter and the Viewport Checker.
🔒 Runs in your browser · Your data is never sent to a server
How to use
- Enter the minimum and maximum sizes in px.
- Enter the viewport width (px) that each size applies to.
- Choose the output unit (rem or px), then copy the clamp() expression into your CSS.
Notes
- The preferred value combines an intercept with a vw term (e.g. 0.8333rem + 0.8333vw), so the size changes linearly between the two viewport widths and stops at the min/max outside that range.
- rem output is converted using the base font size (the html font-size, usually 16px). It respects the user's browser text-size setting, so rem is the better choice for accessibility.
- Sizing text with vw alone can ignore browser zoom, so the preferred value always includes a rem (or px) intercept.
- If the min size is larger than the max size (text shrinks on wider screens), the first and last clamp() arguments are swapped automatically.
- Results are rounded to 4 decimal places.
Glossary
clamp()
A CSS math function, clamp(min, preferred, max), that keeps a value within a range. If the preferred value is below the min, the min is used; if above the max, the max is used.
Fluid typography
Font sizes that change continuously with the viewport width. Unlike stepping sizes with media queries, intermediate widths get a naturally interpolated size.
vw
A CSS unit equal to 1% of the viewport width. 100vw is the full width of the viewport.
FAQ
How is the preferred value (the part with vw) calculated?
slope = (max size - min size) / (max width - min width), intercept = min size - slope x min width. The preferred value is "intercept + slope x 100vw", giving the min size at the min width and the max size at the max width.
Should I output rem or px?
rem is usually better because it follows the user's browser text-size setting. rem values are converted with the base font size (normally 16px).
Why does the preferred value include an intercept, not just vw?
A vw-only value does not react well to browser zoom or text enlargement. Adding a rem (or px) intercept keeps text readable when zoomed while still scaling with the viewport.
Can the min size be larger than the max size?
Yes. For text that shrinks on wider screens, the first and last clamp() arguments are swapped automatically so the smaller value comes first.
Share this page