Fluid sizes with CSS clamp()
A fluid size grows with the browser window instead of jumping at breakpoints. You pick two points, a small size for a narrow screen and a large size for a wide one, and CSS draws a straight line between them. clamp() holds the size at your minimum below the first point and at your maximum above the second.
MDN describes clamp(MIN, VAL, MAX) as resolving to max(MIN, min(VAL, MAX)). The preferred value VAL mixes two units from CSS Values and Units Level 4: vw, where 1vw is 1% of the viewport width, and rem, the font size of the root element.
The clamp() formula
The preferred value is the straight line through (min viewport, min size) and (max viewport, max size). Work in px first, then convert the intercept and the bounds to rem by dividing by the root font size.
Worked example
You want body text at 16px on a 360px phone and 24px on a 1280px laptop, with the default 16px root:
- Slope: (24 − 16) ÷ (1280 − 360) = 8 ÷ 920 = 0.008696px per px of viewport, so the vw part is 0.8696vw.
- Intercept: 16 − 0.008696 × 360 = 12.8696px, which is 12.8696 ÷ 16 = 0.8043rem.
- Bounds: 16px is 1rem and 24px is 1.5rem.
Result: clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem). On an 820px wide window that gives 20px. Below 360px it stays at 16px, above 1280px at 24px.
Zoom and accessibility
WCAG success criterion 1.4.4 Resize Text, at level AA, asks that text can be resized up to 200 percent without assistive technology and without loss of content or functionality. The W3C lists text sized with viewport units as a failure of this criterion (F94), because browser zoom and text-size settings do not change a vw value.
Here is why. MDN explains that page zoom makes a CSS pixel larger. A 1280px wide window at 200% zoom is only 640 CSS pixels wide, so the vw part of the size halves while the rem part stays the same. In the example above, the text on a 1280px window is 24px at 100% and 36.87px at 200% zoom, not 48px; the reader needs 287% zoom to double it. The wider the range between your min and max size, the stronger the effect: with 16px to 64px over the same viewports, 200% zoom on a 1280px window grows the text only 0.96 times.
A few habits keep fluid type friendly to zoom:
- Keep a rem part in the preferred value. The generator always does, unless the line happens to pass through zero.
- Write the bounds in rem, so they follow the reader's default font size.
- Keep the max size within a moderate ratio of the min size. MDN suggests a maximum in a relative unit no less than twice the minimum, so text can still reach 200% when zoomed.
- Check the zoom table in the tool, and try your page at 200% zoom in a real browser.
To convert single values between px and rem, use the px to rem converter, which also converts a whole block of CSS.
How to use the CSS clamp generator
- 1Choose px or rem for your sizes, then enter the min size and the max size.
- 2Enter the viewport widths where each size applies, or pick a viewport range, and check the root font size.
- 3Pick rem or px for the output, move the preview slider to see the size at any width, and look at the zoom check.
- 4Press Copy clamp() for the value or Copy CSS line for a full declaration with the property you chose.
Sources
- MDN: clamp(): max(MIN, min(VAL, MAX)) and the accessibility note on maximum and minimum
- W3C: CSS Values and Units Module Level 4: definitions of vw and rem
- W3C: Understanding SC 1.4.4 Resize Text (Level AA): the success criterion and its failures
- W3C: Failure F94, incorrect use of viewport units to resize text
- MDN: Window.devicePixelRatio: page zoom makes a CSS pixel larger
Frequently asked questions
What does CSS clamp() do?
clamp(MIN, VAL, MAX) keeps a value between a lower and an upper bound. The browser computes the preferred value VAL, and if it falls below MIN it uses MIN, if it rises above MAX it uses MAX. MDN describes it as max(MIN, min(VAL, MAX)). For fluid type, VAL grows with the viewport width, so the text scales smoothly between the two sizes.
How is the preferred value calculated?
It is the straight line through your two points. The slope is (max size − min size) ÷ (max viewport − min viewport), and 100 times the slope is the vw part. The intercept, the size the line would have at a 0px wide viewport, is min size − slope × min viewport. For 16px at 360px and 24px at 1280px that gives 0.8043rem + 0.8696vw.
Why does the preferred value mix rem and vw?
A size in vw alone depends only on the window width, so it does not grow when a reader zooms or sets a larger default font size. W3C lists sizing text with viewport units as a failure of WCAG 1.4.4 Resize Text (failure F94). Adding a rem part keeps part of the size tied to the reader’s font setting, and with rem bounds the minimum and maximum follow it too.
Should I write the bounds in rem or px?
In rem for font sizes. A rem value follows the default font size the reader set in the browser, a px value does not. For spacing that should not change with the text size, px works as well. Choose Output in rem or px next to the result; the math is the same.
What if I want something to get smaller on wider screens?
Enter a larger min size than max size. The slope turns negative and the generator writes the preferred value with a minus, like 1.6957rem − 0.8696vw, and still puts the smaller size first in clamp(), because clamp() expects the lower bound first.
Does clamp() work in all browsers?
clamp() is part of CSS Values and Units Level 4. MDN marks it as Baseline widely available: it has worked across the major browsers since July 2020.