Font Size Calculator

The problem fluid typography solves

For years, responsive type meant writing media queries: 16px below 768px, 20px above it, with a jarring jump at the breakpoint. CSS clamp() replaces those steps with a smooth ramp. You give it three things — a minimum size, a preferred size that scales with the viewport, and a maximum — and the browser picks whichever is in the middle at any given width. Below your small breakpoint the text holds at the minimum; above your large breakpoint it holds at the maximum; in between it grows in a perfectly straight line. This calculator's job is to work out the exact preferred expression so the curve hits your two endpoints precisely.

The linear formula behind the clamp

The preferred value is a straight line through two points: (min viewport, min size) and (max viewport, max size). Two numbers define that line. The slope is the rise over the run — how many pixels of font for each pixel of viewport: slope = (maxSize − minSize) / (maxVW − minVW). The intercept is where the line would cross a zero-width viewport: intercept = minSize − slope × minVW. The slope is then expressed in vw units by multiplying by 100 (since 1vw equals 1% of the viewport width), and both the intercept and the bounds are converted to rem by dividing by 16, the browser's default root font size.

A fully worked example

Take the tool's defaults: scale from 16px at a 320px viewport up to 24px at a 1440px viewport.

• slope = (24 − 16) / (1440 − 320) = 8 / 1120 ≈ 0.007143
• as a vw unit: 0.007143 × 100 ≈ 0.7143vw
• intercept = 16 − 0.007143 × 320 ≈ 13.714px, which is 13.714 / 16 ≈ 0.8571rem
• bounds in rem: 16/16 = 1rem and 24/16 = 1.5rem

The tool assembles these into font-size: clamp(1rem, 0.7143vw + 0.8571rem, 1.5rem);. You can verify the endpoints: at a 320px viewport, 0.7143vw is 320 × 0.7143% ≈ 2.286px, plus 13.714px equals exactly 16px. At 1440px it lands on 24px. The live preview panel runs that interpolation at common widths (320, 480, 768, 1024, 1280, 1440, 1920) so you can see the actual rendered size and how far along the ramp each one sits.

The modular type scale

Beyond a single value, the tool builds a whole harmonious set of sizes. A modular scale multiplies a base size by a fixed ratio raised to a step number. With a base of 16px and the Major Third ratio of 1.25, the steps come out as: xs (step −2) = 16 × 1.25⁻² ≈ 10.24px, sm = 12.8px, base = 16px, lg = 20px, xl = 25px, 2xl = 31.25px, and so on up to 4xl. Each step is also output as its own fluid clamp(), scaled proportionally to your min/max font ratio, so the entire hierarchy stays responsive — not just your body copy.

Practical tips

• Prefer rem over px in the output. Because rem is relative to the user's root font size, a reader who bumps their browser's default text size for accessibility still gets larger text. Hard-coded px ignores that preference. This tool gives you both; ship the rem version.
• Pick sensible viewport bounds. 320px (a small phone) to 1440px (a common laptop) covers most real traffic. Setting the max too high makes text grow uncomfortably large on wide monitors.
• Keep the min readable. Never let body text clamp below about 16px; smaller is hard to read on phones and can hurt mobile usability scores.
• Use one ratio per project. Sticking to a single modular ratio is what makes a type system feel intentional rather than ad hoc.

Common mistakes

• Setting min larger than max. If your minimum size exceeds your maximum, the curve is undefined and the tool won't produce a valid clamp — swap them.
• Equal viewport bounds. If min and max viewport are the same, the slope divides by zero. Give the ramp room to scale across a real width range.
• Forgetting the cap matters both ways. clamp() also stops text shrinking below the minimum, which protects legibility on the narrowest screens — don't set the minimum so low that it defeats the purpose.