Fluid type system

A clamp-based type scale with a very wide top end, so display type is enormous on desktop without breaking small screens.

Grade: ARuntimes: cssStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

Editorial-motion layouts live or die on one headline being genuinely huge. Breakpoint-stepped type either caps the top end or produces a jarring jump at the breakpoint. A clamp scale keeps the ratio continuous, which means the headline can be 14rem on a wide display and 3.5rem on a phone with no media query in between.

Implementation

Drop into your global stylesheet before any component CSS.

Dependencies: none

html-css-js

:root {
  --fs-display: clamp(3.5rem, 12vw, 14rem);
  --fs-h1: clamp(2.5rem, 6vw, 6rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 3rem);
  --fs-body: clamp(1rem, 1.05vw, 1.125rem);
  --fs-label: 0.8125rem;

  --leading-display: 0.9;
  --leading-body: 1.55;
  --tracking-display: -0.03em;
  --tracking-caption: 0.08em;
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  max-width: 62ch;
}

.t-caption {
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

Use it when

Any page in this direction — this is the substrate the other patterns assume.
Marketing, portfolio, and editorial pages where type carries the layout.

Avoid it when

Dense product UI, where predictable fixed sizes matter more than continuity.
Anywhere a designer needs pixel-exact type at specific widths.

Accessibility

Use `rem` for both clamp bounds so the scale still responds to the user's browser font size.
Never clamp below 1rem for body text.
Tight leading (0.9) is fine for display type but must not be applied to running text.

Performance

Pure CSS, zero runtime cost.
Declare the scale once in `:root`; do not recompute per component.

Knobs

display max: Upper clamp bound for the hero statement. Default: 14rem
display min: Lower clamp bound, at ~360px viewport. Default: 3.5rem
viewport slope: The `vw` term. Higher scales faster with width. Default: 12vw

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Add a fluid type scale to the global stylesheet using clamp() with rem bounds. Declare --fs-display through --fs-label plus matching leading and tracking custom properties in :root, then expose them as utility classes. Display sizes get 0.9 leading and -0.03em tracking; body text gets 1.55 leading, no negative tracking, and a 62ch max-width. Do not add breakpoint-stepped font sizes.