Loading…
Generate fluid font sizes with CSS clamp().
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem); /* px units: font-size: clamp(16px, 13.1831px + 0.7512vw, 24px); */
| Viewport | Fluid size | rem | State |
|---|---|---|---|
| 320px | 16px | 1rem | clamped (min) |
| 375px | 16px | 1rem | scaling |
| 576px | 17.5099px | 1.0944rem | scaling |
| 768px | 18.9521px | 1.1845rem | scaling |
| 1024px | 20.8751px | 1.3047rem | scaling |
| 1280px | 22.7981px | 1.4249rem | scaling |
| 1440px | 24px | 1.5rem | scaling |
| 1920px | 24px | 1.5rem | clamped (max) |
📐 The math: fluid type scales linearly between your two viewport points. slope = (maxFs − minFs) / (maxVp − minVp) × 100 gives the growth in vw, and intercept = minFs − slope × minVp / 100 is the px offset. The preferred value intercept + slope × vw scales with the viewport, while clamp(min, preferred, max) pins it inside your font-size range. rem output uses your root font size, so the result respects user zoom preferences.
Fluid typography scales smoothly with the viewport instead of jumping at breakpoints. The modern way to do it is one line of CSS — clamp(min, preferred, max) — but computing the vw slope and rem intercept by hand is error-prone. This calculator does the algebra for you: enter your minimum and maximum font sizes and the viewport range they apply to, and get a copy-paste-ready clamp() declaration plus a table of the exact rendered size at common viewports.
Between your two viewport points the size is a straight line: slope = (maxFont − minFont) / (maxViewport − minViewport) × 100, expressed in vw, and intercept = minFont − slope × minViewport / 100, in px. The preferred middle value intercept + slope × vw does the scaling; clamp()then guarantees the result never goes below your minimum on small phones or above your maximum on wide monitors. The scale table shows exactly where the "scaling" zone ends and clamping begins.
Browsers let users set a default font size, and sizes declared in px ignore that preference. This tool outputs the clamp in rem units (using your root font size, 16px by default), so the whole scale respects user zoom. The viewport-relative part still needs vw — mixing rem + vw inside the preferred value is exactly how clamp() is meant to be used, and it keeps both scaling and accessibility intact.
A common starting point for body text is 16px at a 375px phone up to 18–20px at a 1440px desktop; headings tolerate much wider ranges, like 28px → 48px. Avoid a slope so steep that text balloons on tablets — check the computed size at 768px in the table. And remember the range is a viewport range, not a device range: users resizing a desktop window move through the whole scale, so keep the fluid behavior pleasant at every width in between.
The CSS Clamp Calculator lets you figure out css clamp calculatorinstantly, without reaching for a spreadsheet or doing the math by hand. Whether you're planning a budget, checking a loan, or working through homework, the tool applies the correct formula behind the scenes and shows the result the moment you enter your numbers.
Unlike a static chart or table, this calculator adapts to your exact inputs. You can adjust any value and see the outcome update in real time, which makes it easy to compare scenarios — for example, "what if the rate were 1% lower?" or "what if I paid an extra $50 a month?"
Common uses: people reach for this tool when they need to find a css clamp font size generator, fluid typography clamp calculator, responsive font size without media queries, or clamp min preferred max calculator.
Browser-based tools like this one have a few real advantages over installed software or manual methods:
More tools you might find useful