Typografie-Skalen: Warum ich 13 Stufen gewählt habe und weshalb das Verhältnis entscheidend ist

Robert Bringhursts The Elements of Typographic Style hat gezeigt, dass harmonische typografische Beziehungen denselben mathematischen Verhältnissen folgen, die in der Musik vorkommen: die reine Quarte (1,333), die reine Quinte (1,5) und der Goldene Schnitt (1,618). Ich begann mit einer reinen Quarte und endete mit einer individuellen Progression, die kein Standardverhältnis erzeugt — weil meine Inhaltsstruktur bestimmte Abstufungen zwischen Fließtext und Display-Überschriften erforderte.¹

TL;DR

Eine Typografie-Skala erzeugt eine Hierarchie von Schriftgrößen aus einer Basisgröße und einem mathematischen Verhältnis. Nachdem ich das Typografie-System für blakecrosley.com aufgebaut habe — 13 Stufen von 0,75rem (12px) bis 5rem (80px), ausschließlich mit Systemschriften — habe ich gelernt, dass das Verhältnis weniger wichtig ist als die Abstufungen zwischen Fließtext und H1. Meine Skala verwendet eine ungefähre 1,18-Progression zwischen benachbarten Stufen, macht aber bewusste Sprünge (von 3,875rem zu 5rem), wo die Inhaltsstruktur visuelle Trennung erfordert. Der interaktive Vergleich unten zeigt den Unterschied zwischen strikten Verhältnissen und inhaltsorientierten Anpassungen.

Meine Typografie-Skala: 13 Stufen

Hier ist die tatsächliche Skala aus der critical.css meiner Website:

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

Die Progression zwischen benachbarten Stufen folgt keinem strikten mathematischen Verhältnis. Die Stufen von xs bis xl folgen ungefähr dem Faktor 1,17–1,18. Die Stufen von 5xl bis display springen aggressiver (1,20–1,29), weil die Hero-Überschrift visuelle Trennung von Seitentitel-Überschriften benötigt.²

Warum kein striktes Verhältnis?

Eine strikte große Terz (1,25) ab einer 16px-Basis erzeugt diese Stufen: 16, 20, 25, 31,25, 39,06, 48,83, 61,04. Der Sprung von Fließtext (16px) zu H3 (31,25px) beträgt fast das Doppelte — zu dramatisch für inhaltsreiche Seiten, auf denen H3 häufig vorkommt. Meine Skala komprimiert den mittleren Bereich (18, 21, 25, 30, 36), um Überschriften proportional zum Fließtext zu halten, während sie den oberen Bereich (43, 52, 62, 80) für Display-Typografie erweitert.

Die Inhaltsstruktur bestimmte die Skala, nicht die Mathematik. Ich habe jede Stufe gegen reale Blogbeitragsinhalte getestet und Größen dort angepasst, wo der Blinzeltest fehlschlug.³

Warum Systemschriften

Mein Schriftstapel:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

Das Performance-Argument

Systemschriften laden in null Millisekunden. Keine Netzwerkanfragen, kein FOIT (Flash of Invisible Text), kein FOUT (Flash of Unstyled Text). Diese Entscheidung trägt zu meinem 100/100 Lighthouse-Performance-Score bei.

Benutzerdefinierte Webschriften fügen dem First Contentful Paint typischerweise 100–300ms hinzu, bedingt durch Schriftdatei-Downloads und Browser-Rendering-Entscheidungen. Google Fonts lädt von einem CDN (mindestens ein DNS-Lookup + eine HTTP-Anfrage). Selbst gehostete Schriften eliminieren den DNS-Lookup, erfordern aber weiterhin den Download. Systemschriften eliminieren jede Komponente der Schriftlade-Latenz.⁴

Das Design-Argument

Systemschriften passen zur Plattform. Auf macOS rendert meine Website in SF Pro — derselben Schriftart, die von der macOS-Systemoberfläche, Apple Mail und der Safari-Chrome verwendet wird. Die visuelle Kontinuität zwischen dem Betriebssystem und der Website fühlt sich nativ an, statt markenspezifisch.

Linear, Vercel und Raycast verwenden denselben Ansatz. Das Muster ergab sich aus meinen 16 Produktdesign-Studien: Produkte, die Inhaltslesbarkeit über Markenausdruck stellen, tendieren zu Systemschriften.

Wann benutzerdefinierte Schriften sich lohnen

Benutzerdefinierte Schriften eignen sich für Marketingseiten, Markenidentität und Display-Typografie, bei der die Schriftart DAS Design ist. Meine Website stellt Inhalte in den Vordergrund (Blogbeiträge, Projektbeschreibungen), wobei die Typografie transparent sein sollte — Leser sollten den Inhalt verarbeiten, nicht die Schriftart bemerken.

