Clamp calculator

All five fields are in px. The root font size is used only to turn px into rem; browsers default it to 16. The preferred value is the straight line through two points: (min viewport, min size) and (max viewport, max size). slope = (max − min) ÷ (max viewport − min viewport), intercept = min − slope × min viewport. A viewport width is 100vw, so the line reads intercept + slope × 100vw, and clamp() pins it to the two sizes outside that range. For rem output every px figure is divided by the root font size you give; the vw coefficient is unitless and stays as it is. The fields are read with parseFloat and each coefficient is rounded with toFixed(4), then trailing zeros are trimmed.

Rounding to four decimals moves the computed size by under 0.01 px at any viewport up to 1,920 px, which no renderer can show. The preview table applies the unrounded line and then the clamp, so it is the value the browser will land on to two decimals. One caution the numbers cannot hide: the vw term does not scale with the user's font-size setting or browser zoom the way rem does. The rem intercept is the part that still grows when the user zooms, so an expression whose intercept is zero or negative leans on vw alone and can fail WCAG 1.4.4 at 200% zoom — the tool prints such an intercept unchanged and says so under the expression. The intercept is positive exactly when max viewport ÷ min viewport is larger than max size ÷ min size, so the note tells you to widen the viewport range or narrow the size range, and prints the min size that would do it on its own, and the max viewport too when that is under 100,000 px.

Min size may be 0 (a margin that vanishes on phones). Its intercept is then always negative, and the note says the value is all vw without asking you to change it. Viewports and the root size must be at least 1 px, every field at most 100,000 px, max size larger than min size, and max viewport at least 1 px larger than min viewport; otherwise the tool refuses and names the field or the pair rather than printing a line with a negative or infinite slope or a number too large to write out. Nothing is uploaded: there is no server in this file.

The Dark button remembers its setting in this browser's local storage. Nothing you type or drop into the page is stored.