CSS

Fluid Type Clamp Generator

Set two font sizes and viewport widths to build a fluid CSS clamp() expression.

Result

Type that grows with the screen.

28px at an 800px viewport and 16px root.

The sample simulates the exported expression at the chosen viewport and root size. Its box uses the available page width.

CSS 

.fluid-text {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
}

A font size between two endpoints

Set the minimum and maximum font sizes, the viewport width for each endpoint, and your assumed root font size. Adjust the simulated width to inspect the result, then copy the generated CSS into your stylesheet.

clamp(minimum, preferred, maximum) keeps a fluid value within two bounds. This tool converts the font-size endpoints to rem and calculates a preferred value that combines a root-relative offset with viewport width in vw.

Example: 16px to 40px

Between viewport widths of 320px and 1280px, with a 16px root, the result is clamp(1rem, 0.5rem + 2.5vw, 2.5rem). At 800px, the preferred value is 8px + 20px = 28px. Below the lower endpoint the size stays at 16px; above the upper endpoint it stays at 40px, assuming the same root size.

How the slope is found

The viewport coefficient is 100 × (maximum size − minimum size) / (maximum viewport − minimum viewport) . The remaining offset ensures the line passes through the minimum endpoint. A negative offset is valid CSS when the requested size increase is steep. Equal font sizes produce a constant size.

Root size, zoom, and limitations

  • The endpoint widths match exactly at the assumed root size. Changing the actual root size changes the rem terms and shifts where the clamp reaches each bound.
  • The tool exports no html font-size rule. Respect users’ font preferences and test text resizing and zoom in your real layout.
  • Viewport units react to the browser viewport, not the parent container. The sample evaluates the formula at a simulated width; it does not resize your browser.
  • Coefficients are rounded to six decimal places. Very small numeric differences are possible, and this tool supports increasing or constant sizes only.

Related Tools