CSS clamp() Fluid Typography Generator
Generate a CSS clamp() value for fluid font sizes that scale smoothly between a minimum and maximum viewport width.
IN: Min/max size & viewport · OUT: CSS clamp() value · RUNS: 100% in your browser
Fluid text
Resize your browser window to see this scale between the min and max viewport widths.
font-size: clamp(1.000rem, 0.648rem + 1.5023vw, 2.000rem);
Frequently asked questions
What does CSS clamp() actually do?+
clamp(min, preferred, max) picks a value that scales with the preferred expression (usually involving viewport width) but never goes below the min or above the max, giving you fluid sizing with hard limits on both ends.
Why use vw units in the preferred value?+
Viewport width (vw) units make the preferred size scale directly with the browser window's width, which is what creates the smooth 'fluid' scaling effect between your min and max breakpoints.
Do I need media queries if I use clamp()?+
For simple fluid scaling between two sizes, no — clamp() replaces what would otherwise require multiple media query breakpoints, though you might still use media queries for more complex layout changes.
Why choose rem over px for the output?+
rem values scale with the user's browser font-size setting, respecting accessibility preferences for larger default text, while px values stay fixed regardless of user settings.
Is clamp() supported in all modern browsers?+
Yes, CSS clamp() has been supported in all major browsers (Chrome, Firefox, Safari, Edge) since 2020, making it safe to use in most production projects today.
Can clamp() be used for properties other than font-size?+
Yes, clamp() works with any property that accepts a length value, including padding, margin, width, and gap — useful for fluid spacing as well as fluid typography.