Home / Typography & Color / Type Scale
5.1 · Type

Type Scale &
Hierarchy.

Predetermined font sizes that work together. Pick a ratio, multiply up and down from base. The demo shows the live specimen.

What it is

A type scale is a system of predetermined font sizes that work harmoniously together. Instead of choosing random sizes (40px here, 22px there), you pick a scale ratio — like 1.25x or 1.414x — and multiply up and down from a base size. This creates visual harmony because every size is mathematically related to the others. Hierarchy means using size, weight, and color to communicate importance.

How it works

Start with a base body size of 16–18px. Multiply by your ratio for each level. At 1.25× from 16: body=16, H4=20, H3=25, H2=31, H1=39, display=49. For landing pages, be more aggressive — H1 at 56–80px. The clamp() CSS function creates fluid typography that scales smoothly with viewport width.

clamp(min, fluid, max)Font size fluidly between min and max — clamp(40px, 6vw, 80px)
Font weight100=thin, 400=normal, 600=semibold, 700=bold, 900=black
Letter-spacingNegative values (-0.02em) on large headings makes them feel tighter and modern
Line-height1.1–1.2 for headings, 1.6–1.7 for body text — critical for readability

Live demo

Resize your window — the display sizes fluidly clamp.

Live · resize me
Displayclamp(56,8vw,96)
Quiet things.
H1clamp(40,5vw,64)
Built with intention.
H2clamp(28,3.5vw,44)
For teams that ship.
H324 / 600
A subsection
Body17 / 1.7 lh
This is a paragraph at the default body size. Line height is generous — 1.7 — so the text breathes and the eye can scan multiple lines without strain. Body sizes are usually one or two ticks below the smallest heading.
Small14 / 1.5 lh
Used for captions, metadata, and tertiary information. Muted color, smaller line-height, never used for primary content.

Copy this prompt

Prompt · 5.1 Type Scale 
Define a complete typography system using CSS custom properties. --font-display: clamp(56px, 8vw, 96px), font-weight:800, letter-spacing:-0.04em, line-height:1.05. --font-h1: clamp(40px, 5vw, 64px), font-weight:700, letter-spacing:-0.02em. --font-h2: clamp(28px, 3.5vw, 44px), font-weight:600. --font-h3: 24px, font-weight:600. --font-body: 17px, font-weight:400, line-height:1.7. --font-small: 14px, font-weight:400, color: muted gray. Apply this system consistently throughout the page so the visual hierarchy is immediately clear.

Example sites to study