CSS clamp() calculator
Set a size for small screens and one for large screens. The clamp() between them is written for you, and shown at every width.
- CSS clamp()
- Live preview
- rem or px
Your clamp()
clamp(2rem, 1.413rem + 2.6087vw, 3.5rem)
Fluid, from phone to desk
Runs entirely in your browser. Nothing you enter is sent or stored.
How clamp() makes a size fluid
clamp(min, preferred, max) takes the preferred value as long as it stays between the two bounds. With a preferred value that grows with the width of the screen, in vw, a size grows in a straight line from its minimum on small screens to its maximum on large ones, and holds still beyond them. No media query is needed.
Why rem, and not vw alone
A font size in vw alone ignores the reader’s font settings and does not grow when the page is zoomed, which fails the accessibility rule that text must enlarge to 200% (WCAG 1.4.4). The middle term here mixes rem with vw, so zooming still enlarges the text. The px output is there for spacing, where zoom matters less.
Choosing the two ends
Start from the smallest screen you design for, usually 320 or 360 pixels, and the width where your layout stops growing, often between 1200 and 1440. A heading might go from 32 to 56 pixels between them; body text changes far less, from 16 to 18 perhaps. A common rule keeps the largest size within two and a half times the smallest, so that zoom can still double the text.
Sizing pictures rather than type? The aspect ratio calculator keeps their shape.
Made by Mystya.
We are a web studio in Québec. These tools are free and will stay free: they are how we show what we care about, in something you can use. If you want a site built with the same attention, we would like to hear about it.