Design Tool

CSS clamp() Generator

Calculate the perfect CSS clamp() formula for fluid typography. Create text that looks perfect on any screen size.

Fluid Typography Generator

Mobile Viewport (px) Desktop Viewport (px)

Min Font Size (px) Max Font Size (px)

Your CSS Code

font-size: clamp(1rem, 0.3478rem + 3.2609vw, 3rem);

Live Preview

Resize to see the typography scale smoothly

No more media queries for font sizes

With the CSS clamp() function, your typography adapts smoothly between the minimum and maximum viewport. This saves countless breakpoints and ensures a fluid reading experience on any device.

How clamp() works

The clamp() function takes three values: A minimum, a preferred value (usually a mix of viewport width and fixed values), and a maximum.

Minimum value: Prevents the font from becoming too small on mobile.
Preferred value: The complex math calculating the scaling rate.
Maximum value: Caps the size on extra large screens.