Fluid Typography Scale Calculator - Build & Export clamp() Tokens

This Fluid Typography Calculator generates an entire modular type scale-not a single clamp() value. Set min and max viewport widths, body sizes, and a ratio, then copy CSS variables, Tailwind @theme tokens, or an SCSS map with one click.

Scale settings

Live type specimen

Preview every step at the viewport width below.

text-step-0

text-step-0

The quick brown fox

9.1px

text-xs

Extra small

The quick brown fox

11.4px

text-sm

Small

The quick brown fox

14.3px

text-base

Body / base

The quick brown fox

17.9px

text-lg

Large

The quick brown fox

22.3px

text-xl

Extra large

The quick brown fox

27.9px

text-2xl

2XL heading

The quick brown fox

34.9px

Export scale

:root {
  --font-size-step-0: clamp(0.512rem, calc(0.4693rem + 0.2133vw), 0.64rem);
  --font-size-xs: clamp(0.64rem, calc(0.5867rem + 0.2667vw), 0.8rem);
  --font-size-sm: clamp(0.8rem, calc(0.7333rem + 0.3333vw), 1rem);
  --font-size-base: clamp(1rem, calc(0.9167rem + 0.4167vw), 1.25rem);
  --font-size-lg: clamp(1.25rem, calc(1.1458rem + 0.5208vw), 1.5625rem);
  --font-size-xl: clamp(1.5625rem, calc(1.4323rem + 0.651vw), 1.9531rem);
  --font-size-2xl: clamp(1.9531rem, calc(1.7904rem + 0.8138vw), 2.4414rem);
}

Example fluid scale (16px → 20px body, 1.25 ratio)

At a 320px-1280px viewport range with 16px root, body text clamps between 1rem and 1.25rem while larger steps multiply by the ratio at both bounds.

Step Min Max Typical use
text-sm 0.8rem 1rem Captions, labels
text-base 1rem 1.25rem Body copy
text-lg 1.25rem 1.5625rem Lead paragraphs
text-2xl 1.5625rem 1.9531rem Section headings

How fluid type scales differ from single clamp() tools

A single clamp() calculator solves one font-size curve. Design systems need a coordinated ladder-caption, body, subheading, display-where each step shares the same viewport bounds and modular ratio. This page generates that entire ladder at once, then exports it in the format your stack expects.

CSS Clamp Calculator

Best for one-off values: hero titles, section headings, or a lone fluid paragraph size with instant viewport preview.

Fluid Typography Calculator (this page)

Best for design tokens: full scales with export to CSS variables, Tailwind @theme, or SCSS maps-ideal for component libraries and docs sites.

How the clamp() math works

Each step uses clamp(minRem, calc(interceptRem + slopeVw), maxRem). The slope connects pixel sizes at your min and max viewports; rem bounds keep browser zoom accessible. Steps below and above body inherit the same viewport curve scaled by your modular ratio. 

/* Example body token at 320px-1280px, 16px-20px body */
font-size: clamp(1rem, calc(0.9167rem + 0.4167vw), 1.25rem);

Fluid Typography FAQ

What is fluid typography?

Fluid typography uses CSS clamp() so font sizes grow smoothly between a minimum and maximum viewport instead of jumping at breakpoints. Each step in a scale gets its own clamp() token with rem-based min and max values, which keeps text readable on phones and desktops while respecting browser zoom.

CSS clamp calculator vs fluid typography calculator: which should I use?

Use the CSS Clamp Calculator when you need one rem-safe clamp() value with a live viewport preview-for example a single hero heading. Use this Fluid Typography Calculator when you need a full multi-step type scale exported as CSS custom properties, Tailwind @theme tokens, or an SCSS map. Both keep preferred values rem-based for accessibility.

How does the modular ratio work in a type scale?

The ratio multiplies each step above body text and divides each step below it. With a 1.25 ratio and 16px body at the smallest viewport, the next step up is 20px and the step below is 12.8px. Each step receives its own clamp() min and max derived from those pixel bounds.

Why export CSS variables instead of hard-coded pixel sizes?

Custom properties let you reuse the same fluid tokens across components, media queries, and design systems. When viewport bounds or body sizes change, you update one scale definition instead of editing dozens of font-size declarations scattered through your stylesheet.

Does this tool support Tailwind CSS v4?

Yes. The Tailwind @theme export writes fluid font-size tokens you can paste into a v4 theme block. Because each token is a full clamp() expression, Tailwind utilities inherit responsive sizing without extra plugins or JavaScript.

What viewport range should I pick?

A common range is 320px (small phone) to 1280px (large laptop). Match the range to where your layout actually breathes-marketing sites often stop scaling near 1200px while editorial layouts may extend to 1440px. Sizes clamp outside the range so type never shrinks below your minimum or grows above your maximum.

Sources & review

Last reviewed:

Related Dev Tools

Calculator hubs

Related guides