AnimKit

CSS clamp() Calculator

Set a min and max size for two screen widths and copy the fluid clamp() value.

Viewport & Limits

Generated CSS
font-size: clamp(1rem, 0.3785rem + 2.6519vw, 2.5rem);
Tailwind Class:
Interactive SimulatorWidth: 768px → Size: 26.4px

Fluid Typography

How to use it

  1. 1Enter the smallest and largest size you want.
  2. 2Enter the viewport widths where it should stop shrinking and stop growing.
  3. 3Drag the preview width to check the result, then copy the clamp() value.

FAQ

How is the clamp() value calculated?

The preferred value is a straight line between your two sizes: a rem offset plus a vw slope. clamp() caps it at your min and max.

Should I use rem or px?

Use rem so the size still respects the user’s browser font-size setting.

Is clamp() supported everywhere?

Yes, every current browser supports clamp().