How is a fluid type system different from a single clamp() rule?

A fluid type system applies clamp() to every step in your modular scale, keeping proportional relationships between headings, body, and captions as viewports change.

What minimum font size should fluid body text use?

Never let body text drop below 16px at the minimum viewport. Set your clamp() minimum to at least 1rem regardless of how aggressively headlines scale down.

Can I combine fluid headlines with fixed body text?

Yes. This is a common pattern — fluid clamp() for h1 and h2, fixed rem values for body and UI text. It balances dramatic hero scaling with accessible body copy.

Fluid Type System

Generate a complete responsive type system — clamp() values for every step in a modular scale across your min and max viewport breakpoints.

Fluid Type System

Min viewport (px)

Max viewport (px)

Base size (rem)

Scale ratio

Step	clamp()	Preview
xs	clamp(0.5625rem, 0.5333rem + 0.1458vw, 0.65rem)	Ag
sm	clamp(0.75rem, 0.7125rem + 0.1875vw, 0.8625rem)	Ag
base	clamp(1rem, 0.9500rem + 0.2500vw, 1.15rem)	Ag
lg	clamp(1.33125rem, 1.2646rem + 0.3333vw, 1.53125rem)	Ag
xl	clamp(1.775rem, 1.6854rem + 0.4479vw, 2.04375rem)	Ag
2xl	clamp(2.36875rem, 2.2500rem + 0.5938vw, 2.725rem)	Ag
3xl	clamp(3.15625rem, 2.9979rem + 0.7917vw, 3.63125rem)	Ag
4xl	clamp(4.20625rem, 3.9958rem + 1.0521vw, 4.8375rem)	Ag
5xl	clamp(5.6125rem, 5.3312rem + 1.4063vw, 6.45625rem)	Ag
6xl	clamp(7.48125rem, 7.1063rem + 1.8750vw, 8.60625rem)	Ag

:root {
  --text-xs-fluid: clamp(0.5625rem, 0.5333rem + 0.1458vw, 0.65rem);
  --text-sm-fluid: clamp(0.75rem, 0.7125rem + 0.1875vw, 0.8625rem);
  --text-base-fluid: clamp(1rem, 0.9500rem + 0.2500vw, 1.15rem);
  --text-lg-fluid: clamp(1.33125rem, 1.2646rem + 0.3333vw, 1.53125rem);
  --text-xl-fluid: clamp(1.775rem, 1.6854rem + 0.4479vw, 2.04375rem);
  --text-2xl-fluid: clamp(2.36875rem, 2.2500rem + 0.5938vw, 2.725rem);
  --text-3xl-fluid: clamp(3.15625rem, 2.9979rem + 0.7917vw, 3.63125rem);
  --text-4xl-fluid: clamp(4.20625rem, 3.9958rem + 1.0521vw, 4.8375rem);
  --text-5xl-fluid: clamp(5.6125rem, 5.3312rem + 1.4063vw, 6.45625rem);
  --text-6xl-fluid: clamp(7.48125rem, 7.1063rem + 1.8750vw, 8.60625rem);
}

/* Usage */
/* .heading { font-size: var(--text-3xl-fluid); } */

Live scale

Fluid heading

Subheading scales with viewport

Body text uses the base step. Resize your browser between 320px and 1280px to see the full type system respond smoothly.

What this fluid type system does

This fluid type system generator produces clamp() CSS for every step in a modular scale across your minimum and maximum viewport widths. Build a complete responsive typography system without manual breakpoint math.

How to use it

Set min and max viewport widths matching your layout breakpoints.
Configure base font size and modular scale ratio.
Review clamp() values for each scale step from caption to display.
Copy the complete CSS output into your stylesheet or tokens.
Read the Responsive Typography guide for strategy and best practices.

For deeper context, read the Responsive & Fluid Typography Guide chapter in the Typography Master guide.

Frequently asked questions

How is a fluid type system different from a single clamp() rule?: A fluid type system applies clamp() to every step in your modular scale, keeping proportional relationships between headings, body, and captions as viewports change.
What minimum font size should fluid body text use?: Never let body text drop below 16px at the minimum viewport. Set your clamp() minimum to at least 1rem regardless of how aggressively headlines scale down.
Can I combine fluid headlines with fixed body text?: Yes. This is a common pattern — fluid clamp() for h1 and h2, fixed rem values for body and UI text. It balances dramatic hero scaling with accessible body copy.

Related resources

Responsive & Fluid Typography Guide
Scale type gracefully across viewports with fluid sizing and clamp().