Skip to main content
CSS tool
Runs in your browser
Nothing in the URL

CSS clamp calculator

Generate fluid typography with CSS clamp(), preview interpolation between viewport widths, and convert pixels to rem using your own root font size.

Build fluid CSSRead privacy notes
What it does
Create a bounded fluid font size instead of a separate rule for every breakpoint.
Set minimum and maximum font sizes
Interpolate across custom viewport endpoints
Generate rem bounds with rem + vw scaling
Preview any viewport size
Convert pixels and rem with a configurable root

Changing the unit reinterprets the entered font sizes. The CSS output always uses rem bounds and a rem + vw preferred size.

Simulated 960px viewport: 24px font size

Type that fits the screen.

The preview simulates the selected viewport at the configured root size. Real vw uses the full browser viewport, not this preview card. Test your actual page at zoomed and narrow sizes.

Pixels and rem

Uses the same root font size above. Negative values are valid for spacing, but not font sizes.

24 px = 1.5 rem

Privacy notes
Sizes and generated CSS stay in this tab.

Calculations and preview rendering happen locally. Font-size values and CSS output are not uploaded, stored in your URL, or retained in a tool history.

Copying requires an explicit action and browser clipboard permission. Consented analytics include the tool and action, never your generated CSS.

Do not enter production secrets into any web page unless you are allowed to handle them there. This tool avoids uploads, but your browser, extensions, and device policies still matter.

Best fit
Responsive headings, body text experiments, and CSS unit conversions.

Good for

Generate a linear scale between two viewport widths.

Compare pixels and rem using your project's root size.

Check the minimum, midpoint, and maximum before copying CSS.

Not for

This does not prove accessible typography or sufficient zoom behavior.

vw refers to the browser viewport, not a container-query width.

The estimate assumes the configured root size; the actual page and user settings can differ.

Additional Resources

MDN CSS clamp()MDN CSS length units

Frequently Asked Questions

How is the CSS clamp expression calculated?

The tool fits a straight line through your minimum and maximum font sizes at the two viewport endpoints. The preferred value combines a rem intercept and a vw slope. The outer clamp bounds prevent it from shrinking or growing past your chosen limits.

Why does the output combine rem and vw?

rem follows the document's root font size, while vw follows viewport width. Combining them avoids a purely viewport-based font size. It is still necessary to test browser zoom and user font preferences in the real layout; this formula alone is not an accessibility guarantee.

How do pixels convert to rem?

Divide pixels by the root font size to get rem, or multiply rem by the root size to get pixels. For example, 24px is 1.5rem when the root is 16px, but 1.2rem at a 20px root. The converter uses your root-size input, not an assumed universal browser default.

Does the preview resize my browser?

No. It computes the font size that the generated formula would produce at the selected viewport and configured root size, then shows that simulated size. In the actual CSS, vw measures the full browser viewport, not the preview card or its container.

Can the font size decrease as the viewport grows?

This tool deliberately supports non-decreasing scales only. The maximum font size must be at least the minimum, and the maximum viewport must be greater than the minimum. Equal font sizes are valid and produce a constant-size clamp.