Responsive Font Size Calculator

Your designer wants headings that are 24px on mobile and 48px on desktop, scaling smoothly between 375px and 1440px viewports. The CSS clamp() function does exactly this — but the formula clamp(1.5rem, 0.75rem + 2.25vw, 3rem) requires calculating the slope and intercept from your min/max values and breakpoints. Getting the math wrong means the font either stops scaling or overshoots.

Why This Calculator (Not the PX to REM Converter)

PureDevTools has a PX to REM Converter for simple unit conversion. This calculator generates CSS clamp() formulas for fluid typography — enter minimum and maximum font sizes with viewport breakpoints, and get the complete clamp() declaration with the correct slope calculation. It also shows a scaling preview across common viewports and generates fallback CSS for older browsers.

What Is CSS clamp() for Typography?

CSS clamp() is a built-in CSS function that restricts a value between a minimum and a maximum, with a preferred value that scales fluidly. For typography, it enables fluid type scaling — font sizes that grow smoothly as the viewport widens, eliminating the need for discrete @media query breakpoints.

font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);

This declaration means:

• Minimum: Never smaller than 1rem (16px at default root font size)
• Preferred: Scales with the viewport width using a linear formula
• Maximum: Never larger than 2rem (32px at default root font size)

The result is typography that scales smoothly from mobile to desktop without layout shifts or jarring jumps.

The Fluid Typography Formula

The preferred value inside clamp() is a linear function of viewport width:

preferred = slopeVw × vw + intercept

Where:

• slopeVw is the rate of size change per 1vw of viewport width (in px)
• intercept is the fixed offset (in px or rem)

Given your target sizes and viewport breakpoints:

slope     = (maxFontSize − minFontSize) / (maxViewport − minViewport)
slopeVw   = slope × 100
intercept = minFontSize − slope × minViewport

For example, scaling from 16px at 320px viewport to 24px at 1280px:

slope     = (24 − 16) / (1280 − 320) = 8 / 960 ≈ 0.00833
slopeVw   = 0.00833 × 100 ≈ 0.8333
intercept = 16 − 0.00833 × 320 ≈ 13.3333px

font-size: clamp(16px, calc(0.8333vw + 13.3333px), 24px);

How to Use This Tool

1. Enter min font size — The smallest the font should be (at the minimum viewport). Typical values: 14–16px for body text.
2. Enter max font size — The largest the font should be (at the maximum viewport). Typical values: 18–24px for body text.
3. Enter min viewport — The viewport width where scaling starts. Common value: 320px (minimum mobile).
4. Enter max viewport — The viewport width where scaling stops. Common value: 1280px or 1440px.
5. Choose unit — Switch between px and rem. When using rem, set the root font size to match your project’s html { font-size }.
6. Copy the CSS — Click Copy to grab the generated clamp() declaration, then paste into your stylesheet.

px vs rem: Which Should You Use?

For typography accessible to all users, prefer rem — it respects the user’s system font size setting. A user who sets their browser font to 20px will get proportionally larger text, while px ignores that preference.

Fallback CSS for Older Browsers

clamp() is supported in all modern browsers, but for completeness the tool generates a simple fallback:

/* Fallback for browsers without clamp() support */
font-size: 16px;

/* Fluid: 16px at 320px viewport → 24px at 1280px viewport */
font-size: clamp(16px, calc(0.8333vw + 13.3333px), 24px);

Browsers that do not understand clamp() (Internet Explorer, very old Safari) will use the first font-size declaration and ignore the second. Modern browsers parse declarations top-to-bottom and apply the last valid rule, so they will use the clamp() version.

Common Font Scaling Recommendations

Body Text

Headings

Type Scale with Modular Ratios

For consistent sizing across all heading levels, apply the same viewport range but multiply each level’s target sizes by a modular ratio (commonly 1.25 or 1.333):

/* Modular scale (1.25 ratio), generated with clamp */
h1 { font-size: clamp(2rem,   calc(2.5vw + 1rem),   3rem); }
h2 { font-size: clamp(1.6rem, calc(2vw + 0.8rem),   2.4rem); }
h3 { font-size: clamp(1.3rem, calc(1.5vw + 0.65rem), 1.9rem); }

Integrating with Your CSS

Apply the generated clamp() directly to a CSS custom property for easy reuse:

:root {
  --font-size-body: clamp(16px, calc(0.8333vw + 13.3333px), 24px);
  --font-size-h1:   clamp(28px, calc(2.5vw + 20px), 48px);
}

body {
  font-size: var(--font-size-body);
}

h1 {
  font-size: var(--font-size-h1);
}

Or use it directly in utility classes for Tailwind:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      fluid: "clamp(1rem, calc(0.8333vw + 0.8333rem), 1.5rem)",
    },
  },
};

Browser Support

clamp() is supported in all major modern browsers:

Global support is above 97% as of 2026. Internet Explorer does not support clamp() — use the fallback declaration if you need IE support.

Frequently Asked Questions

What is the difference between clamp() and media queries for font sizes? Media queries create discrete jumps — the font size changes suddenly at each breakpoint. clamp() with a vw-based preferred value creates a completely smooth, continuous scaling between your min and max sizes. There are no breakpoints: the font grows linearly with the viewport width across the entire range.

Why is the preferred value in clamp() a calc() expression? The preferred value must be a length — it cannot be a bare vw unit alone, because adding a vw term with a fixed offset (the intercept) requires calc(). The formula calc(0.8333vw + 13.3333px) is how you express a linear function of viewport width in CSS.

Can the intercept be negative? Yes, and that is completely valid CSS. For example, if your min font size is small but your min viewport is large (e.g., scaling from 20px at 900px to 24px at 1200px), the intercept will be negative. The output calc(1.3333vw - 2px) is correct and widely supported.

Should I use px or rem for font sizes in clamp()? Use rem for any text that should respect user font size preferences (body, headings, captions). Use px for UI elements where exact pixel sizing is required (icon sizes, borders). The rem version is more accessible because it scales when the user sets a larger default font in their browser settings.

Does this work with CSS custom properties (variables)? Yes. You can store the generated value in a CSS variable: --font-size-body: clamp(1rem, calc(0.8333vw + 0.8333rem), 1.5rem); and reference it anywhere with font-size: var(--font-size-body);. Custom properties work inside clamp() as well.

Is my data sent to a server? No. All calculations happen entirely in your browser. No font size data is transmitted anywhere and nothing is tracked.