Responsive Type System

1. Scale inputs

All viewport and body sizes are in CSS pixels at the browser default 16px root. Ratios and line height are unitless.

Adjust the range to update all roles.

2. Size table

These are calculated CSS pixel sizes at a 16px root. Clamp holds outside the stated viewport interval.

3. Reading preview

Resize the sample viewport and simulate 100–200% root text enlargement. The final font and real browser zoom can produce different wrapping.

4. CSS tokens

The CSS uses rem for limits and vw for the fluid term. Apply .type-system to the text container and one .type-* role class to each element.

/* Assumes 1rem = 16px at the browser default; rem endpoints grow with the user root-font setting. */
:root {
  --type-small: clamp(0.888889rem, calc(0.860119rem + 0.143849vw), 0.989583rem);
  --type-body: clamp(1rem, calc(0.946429rem + 0.267857vw), 1.1875rem);
  --type-lead: clamp(1.125rem, calc(1.039286rem + 0.428571vw), 1.425rem);
  --type-heading3: clamp(1.265625rem, calc(1.138661rem + 0.634821vw), 1.71rem);
  --type-heading2: clamp(1.423828rem, calc(1.24435rem + 0.897388vw), 2.052rem);
  --type-heading1: clamp(1.601807rem, calc(1.355923rem + 1.229419vw), 2.4624rem);
}
.type-system {
  line-height: 1.55;
  max-width: 68ch;
}
.type-small { font-size: var(--type-small); }
.type-body { font-size: var(--type-body); }
.type-lead { font-size: var(--type-lead); }
.type-heading3 { font-size: var(--type-heading3); }
.type-heading2 { font-size: var(--type-heading2); }
.type-heading1 { font-size: var(--type-heading1); }