How to use the Fluid Font Size (clamp) Generator
- Enter the smallest and largest font size.
- Enter the viewport widths where scaling starts and stops.
- Copy the clamp() value.
What does this tool do?
clamp(min, preferred, max) keeps a value between limits. With a preferred value that combines rem and vw, text grows smoothly between two screen sizes instead of jumping at breakpoints.
Why use it?
- Fewer media queries.
- Smooth, consistent typography.
- Accessible rem-based output.
Example
16px at 375px wide to 24px at 1280px wide: font-size: clamp(1rem, 0.7928rem + 0.884vw, 1.5rem);
The formula
slope = (max − min) ÷ (maxViewport − minViewport)
preferred = (min − slope × minViewport) + slope × 100vw
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
Do all browsers support clamp()?
Yes. clamp() has been supported by all major browsers since 2020.
Why use rem for the minimum and maximum?
rem respects the reader's browser font-size setting. Sizes based only on vw ignore that setting and don't grow when people zoom in on some devices, which can fail accessibility requirements.
Last reviewed by the M2Toolkit team.