FIRST CH TOOLS / DESIGN / 43 CSS CLAMP CALCULATOR

CSS clamp() Fluid Typography Calculator

Say "24px at 375px wide, 40px at 1280px" and get the clamp(min, vw formula, max) that draws a straight line between those two points. Instead of stepping the size at breakpoints, the value changes continuously with the window. A width slider shows what it actually looks like, and rem output keeps the size responsive to the reader's browser font size.

Two points make the formula

Minimum viewport width (where growth starts) px

Maximum viewport width (where it stops) px

Minimum size (at the minimum width) px

Maximum size (at the maximum width) px

Output unit Root font size px = 1rem

Property Decimals

Result

clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem)

font-size: clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem);

—

Value at the preview width

—

Slope (per 100px of width)

—

vw coefficient

—

Intercept (the rem term)

Live preview

Window width 768px → 32px

A heading grows to about this size Aa 0123

Preview text

The slider computes the value for a hypothetical window width — resizing your real window gives the same numbers.

Value at each width

Viewport width	Computed	rem	State

Checks

Static px ⇄ rem conversion (what 24px is in rem, plus a size scale) lives in PX ⇄ REM / EM Converter; this page builds the formula that changes with the width. Keeping an element's proportions is in Aspect Ratio Calculator, and text legibility against its background is in Contrast Checker.

Every step from caption to hero at once

Base size at the minimum width (step 0) px

Base size at the maximum width (step 0) px

Ratio at the minimum width (per step) ×

Ratio at the maximum width (per step) ×

Steps to Variable name Ratio preset

The viewport widths, the output unit and the root font size are shared with the "Build the formula" tab.

Formula per step

Step	At min	At max	clamp()

CSS custom properties

What the formula says, and where it bites

The three arguments of clamp(min, preferred, max)

The browser evaluates the preferred value and uses the minimum when it falls below it, the maximum when it goes above. Put vw (1% of the viewport width) in the preferred value and the result moves with the window. clamp(a, b, c) means exactly max(a, min(b, c)).

Why the preferred value is "rem + vw"

A straight line through (min width, min size) and (max width, max size) is y = slope × x + intercept, with slope = (max size − min size) ÷ (max width − min width) and intercept = min size − slope × min width. Since x (the width in px) equals 100vw, the slope times 100 becomes the vw coefficient, and the intercept is a length, so it is written in rem. That is why the result always has exactly two terms.

Never write the preferred value in vw alone

A preferred value such as 4vw does not change when the reader enlarges text in the browser, which can fail WCAG 2.2 success criterion 1.4.4 (Resize text, up to 200%). Keeping the intercept in rem means that term grows with the reader's setting. That is why this tool defaults to rem rather than px.

If min > max, clamp returns the minimum

CSS clamp() gives the minimum priority, so clamp(40px, …, 24px) is always 40px. To make a value shrink as the window widens, the smaller number still has to be the first argument. This tool reorders the bounds for you and says so in the checks.

The root font size is not always 16px

rem is relative to the font size of the html element. It defaults to 16px but the reader may have changed it. If your CSS sets something like html { font-size: 62.5% }, set the root font size here to 10px too — otherwise the rem values printed here will not match what renders.

It is not only for font sizes

Any property that takes a length works: padding, gap, margin, widths, border radii. Change the property field and the declaration is written with that name. Values that are pure ratios (a unitless line-height, for example) are not a fit.

vw and horizontal scrollbars

vw counts the scrollbar as part of the width, so on platforms with a classic scrollbar it is a few px wider than the visible area. That rarely matters for type and spacing, but using vw for a full-bleed width can produce a horizontal scrollbar.

Browser support

clamp() has shipped since Chrome 79, Safari 13.1 and Firefox 75 — all early 2020. A fallback is rarely needed today; if you want one, write font-size: 24px; first and override it with the clamp on the next line.

How to Use

Enter the two pointsThe size at the narrow end and the size at the wide end. The defaults are 375px → 24px and 1280px → 40px, and the formula updates as you type.
Check it on the sliderDrag the window width to see the real value and the sample text at that width, including the ranges where it stops at the minimum or the maximum.
Copy it"Copy value" gives the bare clamp(…), "Copy declaration" gives font-size: clamp(…);. The type scale tab exports the whole scale as custom properties.

About This Tool

Fluid typography is nothing more than a line through two points. Stepping a heading 24px → 32px → 40px at breakpoints makes the text jump at each one, and the sizes just below a breakpoint always feel cramped. clamp() fills the gap continuously, so every width gets the size you intended. This tool solves the slope and intercept of the line through your two points and rewrites the slope as vw and the intercept as rem (the derivation is on the "How it works" tab).

rem output is the default for a reason. A preferred value built only from vw ignores the browser's font size setting, which risks failing WCAG 2.2 SC 1.4.4. Keeping the intercept in rem — the "Xrem + Yvw" shape — lifts the whole formula when the reader enlarges text. px output is available, but the checks will warn about it.

Outside the two widths the value is frozen. Because clamp() brackets the preferred value, anything narrower than the minimum viewport width renders at the minimum size, and anything wider than the maximum renders at the maximum. The table and the bar under the slider show which range is fixed and which is fluid. There is no need to push the minimum below 320px or the maximum beyond 2560px — those ranges are constant anyway.

The type scale tab repeats the same maths per step. A geometric series from the base size and the ratio is built at the minimum width and again at the maximum width, then each step gets its own clamp(). Using a slightly larger ratio at the wide end makes headings pull further away from body text on big screens. The output is custom properties such as --step-0, ready to paste into :root and use as font-size: var(--step-2).

This is not the static px ⇄ rem converter. Fixed conversions ("24px is 1.5rem") and scale tables are in PX ⇄ REM / EM Converter; this page produces the interpolation formula. Everything is computed in the browser and nothing is uploaded. Directly callable via URL parameters: /en/clamp/?minvw=375&maxvw=1280&min=24&max=40 or /en/clamp/?min=16&max=20&unit=px&prop=padding