A type scale is a set of font sizes built from one base size and one ratio — not picked one by one. Pick a starting size, pick a multiplier, and every heading level follows from the same rule.
Where you meet it
- Every design system — Material, Tailwind, the type ramp in any UI kit.
- Deciding how much bigger an
h1should be than body text — and keeping that gap consistent across pages. - Tools like Type Scale and Modular Scale that just expose the base and the ratio as two dials.
What it does
It replaces a pile of guessed pixel values with one relationship. Change the base and everything resizes together; change the ratio and the steps spread apart or pull in — but they stay in proportion. That proportion is what reads as "designed" rather than arbitrary.
A type scale isn't a list of sizes — it's one base and one ratio. Change either, and the whole ramp re-tunes itself.
How it works
Each step is the previous size times the ratio. In formula form: size = base × ratio^step, where step counts up for headings and down for captions.
base = 16px
ratio = 1.25 (a "major third")
step 0 → 16 × 1.25^0 = 16.0px body
step 1 → 16 × 1.25^1 = 20.0px h3
step 2 → 16 × 1.25^2 = 25.0px h2
step 3 → 16 × 1.25^3 = 31.25px h1
step -1 → 16 × 1.25^-1 = 12.8px captionA bigger ratio (say 1.618, the golden ratio) means more dramatic jumps; a smaller one (1.125) keeps the levels close. You normally ship the results as design tokens in rem so the whole scale respects the user's root font size.
Watch out
- Prefer
removerpxfor sizes:remis relative to the root font size, so the scale honors a reader who bumps their browser's default. Hard-codedpxignores that. emis relative to the parent's font size and compounds when you nest elements — easy to get runaway sizes.remnever compounds.- A pure ratio gets huge at the top and tiny at the bottom. Round the values for legibility and set a sensible minimum body size.
Go deeper
Eine Type Scale ist ein Satz Schriftgrößen aus einer Basisgröße und einem Verhältnis — nicht Stück für Stück geraten. Startgröße wählen, Multiplikator wählen, und jede Überschriftsebene ergibt sich aus derselben Regel.
Wo es vorkommt
- In jedem Designsystem — Material, Tailwind, die Größenleiter jedes UI-Kits.
- Beim Entscheiden, wie viel größer eine
h1als der Fließtext sein soll — und diesen Abstand seitenübergreifend konsistent halten. - Tools wie Type Scale und Modular Scale, die Basis und Verhältnis einfach als zwei Regler zeigen.
Was es tut
Es ersetzt einen Haufen geratener Pixelwerte durch eine Beziehung. Ändere die Basis, und alles skaliert mit; ändere das Verhältnis, und die Stufen ziehen auseinander oder rücken zusammen — bleiben aber proportional. Genau diese Proportion liest sich als "gestaltet" statt willkürlich.
Eine Type Scale ist keine Liste von Größen — sie ist eine Basis und ein Verhältnis. Ändere eins, und die ganze Leiter stimmt sich neu.
Wie es funktioniert
Jede Stufe ist die vorige Größe mal dem Verhältnis. Als Formel: size = base × ratio^step, wobei step für Überschriften hochzählt und für Captions runter.
base = 16px
ratio = 1.25 (eine "große Terz")
step 0 → 16 × 1.25^0 = 16.0px Fließtext
step 1 → 16 × 1.25^1 = 20.0px h3
step 2 → 16 × 1.25^2 = 25.0px h2
step 3 → 16 × 1.25^3 = 31.25px h1
step -1 → 16 × 1.25^-1 = 12.8px CaptionEin größeres Verhältnis (etwa 1.618, der Goldene Schnitt) bedeutet dramatischere Sprünge; ein kleineres (1.125) hält die Ebenen eng beisammen. Üblicherweise gibst du die Ergebnisse als Design-Tokens in rem aus, damit die ganze Skala die Root-Schriftgröße der Nutzenden respektiert.
Worauf achten
- Nimm
remstattpxfür Größen:rembezieht sich auf die Root-Schriftgröße, also folgt die Skala Lesenden, die ihre Browser-Standardgröße hochsetzen. Hartkodiertepxignorieren das. embezieht sich auf die Schriftgröße des Elternelements und akkumuliert bei verschachtelten Elementen — schnell entgleist die Größe.remakkumuliert nie.- Ein reines Verhältnis wird oben riesig und unten winzig. Runde die Werte für die Lesbarkeit und setz eine sinnvolle Mindestgröße für den Fließtext.