What is the Fluid Typography Generator?
Generate CSS clamp() values for type sizes that scale smoothly between a minimum viewport width and a maximum. No breakpoints, no jumps.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the Fluid Typography Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Set minimum and maximum font sizes
Enter the smallest size (for mobile viewports) and the largest size (for desktop viewports) in px or rem.
Set viewport range
Enter the viewport widths where the font should be at its minimum and maximum. Typical values: 320px min, 1280px max.
Copy the clamp() value
Click Copy to grab the computed clamp() expression. Paste it as the value of font-size, padding, or any property that should scale with viewport.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Fluid heading: 24px at 320px viewport, 48px at 1280px */
h1 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}
/* Fluid body: 16px at 320px, 18px at 1280px */
body {
font-size: clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
}
/* Fluid spacing that scales with type */
.section {
padding: clamp(2rem, 5vw, 5rem);
}The formula: clamp(MIN, PREFERRED, MAX). The preferred value is a viewport-relative expression that crosses from MIN to MAX across your viewport range.
Pro tips for better results
Use rem for font-size, px for viewport widths in the formula
Converting viewport widths to rem in the clamp formula keeps the math consistent and respects user font size preferences.
Test at the minimum viewport, not just desktop
Load your page at 320px width and verify the text is still readable. Fluid type can go too small if the minimum is too low.
Fluid typography removes the need for font-size media queries
A single clamp() value replaces two or three breakpoint-based font-size overrides. Less code, no abrupt size jumps.
Apply fluid sizing to spacing too
clamp(1rem, 3vw, 3rem) works equally well for padding and gap values. It gives you proportional spacing without separate mobile/desktop overrides.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.