How is the clamp() value calculated?

The preferred term is the straight line through (min viewport, min size) and (max viewport, max size). Working in rem, the slope is (maxRem − minRem) / (maxViewportRem − minViewportRem); the constant term is minRem − slope × minViewportRem, and the viewport coefficient is slope × 100 (because 1vw equals one hundredth of the viewport width). That gives clamp(minRem, constant rem + slope×100 vw, maxRem). The tool also resolves the rendered px size at any width so you can verify it hits your min and max exactly at the right viewports.

How is this different from a static type scale generator?

A static scale gives you fixed sizes — 16px, 20px, 25px — that you then have to wrap in media queries to make responsive. This tool makes every step fluid from the start: each size is a clamp() that interpolates with the viewport on its own, so the whole scale flexes continuously between a phone and a desktop without a single breakpoint.

What does the viewport slider actually show?

It simulates the browser viewport width. As you drag it, the tool evaluates each step’s clamp() at that exact width — applying the same min/preferred/max logic a browser uses — and renders the specimen text at the resulting pixel size, with the number shown next to it. It turns the clamp() expression into something you can see and feel, instead of guessing what it does at 768px or 1200px.

Why have separate small-screen and large-screen ratios?

On a phone you usually want a tight scale so big headings don’t overflow, but on a wide screen you can let display sizes breathe. Setting a smaller ratio at the min viewport and a larger ratio at the max viewport means each step’s minimum is computed with the tight ratio and its maximum with the looser one, so headings scale up faster than body copy as the screen grows.

What does the accessibility audit check?

It flags a minimum body size below the 16px readable floor (and fails it below 14px), confirms the scale uses rem so it still responds to a reader’s browser font-size and zoom settings rather than px which would ignore them, catches an inverted or zero-width viewport range, and warns when the largest step gets big enough to risk overflowing narrow columns.

Which export format should I use?

CSS variables give you a framework-agnostic :root block plus .text-* utility classes with line heights. Tailwind v4 @theme emits each --text-* token (with its --line-height) so the sizes drop straight into a Tailwind v4 setup. The SCSS export is a $font-sizes map for Sass workflows, and JSON gives you the clamp string plus the min/max px and line-height per step for tooling or design-token pipelines.

Responsive Typography Calculator

Build a fully fluid, viewport-driven type system. Set a min/max body size and viewport range and the tool computes the exact rem-based clamp() — with the precise vw slope — then applies fluid clamps across an entire modular scale so every step from sm to 6xl scales on its own. Drag the viewport slider to watch the live specimen resize to the exact computed pixel size, get an accessibility audit (readable floor, rem-vs-px zoom safety), and export to CSS variables, Tailwind v4 @theme, SCSS, or JSON.

About this ToolHow it works, benefits & use cases

A fluid typography calculator built around the one thing most generators get wrong: a precise, rem-based clamp() with the exact viewport (vw) slope. Set a minimum and maximum body size plus the viewport range they apply over, and the tool derives the line through those two points — clamping below the small viewport, clamping above the large one, and scaling linearly in between with no media queries. It then applies fluid clamps across an entire modular scale, so every step from sm to 6xl is independently responsive (and headings can scale harder than body copy on wide screens). The hero is a viewport-width slider: drag it and the specimen text resizes to the exact pixel size the clamp() would render at that width, with the computed value shown live, so the abstract CSS becomes tangible. An accessibility audit checks your readable floor and confirms rem keeps type zoomable, and you can export the whole scale as CSS variables, Tailwind v4 @theme, an SCSS map, or JSON. Every setting is captured in a shareable URL.

How to Use

1Set your minimum body size (small screen) and maximum body size (large screen).
2Set the min and max viewport widths the type should scale between.
3Pick a small-screen and large-screen scale ratio — using a bigger ratio on large screens makes headings grow faster than body copy.
4Drag the viewport slider in the live preview to watch specimens resize to the exact computed pixel size at that width.
5Read the accessibility audit, then choose a format and copy, download, or share the generated fluid scale.

Key Benefits

Precise rem-based clamp() with the exact vw slope, verified to hit min/max at the right breakpoints
A full fluid modular scale — every step from sm to 6xl is responsive, not just one size
Interactive viewport-width slider that renders specimen text at the exact computed px size
Separate small-screen and large-screen ratios so headings can scale harder than body copy
Accessibility audit for the readable size floor and rem-vs-px zoom safety
Export to CSS variables, Tailwind v4 @theme, SCSS map, or JSON
Shareable URL captures the full configuration

