A type scale in CSS

Pick a ratio, generate the steps, and stop choosing font sizes by eye.

:root {
  --ratio: 1.25;
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
}

body { font-size: var(--step-0); line-height: 1.6; }
h3 { font-size: var(--step-1); line-height: 1.4; }
h2 { font-size: var(--step-2); line-height: 1.3; }

h1 {
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

How it works

1. Each step is the one below it times the ratio.
2. clamp() makes a step fluid between a floor and a ceiling.
3. Line height should fall as size rises, so headings stay tight.

Keywords and builtins used here

• calc
• clamp
• em
• rem
• var
• vw

The run, in numbers

Lines

18

Characters to type

467

Tokens

142

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 100 seconds.

Type this snippet

Step 3 of 3 in Foundations, step 3 of 9 in Organizing CSS.

← Previous Next →