CSS Clamp Calculator for Fluid Typography

What clamp() does and the maths behind it

clamp(MIN, PREFERRED, MAX) returns the preferred value but never lets it go below MIN or above MAX. For fluid typography the preferred value mixes a fixed part and a viewport part, such as 0.6667rem + 1.6667vw, so text grows smoothly as the screen widens and stops growing at the limits, with no media queries and no jumps between breakpoints.

This css clamp calculator works out the preferred value from four numbers: the size you want at the smallest viewport, the size at the largest viewport, and those two viewport widths. It draws a straight line between the two points. The slope is (max size - min size) / (max viewport - min viewport). The intercept is min size - slope × min viewport. Because 1vw is 1% of the viewport width, the slope is multiplied by 100 to express it in vw, and the intercept is divided by the root font size to express it in rem.

Worked example: 16px at a 320px viewport growing to 32px at 1280px. Slope = 16 / 960 = 0.016667, which is 1.6667vw. Intercept = 16 - 0.016667 × 320 = 10.667px, which is 0.6667rem at a 16px root. The result is clamp(1rem, 0.6667rem + 1.6667vw, 2rem). At 800px wide that gives 10.667 + 13.333 = 24px, exactly halfway, which you can confirm with the viewport slider.

The minimum and maximum are written in rem and the intercept includes a rem part, so the size still responds when a user increases their browser's default font size. A value built only from vw would ignore that setting, which is an accessibility problem because WCAG 1.4.4 expects text to scale to 200%. Even with clamp(), a large ratio between max and min can limit how far zoom enlarges text, so keep the range moderate for body copy. If the larger size is the smaller one, for example a heading that should shrink, the calculator writes a negative slope and keeps MIN and MAX in the right order.

Using the preview, units and type scale

Enter sizes in px or rem with the toggle; both are converted using the root font size field, which defaults to 16px. The CSS property field changes only the label in the output, so you can use the same clamp() for margin, padding, gap or width as well as font-size. The presets cover body text, headings, a hero title and fluid section padding.

Drag the simulated viewport slider to see what the value resolves to at any width. The preview box narrows with the slider and shows the computed pixel size, which is the quickest clamp font size check before you put it into a stylesheet.

Fluid type scale mode builds a whole modular scale. Set the base size at each end of the range and choose a ratio for small screens and a usually larger ratio for wide screens, such as Minor third (1.2) and Major third (1.25). Each step n is base × ratio to the power n, calculated separately for the minimum and maximum viewport, and turned into its own clamp(). The output is a set of CSS custom properties from --step-n2 to --step-5, ready to assign to body text, h1 to h6 and small print.