What Are CSS clamp() and Fluid Typography?
The traditional approach changes font sizes and spacing in steps at specific breakpoints, usually with media queries. CSS clamp() instead lets a value change continuously between a lower bound, a preferred expression and an upper bound.
The syntax is clamp(min, val, max), and according to MDN the result is resolved as max(min, min(val, max)). The value never falls below the lower bound or exceeds the upper bound. Here the preferred expression is a linear function of the viewport width (vw).
Linear Interpolation, Number Format and Limits
The relationship between your two viewport widths and two sizes is solved with this formula:
- Slope: (maxSize - minSize) / (maxViewport - minViewport)
- Intercept: minSize - (slope * minViewport)
- Viewport Rate: slope * 100vw
In px output the preferred expression is calc(intercept + rate vw). With rem, the minimum, maximum and intercept are divided by the root font value while the vw coefficient stays unchanged. A negative intercept is written as calc(5vw - 10px), never with a double sign.
Numbers are written with at most six decimals and never in scientific notation. The generated CSS text is re-evaluated inside the tool at the minimum, middle and maximum viewport and at widths outside them; if it deviates from the exact line by more than 0.001 px, no result is given. The input limits are design limits of this tool: viewport width 1 to 100000 px, size 0.01 to 100000 px, root font 1 to 1000 px. Values outside them and extreme coefficients are rejected with an error message.
Decimal input accepts a dot or a comma. Thousands separators, exponent notation and hexadecimal numbers are not accepted. The generated CSS always uses a dot, while the labels on screen follow your language.
Zoom, Root Font Size and Accessibility
vw is measured against the viewport width and rem against the font size of the root element. Text sized only with vw may respond to browser zoom less than text sized with rem. When clamp() sets a text size, MDN recommends a relative maximum that is at least twice the minimum, to help text reach at least 200% when the page is zoomed. This tool does not test or certify the accessibility of its output.
If a visitor's root font differs, only the rem terms scale and the vw coefficient stays the same. The expression as a whole therefore does not grow with the root font, and the viewport widths where the bounds take over shift. Example, computed from the formulas: with the default fixture the bounds are reached at 320 and 1280 px when the root font is 16 px, and at 400 and 1600 px for the same rem output when the root font is 20 px.
Zoom and font size behavior depends on the browser and its settings. Try the output on your own page by raising browser zoom to 200% and enlarging the default font size; this tool gives no guarantee about the outcome. For type hierarchy see Typography in User Interfaces.
Preview and Use in a Design System
The live preview is a design aid. It uses the px value calculated for the simulated width you choose and shows the rem label from the root font in the input; it does not use your page's real viewport or root font. The generated CSS stays in a separate box.
You can use the output directly in h1, h2 or paragraph styles, or define it as a custom property such as --font-size-hero: clamp(...). The tool builds CSS from numeric fields only and accepts no free-form CSS or code input.
Source and Fact-Check Date
The clamp() resolution and the accessibility note were checked on 25.10.2026 against the MDN clamp() page. The example values (320 and 1280 px, 16 and 32 px, root font 16 px) are a design example, not market data.
Frequently asked questions
Which browsers support clamp()?
Check the browser compatibility table on the MDN page and test in your target browsers. This page makes no promise about support.
Why choose rem over px?
rem is measured against the font size of the root element; unless the site overrides the root font in pixels, that value follows the browser's default font size setting. px is a fixed size. This is a design choice and gives no guarantee about the outcome.
What happens if the visitor's root font is not 16 px?
Only the rem terms scale and the vw coefficient does not change. The whole expression does not grow with the root font, and the viewport widths where the bounds are reached shift; in the default example a 20 px root moves 320 and 1280 px to 400 and 1600 px.
Is clamp() only for font sizes?
No, it can be used in CSS properties that accept a length. The generator works the same outside text; the zoom recommendation applies to text sizes.
What happens if the minimum viewport equals or exceeds the maximum?
No linear range exists, so the tool shows an error. The maximum viewport must be larger than the minimum, and the maximum size must not be smaller than the minimum size.
Which input limits apply and why?
They are design limits of this tool: viewport width 1 to 100000 px, size 0.01 to 100000 px, root font 1 to 1000 px. Values outside them, or values that cannot be verified within 0.001 px, are rejected.