CSS clamp calculator
Create fluid font sizes and scrub the viewport to preview the interpolation.
How it works & useful details
How to use this tool
Set minimum and maximum font sizes with viewport endpoints. Scrub the viewport slider to see the calculated size between them.
Supported values and limitations
All endpoint inputs use CSS pixels. Rem output uses the explicit root-size assumption; changing user font settings changes endpoints. The live sample uses the calculated pixel size for the selected simulated viewport. Coefficients are rounded to six decimal places. Test zoom and text resizing in your own page.
About this tool
CSS clamp calculator turns a minimum and maximum size into a fluid clamp() expression with a viewport-based middle value. Scrubbing the viewport in the preview shows how the value interpolates between breakpoints.
The generated expression is ready to paste into your stylesheet, and the preview is scoped to the tool. All math runs locally from the sizes and viewport range you provide.
How to use it
- Enter the minimum and maximum size and the viewport range where the scaling happens.
- Scrub the preview viewport to watch the value change.
- Review the generated clamp() expression and the computed slope.
- Copy the declaration into your CSS.
Worked example
Font size growing from 16px at a 360px viewport to 32px at 1280px:
font-size: clamp(1rem, 0.608696rem + 1.73913vw, 2rem);The preferred value is a straight line through both points. The slope is (32 − 16) ÷ (1280 − 360) = 0.0173913, which is 1.73913vw. The intercept is 16 − 0.0173913 × 360 = 9.739px, or 0.608696rem. Below 360px the size stays at 1rem, and above 1280px at 2rem.
Why use rem in the formula
Expressing the minimum, maximum, and intercept in rem means the text still responds to the reader's browser font-size setting. A purely vw-based size does not grow when a user increases their default font size. That is an accessibility failure under WCAG 1.4.4 (resize text). Always test zooming to 200% with fluid type.
Fluid sizing works well for headings and hero text, where the range between mobile and desktop is large. For body text, a modest range such as 16px to 18px keeps reading comfortable. Combine with a type scale to size a whole heading hierarchy consistently.
Frequently asked questions
What does the middle value in clamp() do?
It scales linearly with the viewport between the minimum and maximum bounds, keeping text fluid within a controlled range.
Why does my clamp() stop changing at very small viewports?
The minimum bound takes over once the computed value would fall below it, which is the intended protection against unreadably small text.
Can I use clamp() for spacing as well as font sizes?
Yes. The generated expression works for any length value, including margins, padding, and gaps.
What does the viewport slider do?
It shows the computed size at any viewport width between your endpoints, so you can check intermediate sizes such as tablets without resizing the browser.