CSS Clamp Generator

Generate a rem/vw CSS clamp expression from two font sizes and viewport widths. Set the root font size explicitly.

How to use

Enter the desired minimum and maximum sizes in pixels, along with the viewport widths where they should be reached. The preferred value interpolates linearly between those points and is bounded by rem minimum and maximum values.

For 16px at 320px and 32px at 1280px with a 16px root, the result is clamp(1rem, 0.666667rem + 1.666667vw, 2rem). Paste it as a CSS value, for example font-size: clamp(...).

Behavior and limits

The root font size is an assumption used for the px-to-rem conversion; the tool does not change your stylesheet. Test browser zoom and long text after applying fluid typography, and avoid disabling user font scaling.

Reference

Questions & answers

Can I use equal minimum and maximum sizes?

Yes. That produces a constant size. The maximum viewport must still be greater than the minimum viewport.

Is my input uploaded?

No. Processing runs in your browser. This tool does not send your input to an API or save it in local storage. Text tools accept up to 200,000 characters.

Other Languages