CSS Clamp Calculator - Fluid Font Size & Viewport Preview

This CSS Clamp Calculator outputs a rem-safe clamp() string from four inputs: minimum and maximum viewport widths, minimum and maximum font sizes, and root font size. Drag the viewport slider to preview fluid type, then copy a production-ready font-size declaration.

Clamp settings

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

Live viewport preview

Drag the slider to simulate fluid font size between your min and max viewports.

768px · 19.7px

Viewport width: 768px

Fluid typography specimen

font-size: 19.7px at 768px viewport

Generated CSS

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Formula breakdown

Slope: 0.8333vw per viewport unit
Intercept: 0.8333rem at 0vw
Bounds: 1rem → 1.5rem

Sample output at common breakpoints

Rendered font size for the default 16px→24px clamp between 320px and 1280px viewports. Values pin at the min and max outside that range.

Viewport	Rendered size
320px	16px
768px	20px
1280px	24px
1440px	24px (capped)

Why fluid type beats breakpoint ladders

Responsive typography used to mean a staircase of media queries-16px on mobile, 18px on tablet, 20px on desktop. Each jump can feel abrupt when users resize a window or rotate a tablet. CSS clamp() replaces that ladder with one declaration that linearly interpolates between a minimum and maximum font size across a viewport range. The browser handles the math at every width in between, so headings and body copy scale smoothly without extra @media blocks.

This calculator encodes the standard linear formula designers use in Figma and front-end blogs: compute a slope between your min and max sizes, derive a y-intercept at the minimum viewport, express the preferred value as rem + vw, and clamp the result between rem bounds converted from your px tokens. The output is copy-ready for any stylesheet.

The clamp formula step by step

Given minimum viewport minVw, maximum viewport maxVw, and font sizes minSize and maxSize at those widths, the tool calculates:

slope = (maxSize − minSize) / (maxVw − minVw)
yIntercept = minSize − slope × minVw
preferred = (yIntercept / root)rem + (slope × 100)vw
clamp = clamp(minSize/root rem, preferred, maxSize/root rem)

Default inputs (320px-1280px viewport, 16px-24px type, 16px root) produce font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem); At 320px viewport the specimen renders 16px; at 1280px it reaches 24px; mid-range widths interpolate linearly-exactly what the live slider preview demonstrates.

rem-first output for accessible CSS

Using rem for the constant and bound terms keeps typography aligned with user zoom and custom root font-size settings-a core accessibility practice documented on MDN. The vw term adds viewport responsiveness without locking you to fixed px steps. Pair this single-property clamp with line-height and max-width tokens for readable measure, or combine it with the Fluid Typography Calculator when you need a full modular scale rather than one fluid size.

CSS Clamp FAQ

What does CSS clamp() do for font size?

clamp() sets a minimum, preferred, and maximum value for a property. For font-size, the browser uses a fluid middle term-often rem plus vw-between your min and max viewport bounds, but never renders smaller than the floor or larger than the ceiling. One declaration replaces multiple media-query breakpoints for smooth scaling.

How do you calculate clamp() values for fluid typography?

Pick viewport bounds (minVw, maxVw) and font sizes (minSize, maxSize) at those widths. Compute slope = (maxSize − minSize) / (maxVw − minVw), y-intercept = minSize − slope × minVw, then preferred = (yIntercept / root)rem + (slope × 100)vw. Wrap with min and max rem bounds: clamp(minRem, preferred, maxRem).

Should clamp() use rem, px, or vw for the preferred value?

Use rem for the constant term and vw for the viewport-responsive term. rem respects user root font-size preferences; vw ties growth to viewport width. Avoid px in the preferred slot when you want accessible, zoom-friendly typography. This calculator converts your px design tokens to rem using your declared root size.

What root font size should I use?

Match the font-size on your html element-16px is the common browser default. If your design system sets html { font-size: 62.5%; } for easier mental math (1rem = 10px), enter 10 as the root here so rem outputs align with your codebase.

CSS clamp() vs media queries: when is clamp better?

Media queries jump font size at discrete breakpoints, which can feel abrupt on resize. clamp() interpolates linearly between two viewport widths, producing smoother fluid type with less CSS. Use media queries when layout-not just type-must change structurally; use clamp when only the font size should scale continuously.

Can I paste the output into Tailwind or CSS modules?

Yes. The copied line is plain CSS-font-size: clamp(...). Paste it into a component class, a CSS module, or a design-token file. For Tailwind v4, map the clamp string to a custom --text-* theme token or apply it via arbitrary values in @layer utilities.