CSS clamp() Fluid Typography Calculator

CSS clamp() Fluid Typography Calculator

Fluid typography lets a font size scale smoothly with the viewport instead of jumping between fixed sizes at media query breakpoints. The CSS clamp() function makes this a one-line declaration: it takes a minimum value, a preferred value (usually expressed in viewport-width units), and a maximum value, and the browser continuously interpolates between them as the viewport resizes.

What This Calculator Does

You provide:

• A minimum viewport width and the font size you want at (or below) it
• A maximum viewport width and the font size you want at (or above) it
• Your root font size (usually 16px, used to convert pixel values to rem)

The calculator computes the linear function that connects those two points and expresses it as a ready-to-use clamp() declaration, along with a preview table showing the resulting font size at common device breakpoints.

The Formula

Between the min and max viewport widths, font size scales linearly with viewport width. The rate of change (the "slope") is:

$$slope = \frac{maxFontSize - minFontSize}{maxViewport - minViewport}$$

That slope, expressed as a percentage, becomes the viewport-width (vw) coefficient in the preferred value. The line's y-intercept (in rem) becomes the additive constant:

$$preferred(rem) = yIntercept + slope \times 100 \times vw$$

Below the min viewport, the value is clamped to minFontSize. Above the max viewport, it's clamped to maxFontSize. That's exactly what clamp(min, preferred, max) does natively in CSS - no media queries required.

How to Use It

1. Enter your minimum viewport width (e.g. 320px for small phones) and the font size you want there.
2. Enter your maximum viewport width (e.g. 1440px for a typical desktop) and the font size you want there.
3. Enter your root font size if it isn't the default 16px.
4. Copy the generated font-size: clamp(...) declaration straight into your CSS.
5. Check the preview table to confirm the size looks right at the breakpoints you care about.

Worked Example

Say you want body text to scale from 16px at a 320px-wide phone up to 20px at a 1280px-wide desktop, with a 16px root font size:

• Slope: (20 - 16) / (1280 - 320) = 0.004167 px per px, or 0.4167vw
• Y-intercept: 16 - 0.004167 × 320 = 14.667px → 0.9167rem
• Result: font-size: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);

At a 768px viewport, that evaluates to about 17.87px - smoothly in between, with no visible "jump" at any particular breakpoint.

Why Use clamp() Instead of Media Queries

• Fewer breakpoints to maintain: one declaration replaces several @media rules.
• No visible jumps: text resizes continuously as the window is resized, which feels more polished than a sudden step.
• Accessible by default: because the value bottoms out and tops out at real rem-based sizes, it still respects the user's browser zoom and base font size settings, unlike fixed-vw sizing alone.