PickCode- Home
- Free tools
- Fluid type clamp() calculator
Fluid type clamp() calculator
Set the smallest and largest font size and the viewport widths where they apply. You get a clamp() value in rem, a Tailwind class and a live preview.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)text-[clamp(1rem,0.8333rem+0.8333vw,1.5rem)]Fluid type grows with the screen
See how other sites do fluid type
PickCode lists the CSS rules behind any element, then copies it as Tailwind, React, Blade or HTML + CSS. 5 free elements a day.
How the clamp() value is calculated
The middle value of clamp() is a straight line between your two sizes. Take 16px to 24px across viewports from 320px to 1280px:
- Slope: (24 - 16) / (1280 - 320) = 0.008333, which is 0.8333vw.
- Intercept: 16 - (0.008333 × 320) = 13.3333px, which is 0.8333rem at a 16px root.
- Add the two to get the preferred value, then cap it with your sizes in rem.
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);What to know
- Rem keeps zoom working
- Pure
vwignores browser zoom and the user's font size setting. The rem part of the preferred value brings them back. - A check for 200% zoom
- The calculator warns when the largest size is over 2.5 times the smallest. Past that point, text may not reach 200% at every window width.
- Not only for type
- The same value works for
padding,gapandmargin, so spacing can grow with the text. - Stays on your machine
- Everything is calculated in this tab. Nothing is uploaded.
Questions
What does CSS clamp() do?
It takes a minimum, a preferred value and a maximum, and uses the preferred value until it would pass either limit. For font sizes, that means text grows with the viewport between two fixed sizes.
Which viewport widths should I use?
Use the narrowest screen you support as the minimum, often 320px or 360px, and the width where your layout stops growing as the maximum, often 1280px to 1440px.
Does fluid type pass WCAG?
It can. Success criterion 1.4.4 asks that text can be resized to 200%. Keeping the rem part in the preferred value and the largest size within 2.5 times the smallest is the usual way to stay safe. Test with browser zoom too.
Can I use clamp() in Tailwind?
Yes, as an arbitrary value such as text-[clamp(1rem,0.8333rem+0.8333vw,1.5rem)]. We compiled the classes this page generates in Tailwind v3 and v4. For repeated use, add it to your theme as a named size.
Why does it use rem instead of px?
The limits follow the user's font size setting when they are in rem. If your site changes the root size, enter it in the root font size field so the numbers stay correct.