Fluid Typography Generator
Pick a smallest and largest font size and the viewport widths between which it should scale. You get a clamp() value that needs no breakpoints.
The quick brown fox jumps
At 800px the size is 27.3px (1.7044rem).
| Viewport | Font size |
|---|---|
| 320px | 16.0px |
| 640px | 23.0px |
| 768px | 26.4px |
| 1024px | 33.2px |
| 1280px | 40.0px |
| 1536px | 40.0px |
| 1920px | 40.0px |
font-size: clamp(1rem, 0.3785rem + 2.6519vw, 2.5rem);
text-[clamp(1rem,0.3785rem_+_2.6519vw,2.5rem)]
@theme {
--text-fluid: clamp(1rem, 0.3785rem + 2.6519vw, 2.5rem);
}
/* usage: class="text-fluid" */Frequently asked questions
What is fluid typography?
Text whose size changes continuously with the viewport width instead of jumping at breakpoints. CSS clamp(min, preferred, max) does this: the preferred value scales with vw, and min and max stop it from getting too small or too large.
How do I use clamp() in Tailwind CSS?
Use an arbitrary value such as text-[clamp(1rem,0.5rem_+_2vw,2.5rem)]. Spaces become underscores. For a reusable size, define --text-fluid in your @theme block and use the text-fluid class.
Why does the formula use rem and vw together?
A pure vw size ignores the user's browser font setting, which hurts accessibility. Mixing a rem part with the vw part keeps the size responsive to both the screen and the user's preferred text size.
Can I use clamp() for spacing too?
Yes. The same formula works for padding, margin, gap and width. Generate the value here and use it with arbitrary classes like p-[clamp(...)].
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.