Common Use Cases

Replacing a stack of font-size media queries with a single fluid clamp() per step
Generating a complete, responsive heading-and-body scale for a design system
Proving to a stakeholder how a headline behaves between a phone and an ultrawide before shipping
Producing a Tailwind v4 @theme block where each --text-* size is fluid
Auditing whether a min size and unit choice keep type accessible and zoomable

Live preview

@ 908px

Drag to simulate viewport width908px

375px1440px

base17.5px

Body copy reads comfortably at this size on every screen.

3xl39.79px

Card heading

6xl73.98px

Hero

Accessibility checks pass

Minimum body size is 16px — at or above the 16px readable floor.
Sizes are expressed in rem, so they scale with the user’s browser font-size setting and zoom.
Type scales across a 375px → 1440px viewport range.

Fluid scale output

CSS variables · 9 responsive steps

:root {
  --font-size-sm: clamp(0.8331rem, 0.792rem + 0.1756vw, 0.95rem);
  --font-size-base: clamp(1rem, 0.934rem + 0.2817vw, 1.1875rem);
  --font-size-lg: clamp(1.2rem, 1.0999rem + 0.4272vw, 1.4844rem);
  --font-size-xl: clamp(1.44rem, 1.2937rem + 0.6244vw, 1.8556rem);
  --font-size-2xl: clamp(1.7281rem, 1.5199rem + 0.8883vw, 2.3194rem);
  --font-size-3xl: clamp(2.0738rem, 1.783rem + 1.2404vw, 2.8994rem);
  --font-size-4xl: clamp(2.4881rem, 2.0883rem + 1.7061vw, 3.6238rem);
  --font-size-5xl: clamp(2.9863rem, 2.4427rem + 2.3192vw, 4.53rem);
  --font-size-6xl: clamp(3.5831rem, 2.851rem + 3.1239vw, 5.6625rem);
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.text-base {
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: 1.4;
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: 1.3;
}

.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: 1.2;
}

.text-3xl {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}

.text-4xl {
  font-size: var(--font-size-4xl);
  line-height: 1.2;
}

.text-5xl {
  font-size: var(--font-size-5xl);
  line-height: 1.2;
}

.text-6xl {
  font-size: var(--font-size-6xl);
  line-height: 1.2;
}

Start from a preset

Base body size

Min size (small screen)

Max size (large screen)

Viewport range

Min viewport

Max viewport

Scale ratios

Each step multiplies by the ratio. Using a larger ratio at the max viewport makes headings grow faster than body copy on wide screens.

Small-screen ratio

Large-screen ratio

Fluid steps

6xlclamp(3.5831rem, 2.851rem + 3.1239vw, 5.6625rem)57.33→90.6px

5xlclamp(2.9863rem, 2.4427rem + 2.3192vw, 4.53rem)47.78→72.48px

4xlclamp(2.4881rem, 2.0883rem + 1.7061vw, 3.6238rem)39.81→57.98px

3xlclamp(2.0738rem, 1.783rem + 1.2404vw, 2.8994rem)33.18→46.39px

2xlclamp(1.7281rem, 1.5199rem + 0.8883vw, 2.3194rem)27.65→37.11px

xlclamp(1.44rem, 1.2937rem + 0.6244vw, 1.8556rem)23.04→29.69px

lgclamp(1.2rem, 1.0999rem + 0.4272vw, 1.4844rem)19.2→23.75px

baseclamp(1rem, 0.934rem + 0.2817vw, 1.1875rem)16→19px

smclamp(0.8331rem, 0.792rem + 0.1756vw, 0.95rem)13.33→15.2px

Export format

What “fluid” really means

A fluid size interpolates with the viewport instead of jumping at breakpoints. The generated clamp(min, preferred, max) holds your minimum below the small viewport, your maximum above the large one, and scales linearly in between using an exact vw slope — no media queries needed.

Why rem, not px

The fluid term is emitted in rem so it still scales with a reader’s browser font-size and zoom settings. A px-locked clamp looks identical but quietly breaks that accessibility contract — which is why the audit flags it.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Responsive Typography Calculator

How to Use

Key Benefits

Common Use Cases

Live preview

Start from a preset

Base body size

Viewport range

Scale ratios

Fluid steps

Export format

What “fluid” really means

Why rem, not px

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Responsive Typography Calculator