AvailableRuns locally in your browser

Fluid Type & Spacing Generator

Generate CSS clamp() values for responsive typography and spacing, with a live preview across viewport sizes.

Minimum value

Maximum value

Minimum viewport (px)

Maximum viewport (px)

Unit

Root font size (px)

Presets

Simulated viewport768px

320pxmin 360pxmax 1280px1920px

Aa Bg

Computed value at 768px: 1.055rem

Generated CSS

font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);

How it works

The slider simulates a real browser viewport by computing the value mathematically — the generated clamp() itself uses real vw units once you paste it into your site.
Typography usually looks best scaling by about 1.25–1.5× between minimum and maximum viewport.
Root font size only matters when using rem — it converts your rem values to px to calculate the slope correctly.
A reversed range (max value smaller than min value) is valid — useful for spacing that should shrink on larger screens.

Need a full responsive system?

I build responsive design systems and implement them directly in WordPress or custom frontend code.