Fluid Typography (CSS clamp) Generator

This CSS clamp generator writes a fluid font size for you: text that grows smoothly from a small screen to a large one, without a stack of media queries.

How to use the CSS clamp generator

1. Enter the minimum font size in px: the size you want on small screens.
2. Enter the maximum font size in px: the size you want on large screens.
3. Enter the minimum and maximum viewport widths in px. Between these two widths the text grows smoothly; outside them it stays at the minimum or maximum size.
4. Drag the width slider to resize the preview text and see how it scales.
5. Press copy and paste the clamp() value into your font-size declaration.

How clamp() works

clamp(MIN, PREFERRED, MAX) takes three values. The browser uses the preferred value, but never lets it go below MIN or above MAX. MDN describes it as the same as max(MIN, min(PREFERRED, MAX)). It has been widely available in browsers since July 2020.

For fluid type, the preferred value is a small formula such as 0.8333rem + 2.0833vw. Because 1vw is 1% of the viewport width, that part grows as the screen gets wider, while the rem part gives a fixed starting point.

The maths behind the value

The generator draws a straight line between two points: (minimum width, minimum size) and (maximum width, maximum size). Here is a heading that should be 20px on a 320px phone and 40px on a 1280px desktop:

1. Slope: (40 − 20) ÷ (1280 − 320) = 20 ÷ 960 ≈ 0.020833. Multiply by 100 to get vw: 2.0833vw.
2. Starting value: 20 − (0.020833 × 320) ≈ 13.333px. Divide by 16 to get rem: 0.8333rem.
3. Limits: 20px = 1.25rem and 40px = 2.5rem.

h1 {
  /* 20px at 320px wide, growing to 40px at 1280px wide */
  font-size: clamp(1.25rem, 0.8333rem + 2.0833vw, 2.5rem);
}

Check it at an 800px-wide screen: 13.333 + (0.020833 × 800) ≈ 30px, which is halfway between 20px and 40px, as expected. The generator may round to a different number of decimal places, which makes no visible difference.

Why rem plus vw, and not vw alone?

It is tempting to write font-size: 4vw. The problem is that viewport units are tied to the window size, not to the user’s settings. W3C lists this as a common failure (F94) of WCAG 1.4.4 Resize Text, which says text must be able to grow to 200% without losing content or function. Text sized only in vw does not get bigger when someone zooms or raises their default font size.

Mixing in rem fixes most of this. The rem part, and the rem minimum and maximum, follow the user’s font-size setting and browser zoom. When you zoom, the vw part actually gets smaller, because the viewport becomes fewer CSS pixels wide. So the text still grows, just not quite as much as the zoom level.

Learn more

• CSS Units
• CSS Responsive Design
• CSS Units Explained: px vs rem vs em vs vw (and When to Use Each)
• Responsive Design Breakpoints: How to Choose Them in 2026
• 12 Typography Rules for UI Design (with Examples)
• Web Accessibility Basics: A Beginner’s Guide to WCAG 2.2

Frequently asked questions