How does the clamp() fluid typography formula work?

The preferred value inside clamp() is a linear function of the viewport width: slope = (max size − min size) ÷ (max viewport − min viewport), and intercept = min size − slope × min viewport. The slope is multiplied by 100 to become a vw term, the intercept becomes a rem or px term, and clamp() then pins the result between your two sizes outside the chosen viewport range.

Why is the clamp() output usually written in rem instead of px?

A rem-based minimum, intercept and maximum scale with the user’s browser font-size setting, so people who raise their default text size still get larger text. A pure px clamp ignores that preference. This tool converts with the standard base of 16px per rem, and the vw part stays in vw either way because it tracks the viewport, not the font setting.

Does clamp() typography break browser zoom or accessibility?

Page zoom (Ctrl/Cmd +) is safe because it scales rem, px and vw together. The known risk is a preferred value made only of vw, which barely responds to text-size preferences; mixing a rem intercept with the vw term, as this calculator does, avoids that. WCAG 1.4.4 asks that text can reach 200% — keep your minimum size reasonable and test with zoom.

Is anything I type sent to a server?

No. The slope, intercept and clamp() string are computed in JavaScript in your browser on every keystroke, and the live preview is rendered locally too. No network request is made, nothing is stored, and the page keeps working offline once it has loaded.

What values should I use for the viewport range?

A common choice is 320–400px for the lower bound, covering small phones, and 1200–1440px for the upper bound, where most desktop layouts stop growing. Between those widths the size interpolates linearly; outside them it stays fixed at your min or max. Match the upper bound to your layout’s max-width so text stops growing when the container does.

CSS Clamp Calculator

Set a minimum and maximum font size with the viewport widths where they apply, and get the exact clamp() rule with the math shown step by step.

Units

Min font size (px)Max font size (px)Min viewport (px)Max viewport (px)

font-size:

clamp(16px, 12.3636px + 0.9091vw, 24px);

Preview

Viewport width: 768px

The quick brown fox

19.3455px

= 1.2091rem at this width · inside the fluid range

How this was computed

Slope — how fast the size grows per pixel of viewport: (24px − 16px) ÷ (1280px − 400px) = 0.0091. Multiplied by 100 it becomes the vw coefficient: 0.9091vw (1vw = 1% of the viewport width).
Intercept — the size the line would have at a 0px viewport: 16px − 0.0091 × 400px = 12.3636px.
Preferred value — the straight line between your two points: 12.3636px + 0.9091vw. At 400px wide this equals exactly 16px, and at 1280px it equals 24px.
clamp() pins that line between 16px and 24px, so the size stops changing outside your viewport range.

Values are rounded to 4 decimals; rem conversion assumes the browser default of 16px. Prefer the rem output so user font-size settings are respected.

How it works

Enter the minimum font size and the viewport width where it should apply, then the maximum font size and its viewport width — use the px/rem toggle to work in either unit (1rem = 16px).
Read the generated font-size: clamp() rule and the step-by-step slope and intercept calculation below it, then press Copy to put the CSS on your clipboard.
Drag the viewport-width slider to preview the sample text at any screen size and confirm where the size stops scaling at your minimum and maximum.

Frequently asked questions

How does the clamp() fluid typography formula work?: The preferred value inside clamp() is a linear function of the viewport width: slope = (max size − min size) ÷ (max viewport − min viewport), and intercept = min size − slope × min viewport. The slope is multiplied by 100 to become a vw term, the intercept becomes a rem or px term, and clamp() then pins the result between your two sizes outside the chosen viewport range.
Why is the clamp() output usually written in rem instead of px?: A rem-based minimum, intercept and maximum scale with the user’s browser font-size setting, so people who raise their default text size still get larger text. A pure px clamp ignores that preference. This tool converts with the standard base of 16px per rem, and the vw part stays in vw either way because it tracks the viewport, not the font setting.
Does clamp() typography break browser zoom or accessibility?: Page zoom (Ctrl/Cmd +) is safe because it scales rem, px and vw together. The known risk is a preferred value made only of vw, which barely responds to text-size preferences; mixing a rem intercept with the vw term, as this calculator does, avoids that. WCAG 1.4.4 asks that text can reach 200% — keep your minimum size reasonable and test with zoom.
Is anything I type sent to a server?: No. The slope, intercept and clamp() string are computed in JavaScript in your browser on every keystroke, and the live preview is rendered locally too. No network request is made, nothing is stored, and the page keeps working offline once it has loaded.
What values should I use for the viewport range?: A common choice is 320–400px for the lower bound, covering small phones, and 1200–1440px for the upper bound, where most desktop layouts stop growing. Between those widths the size interpolates linearly; outside them it stays fixed at your min or max. Match the upper bound to your layout’s max-width so text stops growing when the container does.

About this tool

This CSS clamp calculator generates a fluid font-size rule from four numbers: the smallest size you want, the largest size you want, and the two viewport widths where each should apply. As you type, it produces a ready-to-paste font-size: clamp() declaration and a live preview you can scrub with a viewport slider, so you see exactly how a heading or paragraph behaves from a 320px phone to a widescreen desktop without resizing your browser window.

The math is shown honestly rather than hidden. Fluid typography is a straight line between two points: the slope is the change in font size divided by the change in viewport width, and the intercept is the minimum size minus slope times the minimum viewport. The calculator prints each step with your actual numbers — slope in px per viewport px, the same slope converted to a vw coefficient, and the intercept converted to rem at 16px per rem. Everything runs client-side in your browser; nothing you enter is uploaded anywhere.

Typical uses: a hero heading that moves from 32px on phones to 56px on desktop without a stack of media queries; body text nudged from 16px to 18px across the same range; consistent type scales in design systems where every step shares the same viewport bounds. Because clamp() is a single declaration, it also shrinks CSS compared with breakpoint-by-breakpoint overrides and removes the sudden jumps users notice when a media query fires.

Practical tips: keep the rem output for anything user-facing, since px-only clamps ignore browser text-size preferences. Check the preview at the exact min and max viewport widths — the computed size should land precisely on your two targets, which is a quick way to catch a typo in the inputs. If your sizes should decrease as the viewport grows, the tool handles the negative slope and orders the clamp bounds correctly, since clamp() always expects the smaller value first.