Pick a min and max font size plus a viewport range and get a clamp() expression that interpolates smoothly. Single field — copy and paste.
Enter the min size (in px), max size, and viewport range (e.g., 320–1440px)
We compute the clamp(min, preferred, max) with rem-based output and a vw-driven middle term
Copy the expression — paste anywhere a font-size value is accepted
0 bytes uploaded. CSS clamp() Fluid Font Size Generator runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Media queries jump at breakpoints (16px → 18px → 20px), which feels stepped. clamp() interpolates smoothly across the entire viewport range — 16.000 → 16.083 → 16.167 → ... → 20.000 — for a much cleaner reading experience.
Yes for accessibility — rem-based clamp() respects the user's browser font-size preference. The output uses rem for the min/max and vw for the slope, the standard fluid-typography pattern.
Fluid font sizes don't cause CLS as long as they're applied consistently — the layout's reserved space adjusts smoothly with the viewport rather than re-flowing at breakpoints.
Generate a full type scale (h1–h6, body, small) using a chosen modular ratio. Output is fluid clamp() CSS that scales smoothly between two viewport widths.
Open toolBuild a complete typography token system as CSS custom properties: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.
Open toolBuild a font-family declaration that uses the best native font on each OS — San Francisco on Apple, Segoe UI on Windows, Roboto on Android. Zero web fonts, instant rendering.
Open tool