Home / Snippets / Typography /

Clamp heading system

Docs page excerpt: three levels share one rhythm—the variables live on the card for easy copy-out.

API reference

Authentication

OAuth device flow

Exchange the device code before the user code expires; see rate limits on the errors page.

Widely Supported

typographydesign-tokensno-js

Quick implementation

.type-scale {
  --step-1: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  --step-2: clamp(1.35rem, 1rem + 1.4vw, 1.85rem);
  --step-3: clamp(1.1rem, 0.95rem + 0.55vw, 1.25rem);
}
.type-scale h2 { font-size: var(--step-1); }
.type-scale h3 { font-size: var(--step-2); }
.type-scale h4 { font-size: var(--step-3); }

Prompt this to your LLM

Design systems and documentation sites.

You are defining a three-step fluid type scale for headings.

Goal: CSS custom properties --step-1, --step-2, --step-3 using clamp() with vw for the fluid middle term.

Constraints:
- Map h2→step-1, h3→step-2, h4→step-3.
- Keep a clear size gap between steps at max width.

Return a .type-scale { } ruleset.

Why this matters in 2026

Tokenized scales ship in component libraries; one source of truth prevents “almost the same” heading sizes.

The logic

Custom properties on a container let you swap the whole scale for marketing vs. app shells.

Accessibility & performance

Verify hierarchy in the accessibility tree: levels should still map to h1–h6 semantics in real pages.