Fluid Typography Toolkit

CSS clamp() Fluid Type Scale Calculator

Generate production-ready clamp() values, a full fluid type scale, fluid spacing tokens, and a Tailwind config export in one place. Type scales resize smoothly between viewports with no media queries and no JavaScript.

1Single clamp() value

Define the smallest and largest size and the viewports they belong to. The tool interpolates a fluid value between them.

font-size: clamp(1rem, 0.6522rem + 2.1739vw, 3rem);

2Full fluid type scale

Pick a base size and a ratio. Every step gets its own fluid clamp() value plus a line-height suggestion.

The type scale compresses toward the base at the small viewport (times the first factor) and opens up at the large viewport (times the second). One factor pair, applied to every step.

Type scale output

Click any row to copy. Copy All grabs the full CSS custom-property block.

StepMin / Max (px)Line-heightclamp() value
Advertisement slot — leaderboard

Live resizable preview

Drag the slider or the corner handle to resize the preview and watch every step fluidly rescale. Line-heights are applied.

Preview width: 760px  ·  rendered font sizes measured by the browser

3Fluid spacing tokens

Spacing that breathes with the viewport, built from your base size. Drop straight into custom properties.

4Line-height suggestions

How the suggested line-heights are chosen. They ship in the table above and in every export.

  • Body text (steps 0 and below): 1.5 to 1.65 for comfortable long-form reading.
  • Headings (steps +1 to +3): 1.2 to 1.35, tight enough to read as a unit.
  • Display sizes (steps +4 and up): 1.05 to 1.15, editorial-style tightness.
  • Values are unitless so they scale with whatever fluid size is applied.
  • Also consider text-wrap: balance on display headings for cleaner line breaks.

Export

Tailwind v3 config theme extension, Tailwind v4 @theme tokens, and the raw :root block. Each uses your scale settings.

Advertisement slot — rectangle

What is fluid typography?

Fluid typography makes font sizes grow and shrink smoothly with the viewport instead of jumping between fixed sizes at breakpoints. In CSS, the clamp() function does the heavy lifting: clamp(minimum, preferred, maximum) picks a preferred value that scales with the viewport, but never goes below the minimum or above the maximum.

How clamp() works

The preferred value is usually a calculation like 1.2rem + 2.5vw: a fixed base plus a viewport-relative term. At your minimum viewport width it resolves to your minimum size; at your maximum viewport it resolves to your maximum size. Everywhere in between, it interpolates linearly. This calculator derives the exact intercept and slope so the line passes through both of your endpoints.

Why a type scale beats a single size

Accessibility notes

Frequently asked questions

What is the CSS clamp() function?

clamp(min, val, max) resolves to val unless it is smaller than min or larger than max. For typography, val is usually a calc combining a fixed term and a vw term, which makes the size fluid between the two endpoints.

How do I convert px to rem in clamp()?

Divide by your root font size, almost always 16. So 24px becomes 1.5rem. This calculator outputs rem by default because rem respects the user's browser text-size preference, which matters for accessibility.

What viewport range should I use?

A common pair is 360px (small phones) to 1280px (laptops). Sizes below 360px are rare enough that the minimum bound handles them; sizes above 1280px are handled by the maximum bound, so giant monitors don't get giant text.

Which type scale ratio should I pick?

1.333 (perfect fourth) is the safest default: noticeable hierarchy without melodrama. Use 1.25 for dense, content-heavy UIs and 1.5 or 1.618 when you want editorial drama. This tool previews every step, so try ratios and watch the preview.

Does clamp() work in all browsers?

clamp() is supported in all modern browsers released since 2020 (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+). For older browsers you can add a fixed-size fallback declaration before the clamp() line; browsers that understand clamp() will override it.

Can I use fluid type with Tailwind?

Yes. Paste this tool's Tailwind v3 config snippet into theme.extend.fontSize for utilities like text-step-3, or use the v4 @theme tokens in your CSS. Both export tabs generate the code from your current settings.

Copied