How does clamp() work for font sizes?

clamp(min, preferred, max) takes three values — the preferred one typically mixes a viewport unit with a rem term, and the min and max cap it at both ends. The browser recalculates on every resize.

Is fluid typography accessible?

Yes, if the sliding term includes a rem component — pure viewport units break browser zoom and fail WCAG's resize requirement. The standard formulas all mix vw with rem for exactly this reason.

What viewport range should the scale slide across?

Match your layout's real range — commonly from a small phone (~360–390px) to wherever your container caps (~1200–1440px). Below and above the range, the clamp's min and max hold.

Should spacing be fluid too?

If type is fluid and spacing is fixed, the proportions between text and the space around it drift as the viewport changes. Fluid systems scale both with one shared slope, so the composition holds at every width.

When is fluid typography the wrong choice?

Dense application UI — dashboards, tables, toolbars — where predictable, testable sizes beat smooth scaling. Fluid type earns its keep on content pages, where reading distance and drama vary with screen size.

Fluid Typography & Spacing: The Practical Guide

Q: What is fluid typography?

Font sizes defined as a function of the viewport width — a smooth glide between a minimum and a maximum instead of fixed sizes that jump at breakpoints. CSS's clamp() function made it a one-line technique.

Fluid typography replaces the breakpoint jump with a glide: font sizes are functions of the viewport width, sliding smoothly between a minimum and a maximum, so the hierarchy is right at every width instead of correct at three widths and tolerable between them. CSS’s clamp() made the technique one line long; the craft is in the numbers inside it. This hub collects our guides; the moving picture is a whole system in fluid mode.

One slope, not thirty clamps

The naive version of fluid type writes a separate clamp for every size and hopes the slopes agree. The systematic version — the one Scale Composer implements in its fluid mode — puts one clamp on the root font size and lets every rem-based value ride it: the entire type scale, and the spacing derived from the same scale, breathe together with a single viewport slope. The guides here cover both the per-value math (you’ll meet it in the wild) and the root-based architecture that makes most of it unnecessary. If the idea is new, what is fluid typography is the ground floor and fluid vs breakpoint typography the honest comparison — fluid is not automatically better, it is better for continuous content at unpredictable widths. Fluid spacing: one slope for everything extends the root-based argument to the space between elements, where the single slope pays most visibly: text and the space around it stay proportional instead of drifting apart mid-resize.

The numbers inside the clamp

A fluid size is four decisions: the size at the small end, the size at the large end, and the viewport range the glide spans. Everything else — the slope, the intercept, the vw/rem mix — is derived arithmetic, and deriving it honestly is what separates fluid systems from fluid accidents. The calculation guides walk it with real numbers, including the accessibility term that keeps browser zoom working. CSS clamp() explained grounds the function itself; calculating a fluid type scale derives a full scale step by step; and choosing min and max viewports covers the range decision most tutorials skip — the glide should span your layout’s real widths, not a device chart’s. The accessibility stakes are concrete: a size in pure vw ignores browser zoom entirely, which is the vw unit pitfall, and the zoom test against WCAG 1.4.4 is how you verify the rem term actually does its job.

Line height, Tailwind, and when to say no

Two practical details decide whether a fluid system feels considered. Line height in fluid systems handles the interaction the glide creates: as sizes slide, unitless line heights follow proportionally — right for body text, slightly wrong for large headings unless corrected. And fluid typography in Tailwind maps the technique onto a utility workflow, where the root-based approach turns out to need less configuration than per-size clamps. The honest counterweight is when not to use fluid type: dense application UI — dashboards, tables, toolbars — wants predictable, testable sizes, and a glide nobody notices is complexity nobody needed.

Where fluid meets the rest of the system

Fluid mode is a rendering decision on top of the same scale everything else uses: the type scale defines the sizes, the spacing system defines the distances, and fluid mode makes both viewport-dependent without touching their proportions. The layout grid’s breakpoints don’t disappear — columns still change in steps — but the type inside them stops jumping.

Guides in this hub

Calculating a Fluid Type Scale Step by Step
Build a fluid type scale from four inputs: base sizes and viewport range. One clamp on the root, every rem size rides it — worked table plus fluid spacing.
Choosing Min and Max Viewports
Choosing the fluid typography viewport range: where the glide starts and stops, why clamps hold flat outside it, and three real slopes computed in full.
CSS clamp() Explained with Real Numbers
CSS clamp() explained by fully computing one real example — slope, intercept, and the vw + rem preferred value — verified at 360px, 800px, and 1280px.
Fluid Spacing: One Slope for Everything
A fluid space scale makes spacing glide with fluid type on one shared slope, so proportions hold at every width. The math, the round() detail, real values.
Fluid Type and WCAG 1.4.4: The Zoom Test
Fluid typography accessibility hinges on the rem/vw split inside clamp(). Why zoom needs the rem term, the 200% test protocol, and numbers that pass WCAG 1.4.4.
Fluid Typography in Tailwind
Tailwind fluid typography without a plugin: computed clamp() values in the v4 @theme block, or one root clamp that makes every rem utility glide.
Fluid vs Breakpoint Typography
Responsive vs fluid typography: breakpoint sizes are predictable and testable, clamp() glides between them. When each wins — and the hybrid most products ship.
Line Height in Fluid Systems
Fluid line height: what leading should do when sizes glide — unitless multipliers, rem baseline multiples that lock ratios, and per-value clamps compared.
The vw Unit Pitfall
Why pure vw font size fails: no bounds, zoom-deaf, one number locking size and slope. 4vw evaluated at five widths, and the bounded clamp() that replaces it.
What Is Fluid Typography?
Fluid typography makes font sizes a function of viewport width — a minimum, a maximum, and a smooth glide between. The formula, the system, what stays fixed.
When NOT to Use Fluid Type
Fluid typography drawbacks, honestly: dense app UI, screenshot QA, extreme ranges and zoom-critical audiences — when fixed sizes are the right call.

Watch the glide

Fluid type is the rare technique that explains itself in motion: toggle the same system between fixed and fluid — the sizes hold their relationships while their absolute values start tracking the viewport. One resize with the toggle on teaches the concept faster than any formula.