Das Schriftstärke-System

Vier Schriftstärken decken alle Hierarchie-Anforderungen ab:

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

In Kombination mit den 13 Größenstufen und vier Deckkraft-Ebenen ergeben sich 208 mögliche Kombinationen (13 Größen × 4 Stärken × 4 Deckkraftwerte). In der Praxis verwende ich durchgehend etwa 15 Kombinationen. Das System bietet Flexibilität, ohne bei jeder Textinstanz eine Entscheidung zu erfordern — die meisten Texte verwenden die Größe base, die Stärke normal und die Deckkraft primary.⁵

Responsive Typografie

Das Problem mit einzelnen Verhältnissen

Eine für Desktop entworfene Typografie-Skala erzeugt auf Mobilgeräten überdimensionierte Überschriften. Meine display-Größe von 80px füllt einen 1440px-Viewport wunderschön aus, überwältigt aber einen 375px-Handybildschirm. Anstatt das gesamte System mit Viewport-Einheiten zu skalieren, überschreibe ich bestimmte Breakpoints:

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

Der Fließtext bleibt bei 16px über alle Viewports — Fließtext muss nicht skaliert werden, da 16px auf jedem modernen Bildschirm lesbar bleibt. Nur Display- und Überschriftengrößen werden auf kleineren Viewports reduziert. Der Ansatz ist einfacher als fluide Typografie (clamp()) und liefert vorhersagbare Ergebnisse an bekannten Breakpoints.⁶

Buchstabenabstand bei Display-Größen

Große Schrift benötigt engeres Tracking. Bei 80px erzeugt der Standard-Buchstabenabstand sichtbare Lücken zwischen den Zeichen:

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

Der Buchstabenabstand von -0.03em und die Zeilenhöhe von 1.05 erzeugen kompakte, wirkungsvolle Überschriften. Fließtext bei 16px verwendet den Standard-Buchstabenabstand mit einer großzügigen Zeilenhöhe von 1.7 für Lesbarkeit. Der Kontrast zwischen engen Überschriften und luftigem Fließtext erzeugt visuellen Rhythmus ohne Dekoration.⁷

Typografie testen

Der Blinzeltest

Verengen Sie die Augen oder treten Sie vom Bildschirm zurück. Die Überschriftenhierarchie sollte auf jeder Ebene visuell unterscheidbar bleiben. Wenn H3 und H4 ineinander verschwimmen, ist das Verhältnis für die gewählte Schriftart zu klein.

Ich habe den Blinzeltest auf meine Skala angewandt und festgestellt, dass --font-size-xl (21px) und --font-size-2xl (25px) zunächst verschwammen. Ein Unterschied in der Schriftstärke (xl verwendet normal 400, 2xl verwendet semibold 600) löste die Unterscheidung, ohne die Größen zu ändern. Schriftstärke erzeugt Hierarchie unabhängig von der Größe.⁸

Der Inhaltstest

Füllen Sie jede Überschriftenebene mit echtem Inhalt. Platzhaltertext verschleiert Hierarchie-Probleme, da „Lorem Ipsum” nicht die visuelle Gewichtsvariation realer Sprache aufweist. Ich teste jede Skalenanpassung gegen meinen längsten Blogbeitrag (Hamming-Fehlerkorrektur, über 2.000 Wörter mit H2, H3, H4, Codeblöcken, Tabellen und Fußnoten). Wenn die Skala für den komplexesten Inhalt funktioniert, funktioniert sie für alles.

Wichtige Erkenntnisse

Für Designer: - Beginnen Sie mit einer Basisgröße von 16px und testen Sie Verhältnisse zwischen 1,15 und 1,25 gegen reale Inhalte; strikte mathematische Verhältnisse erfordern oft inhaltsorientierte Anpassungen an den Extremen - Verwenden Sie den Blinzeltest und den Inhaltstest vor der Finalisierung; visuelle Unterscheidbarkeit auf jeder Überschriftenebene ist wichtiger als mathematische Reinheit

Für Entwickler: - Definieren Sie Typografie-Skalen als CSS Custom Properties auf der :root-Ebene; referenzieren Sie var(--font-size-*) in der gesamten Codebasis, um die Ansammlung willkürlicher Schriftgrößen zu verhindern - Erwägen Sie Systemschriften vor benutzerdefinierten Webschriften; die Einsparung von 100–300ms Schriftlade-Zeit summiert sich über jeden Seitenaufruf, und Systemschriften bieten plattformnative Lesbarkeit - Verwenden Sie Breakpoint-Überschreibungen für Display-Größen anstelle von fluider Typografie, wenn vorhersagbare Ergebnisse bei bekannten Breiten wichtiger sind als stufenlose Interpolation

Quellenverzeichnis