Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.
Eine typografische Hierarchie sagt dem Leser, worum es auf einer Seite geht, wie sie organisiert ist und wo er einsteigen kann — bevor ein einziger Satz gelesen ist. Die Ausgabe von 2005 empfahl, die Hierarchieebenen mit einem konsistenten Verhältnis zwischen 1,2 und 1,5 zu skalieren, und warnte, dass eine schlecht gewählte Grundgröße beim Skalieren zusammenbrechen würde. Beide Punkte haben überlebt, aber jeder hat eine zweite Dimension bekommen, die das Original nicht behandeln konnte: Skalen sind heute fluide statt fest, und Hierarchie im Web ist nicht mehr nur visuell. Sie muss auch strukturell sein, denn ein erheblicher Teil der Leserschaft sieht sie nie.
Was sich seit 2005 geändert hat
Die Empfehlung eines Verhältnisses von 1,2–1,5 reifte zur heute üblichen Praxis modularer Schriftgrößen-Skalen: Jede Größe auf der Seite wird abgeleitet, indem eine Grundgröße wiederholt mit einem Verhältnis multipliziert wird. Gängige Verhältnisse haben Namen aus musikalischen Intervallen erhalten — 1,2 (kleine Terz), 1,25 (große Terz), 1,333 (Quarte), 1,5 (Quinte) —, und der ursprüngliche Bereich bleibt exakt richtig, mit einer Verfeinerung: Das Verhältnis sollte zum Medium passen. Dichte Produktoberflächen und langes Lesen vertragen sanfte Verhältnisse (1,125–1,25), die genügend unterscheidbare Größen liefern, ohne riesige Headlines zu erzeugen; redaktionelle Seiten und Marketingseiten können 1,333 oder 1,5 tragen. Ein Verhältnis, das in einer datenintensiven Anwendung eine 60-Pixel-h2 erzeugt, ist das falsche Verhältnis für diesen Kontext.
Die größere technische Veränderung ist, dass eine Skala nicht mehr aus einem festen Satz von Zahlen bestehen muss. CSS clamp() erlaubt es, jede Stufe der Skala fluide zu machen: eine Größe, definiert mit einem Minimum, einem viewport-relativen bevorzugten Wert und einem Maximum, sodass Überschriften zwischen Smartphone und Desktop stufenlos skalieren, statt an Breakpoints zu springen. Eine gut gebaute fluide Skala nutzt effektiv ein kleineres Verhältnis auf kleinen Bildschirmen und ein größeres auf großen — was dem entspricht, wie Printgestalter Displayschrift schon immer an die Seite angepasst haben. Eine Warnung zur Barrierefreiheit ist unverzichtbar: Der viewport-relative mittlere Term muss mit einer rem-basierten Komponente gemischt werden (zum Beispiel eine Berechnung, die rem und vw kombiniert), niemals reine Viewport-Einheiten. Text, der nur in vw bemessen ist, ignoriert die Schriftgrößen-Präferenz des Nutzers und reagiert nicht auf die Textvergrößerung des Browsers, was die Resize- und Reflow-Anforderungen der WCAG untergräbt. Jeder clamp()-Ausdruck sollte auch einen Nutzer respektieren, der seine Grundgröße auf 200 % gesetzt hat.
Die Warnungen des Originals zum Skalierungsverhalten — abgeschnittene Rahmen, verschwindende Button-Beschriftungen, gebrochene Lesereihenfolge bei 150 % — sind kodifiziert worden. Die WCAG verlangt, dass Text ohne Verlust auf 200 % vergrößerbar ist (1.4.4 Resize Text) und dass Inhalte bei 320 CSS-Pixeln umbrechen (1.4.10). Der alte Rat, "für Skalierung zu gestalten", ist heute schlicht Konformität.
Hierarchie muss strukturell sein, nicht nur visuell
Die wichtigste Ergänzung dieses Kapitels ist unsichtbar. Wer einen Screenreader nutzt, nimmt nicht wahr, dass eine Zeile 32 Pixel groß und fett ist; er nimmt wahr, dass sie ein Überschriften-Element einer bestimmten Ebene ist — oder eben nicht. Screenreader-Nutzer navigieren routinemäßig, indem sie eine Liste der Überschriften aufrufen und zwischen ihnen springen; eine Seite, deren "Überschriften" bloß vergrößerte fette Absätze sind, bietet ihnen überhaupt keine Struktur. Genau das verlangt das WCAG-Erfolgskriterium 1.3.1 Info and Relationships (Level A): Informationen, die durch visuelle Darstellung vermittelt werden — einschließlich Hierarchie — müssen auch programmatisch ermittelbar sein.
Die praktische Disziplin hat zwei Hälften. Erstens muss jede visuelle Überschrift ein echtes Überschriften-Element sein (h1 bis h6), und die Überschriftenebenen müssen die Gliederung des Dokuments abbilden: eine h1 für das Thema der Seite, h2 für Hauptabschnitte, h3 für deren Unterabschnitte, ohne auf dem Weg nach unten Ebenen zu überspringen. Zweitens — und hier irren Gestalter am häufigsten — müssen semantische Ebene und visuelle Größe entkoppelt werden. Die korrekte Überschriftenebene diktiert die Dokumentstruktur; die korrekte Größe diktiert das Design. Wenn beide in Konflikt geraten (eine h2, die bescheiden aussehen soll, eine h4, die Prominenz verdient), behalten Sie die strukturelle Ebene und gestalten sie mit einer Klasse um. Den Tag nach seiner Standardgröße zu wählen ist die Grundursache der meisten kaputten Gliederungen im Web.
Hierarchie jenseits der Größe
Das Kapitel von 2005 behandelte Hierarchie als ein Größenproblem. Reife Praxis verteilt die Arbeit auf vier Variablen — Größe, Strichstärke, Raum und Farbe —, und die Größe ist oft die am wenigsten effiziente davon. Ein Schritt nach oben in der Strichstärke (etwa von 400 auf 600) oder ein Band aus Weißraum über einer Überschrift kann einen neuen Abschnitt ebenso deutlich signalisieren wie ein Größensprung, ohne vertikalen Raum zu verbrauchen oder kleine Bildschirme zu verstellen. Das ist für die Barrierefreiheit ebenso wichtig wie für die Ökonomie: Hierarchien, die sich ganz auf Größe stützen, kollabieren tendenziell in schmalen Viewports, wo Displaygrößen schrumpfen müssen, während Differenzierung über Strichstärke und Raum jeden Viewport übersteht. Variable Fonts machen die Strichstärke zu einer kontinuierlichen Achse, sodass Zwischenstärken präzise auf den Kontrast abgestimmt werden können, den eine Ebene braucht. Farbe und sekundäre Signale sollten Hierarchie nie allein tragen — sie müssen auf strukturellem Markup und mindestens einem weiteren visuellen Signal aufsetzen, und Überschriftentext muss weiterhin die Kontrastanforderungen erfüllen.
Zwei kleinere zeitgemäße Verfeinerungen. Mehrzeilige Überschriften profitieren von text-wrap: balance, das die Zeilenlängen ausgleicht, damit eine Headline kein einzelnes Wort in ihrer letzten Zeile strandet — eine kleine CSS-Deklaration, die Jahre manueller Umbruchkorrekturen ersetzt. Und der Zeilenabstand von Überschriften sollte auf jeder Ebene der Skala eng gesetzt werden (etwa 1,1–1,25, gemäß dem früheren Kapitel), statt vom Fließtext geerbt zu werden.
Die Grundgröße bleibt, wie das Original betonte, entscheidend: Die ganze Skala multipliziert sich aus ihr. Die moderne Untergrenze ist der Browser-Standard von 1rem (standardmäßig 16px) für Fließtext — in rem gesetzt, nie in Pixeln, damit sich Nutzerpräferenzen fortpflanzen —, wobei langes Lesen oft mit 1,125–1,25rem besser bedient ist.
In CSS
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }Empfehlungen
- Bauen Sie Größen aus einer modularen Skala mit einem Verhältnis von etwa 1,2–1,5, gewählt nach der Dichte des Inhalts.
- Machen Sie die Skala mit clamp() fluide und mischen Sie stets eine rem-Komponente in den bevorzugten Wert, damit die Schriftgrößen-Einstellungen der Nutzer respektiert werden.
- Verwenden Sie echte Überschriften-Elemente in einer logischen Gliederung — eine h1, keine übersprungenen Ebenen — gemäß WCAG 1.3.1; wählen Sie einen Tag nie nach seiner Größe.
- Entkoppeln Sie Semantik und Erscheinung: Gestalten Sie Überschriftenebenen mit Klassen, wenn Struktur und Design sich widersprechen.
- Drücken Sie Hierarchie auch durch Strichstärke und Raum aus, nicht nur durch Größe; vermeiden Sie Hierarchien, die allein von Größe oder Farbe abhängen.
- Setzen Sie Fließtext mit mindestens 1rem in relativen Einheiten und prüfen Sie, dass die Hierarchie 200 % Textvergrößerung und 320px-Reflow übersteht.
- Wenden Sie text-wrap: balance und einen verengten Zeilenabstand auf Überschriften an.