CSS clamp() Generator

Build a fluid font size that grows smoothly between two viewport widths, then copy the CSS. The slope and intercept are shown so you can check the maths.

The base size is used only when the unit is rem. Sizes and viewport widths are whole numbers or decimals, for example 16 or 1.25.

Font size at three widths

The font size the clamp() rule gives at the minimum width, at the midpoint between the two widths, and at the maximum width.

How it works

The font size moves in a straight line between the two viewport widths. Below the minimum width it stays at the minimum size, and above the maximum width it stays at the maximum size.

Slope is how much the font grows for each 1px of extra viewport width: (maximum size minus minimum size) divided by (maximum viewport minus minimum viewport). Both sizes are first converted to px, so the slope is the same for px and rem input.

Intercept is the font size the line would have at a viewport width of 0px: the minimum size minus slope times the minimum viewport width.

The CSS is clamp(minimum, intercept + viewport term, maximum), where the viewport term is 100 times the slope in vw. For example, 16px at 320px to 24px at 1280px gives a slope of 1/120, an intercept of 13.3333px and the viewport term 0.8333vw, so the font is 20px at 800px.

Rem output divides the intercept by the base size, so the result is in rem. The viewport term is the same in both units. Values are rounded half up to 4 decimal places (6 for the slope), and the result says when rounding has happened.