Skip to main content
Book Consultation →
CSS100% FreeInstant

CSS Clamp Calculator: Fluid Typography Generator

This free CSS clamp calculator creates fluid clamp() values for font sizes and spacing. Give the smallest and largest size and the screen widths between which it should scale.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

Fluid type changes smoothly with the screen instead of jumping at breakpoints. The CSS clamp() function does this in one line, but the numbers need a little maths. This tool does the maths and writes the line.

Enter your smallest and largest sizes and the screen widths where they apply.

How to Use This Tool

  1. Enter the minimum and maximum size in pixels.
  2. Enter the minimum and maximum screen width.
  3. Press Generate.
  4. Copy the clamp() value.

How the Calculation Works

The slope is the size change divided by the width change. The intercept makes the line pass through the minimum point. Both are converted to rem by dividing by the root font size, and the slope is multiplied by 100 for vw. The result is clamp(min rem, intercept rem + slope vw, max rem).

Worked Example

A size growing from 16 px at 360 px to 24 px at 1200 px gives clamp(1rem, 0.7857rem + 0.9524vw, 1.5rem).

Common Uses

  • Responsive headings and body text.
  • Fluid spacing and padding.
  • Fewer media queries.
  • Design system tokens.

Tips and Common Mistakes

  • Keep the maximum below about 2.5 times the minimum for good zoom behaviour.
  • Test with browser zoom.
  • Use the same viewport range across a site.

Next, you may need the px to rem converter, aspect ratio calculator, box shadow generator, border radius generator.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

A CSS function with three values: a minimum, a preferred value and a maximum. The result is the preferred value limited to that range.
The preferred value mixes rem and vw, so the size grows smoothly with the screen between two widths and stays fixed outside them.
Using rem keeps the text responsive to the user’s own font size setting, which helps accessibility.
slope = (max − min) ÷ (maxViewport − minViewport); intercept = min − slope × minViewport; preferred = intercept + slope × 100vw.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.