How do I use the CSS clamp() fluid type calculator?
- Enter the minimum and maximum font size in px.
- Enter the viewport widths for those sizes.
- Copy the clamp() rule into your CSS.
CSS clamp() fluid type calculator: frequently asked questions
What is clamp()?
A CSS function that picks a value between a minimum and maximum, based on a preferred value — here, one that grows with the viewport width.
Why use rem?
So text still scales when users change their browser’s default font size.
Can I use it for spacing?
Yes. The same formula works for padding, margins and gaps.
Is clamp() supported?
Yes, in all modern browsers.
Does it work with Tailwind?
Yes — use an arbitrary value like text-[clamp(1.75rem,1.2rem+2.2vw,3rem)].
Is anything uploaded?
No. It runs in your browser.
Can I use the output in Figma or CSS?
Yes. Values are standard HEX, RGB, HSL and CSS that work in Figma, CSS and most design tools.
Is the css clamp() fluid type calculator free?
Yes. It is free with no sign-up and no usage limits for normal use.
Is my data sent to your servers?
No. This tool runs entirely in your browser, so what you type never leaves your device.
Does it work on my phone?
Yes. The tool works in any modern browser on iPhone, Android, tablet or computer.