CSS clamp() calculator for fluid typography

CSS clamp() calculator for fluid typography: what it is for

With clamp(), text grows with the screen width without a pile of media queries: small on phones, large on desktops and changing smoothly in between.

The calculator works out the line between the minimum and maximum sizes at the screen widths you choose and returns the value in rem, which respects the font size the person set in their browser. It shows the size at each common width and warns when the maximum goes beyond 2.5 times the minimum, the point where the 200% zoom required by WCAG 1.4.4 may stop working.

How to use

1. Enter the minimum and maximum sizes in px.
2. Choose between which screen widths it grows.
3. Copy the ready-made clamp().

When to use it

• Headings that adapt to phones and desktops.
• Fluid spacing between sections.
• A type scale without media queries.

Frequently asked questions

How does clamp() work?

clamp(minimum, preferred, maximum) uses the preferred value as long as it stays between the limits. The preferred value is a line, a rem value plus a fraction of vw, which grows with the screen width: on phones it stays at the minimum and on desktops it reaches the maximum.

Why use rem instead of px?

rem follows the font size the person chose in their browser. With px, someone who increased the default font size because of reading difficulties sees no change.

What is the zoom warning?

WCAG requires that text can be zoomed to 200%. Since the vw part does not grow with zoom, a maximum much larger than the minimum can block that. A safe rule of thumb is to keep the maximum at no more than 2.5 times the minimum.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools