Skip to content
M2TOOLKIT

Popular tools

Menu

Fluid Font Size (CSS clamp) Generator

Make text scale smoothly with screen size using CSS clamp().

  • Free
  • No sign-up
  • Runs in your browser
px
px
px
px
px
ViewportFont size
320px16.00px
375px16.00px
768px19.47px
1024px21.74px
1280px24.00px
1920px24.00px

Using rem for the min and max respects users who increase their browser's default font size.

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the Fluid Font Size (clamp) Generator

  1. Enter the smallest and largest font size.
  2. Enter the viewport widths where scaling starts and stops.
  3. Copy the clamp() value.

What does this tool do?

clamp(min, preferred, max) keeps a value between limits. With a preferred value that combines rem and vw, text grows smoothly between two screen sizes instead of jumping at breakpoints.

Why use it?

  • Fewer media queries.
  • Smooth, consistent typography.
  • Accessible rem-based output.

Example

16px at 375px wide to 24px at 1280px wide: font-size: clamp(1rem, 0.7928rem + 0.884vw, 1.5rem);

The formula

slope = (max − min) ÷ (maxViewport − minViewport)
preferred = (min − slope × minViewport) + slope × 100vw

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the fluid font size (clamp) generator.