Generate one line of CSS that scales your font size smoothly — no media queries needed
Font size at the smallest viewport
Font size at the largest viewport
Viewport width where scaling begins
Viewport width where scaling stops
Used to convert px values to rem
clamp() works on any CSS length property
The CSS Clamp() Fluid Typography Generator calculates the exact clamp() value needed to scale any CSS length property smoothly between two viewport widths. Enter your minimum and maximum sizes, set your viewport breakpoints, and get a single copy-paste CSS declaration — no media queries required.
Output updates live as you type. Zero server lag — all math runs in your browser.
Your data never leaves your device. No uploads, no servers, no tracking.
clamp(MIN, PREFERRED, MAX) is a CSS math function that clamps a value between a lower and upper bound. The preferred value is typically a viewport-relative unit like vw, which makes it scale with the screen. The browser picks the preferred value unless it falls outside the min/max bounds.
For fluid typography, the preferred value is a linear equation: slope * 100vw + intercept. This tool calculates that slope and intercept for you based on your desired size range and viewport range.
Given a minimum size s1 at viewport v1 and a maximum size s2 at viewport v2, the fluid slope and y-intercept are:
clamp(s1, intercept rem + slope*100 vw, s2)--step-0, --step-1, etc. and reference those throughout your design system.CSS clamp() is a function that lets you set a value that scales fluidly between a minimum and maximum, based on a preferred value like a viewport unit. It replaces multiple media queries with a single line.
Fluid typography uses a linear scale between two viewport widths. At the minimum viewport the font is at its smallest size; at the maximum viewport it reaches its largest size, scaling smoothly in between.
By default this tool assumes a 16px root font size, which is the browser default. You can change this in the "Root Font Size" dropdown if your project uses a different base (e.g. the 62.5% trick sets it to 10px).
Yes. clamp() works for any CSS length property — padding, margin, gap, width, border-radius, and more. Use the CSS Property dropdown to switch the output declaration.
Using rem units in clamp() respects the user's browser font-size preference, which is important for accessibility. Avoid using px for both the min and max values if accessibility is a concern.