Fluid typography generator with clamp(): type that scales with the screen

Enter font sizes for small and large screens, choose a scale ratio, preview it and copy clamp() CSS variables for headings and body text.

How to use

Enter the smallest and largest screen widths your site must look good on.
Enter the base size at both ends and choose a scale ratio. Drag the Preview width slider to watch the sizes change.
Copy the CSS variables and use them like font-size: var(--step-2) or padding: var(--space-m).

How is fluid type different from media queries?

Media queries change sizes in steps. Fluid type uses clamp(), so sizes change smoothly with every pixel of width, with less code.

Does clamp() work in every browser?

Yes, every major browser released since 2020 supports it.

What if the visitor zooms text?

It still works. The code combines rem and vw, so the browser's font-size setting is respected.