Typografische Hierarchie

Im ersten Modul haben Sie gesehen, wie visuelle Hierarchie eine Seite ordnet. In der Typografie wird dieses Prinzip im Detail umgesetzt. Überschriften, Zwischenüberschriften, Einleitungen, Fließtext, Bildunterschriften und Beschriftungen bilden zusammen ein System von Stufen. Ist dieses System klar, erkennen Leser sofort, was zusammengehört und was wichtig ist. Ist es unklar, mit zu vielen oder zu ähnlichen Stufen, entsteht Unsicherheit – und oft eine Website, auf der jede Seite ein bisschen anders aussieht.

1. Wenige Stufen, deutliche Abstände

Die erste Regel lautet: So wenige Stufen wie möglich, so viele wie nötig. Die meisten Websites kommen mit fünf bis sieben Stufen aus: zwei bis drei Überschriftenebenen, ein etwas größerer Einleitungstext, der Fließtext und eine kleinere Stufe für Hinweise und Beschriftungen. Die zweite Regel lautet: Die Stufen müssen sich deutlich unterscheiden. Eine Überschrift, die nur ein oder zwei Pixel größer ist als der Text, erzeugt keine Hierarchie. Hier gilt, was die Lektion über Kontrast gezeigt hat: Unterschiede müssen deutlich sein oder gar nicht.

2. Eine Skala berechnen

Statt Größen nach Gefühl festzulegen, lohnt es sich, sie aus einer Skala abzuleiten. Man wählt eine Grundgröße für den Fließtext und ein Verhältnis. Jede größere Stufe ist die vorige mal dieses Verhältnis, jede kleinere geteilt durch das Verhältnis. So entstehen Größen, die zueinander in einer nachvollziehbaren Beziehung stehen. Probieren Sie verschiedene Verhältnisse aus:

Kleine Verhältnisse wie 1,125 oder 1,2 erzeugen dezente Abstufungen, die sich für textreiche Seiten und kleine Bildschirme eignen. Große Verhältnisse wie 1,5 oder der Goldene Schnitt erzeugen dramatische Unterschiede, die auf Landingpages und in Präsentationen wirken, bei vielen Stufen aber schnell zu riesigen Überschriften führen. Für Unternehmenswebsites hat sich ein Verhältnis zwischen 1,2 und 1,333 bewährt. Nach der Berechnung dürfen die Werte gerundet und leicht angepasst werden – die Skala ist ein Werkzeug, kein Dogma.

3. Nicht nur Größe

Größe ist das stärkste, aber nicht das einzige Mittel. Die Schriftstärke hebt Überschriften hervor, ohne dass sie riesig werden müssen. Die Farbe kann Stufen differenzieren, etwa ein dunkleres Schwarz für Überschriften und ein etwas helleres Grau für Nebentexte, solange der Kontrast ausreichend bleibt. Versalien mit erhöhter Laufweite eignen sich für kleine Rubriken über Überschriften, die sogenannten Dachzeilen. Und Abstände ordnen die Stufen zueinander: Eine Überschrift braucht oben deutlich mehr Abstand als unten, damit sie zu ihrem Text gehört, nicht zum vorigen Abschnitt.

4. Responsive Typografie

Auf dem Handy funktioniert die Desktop-Hierarchie selten unverändert. Eine Überschrift mit 56 Pixeln füllt auf einem schmalen Bildschirm vier Zeilen und drängt den Inhalt aus dem sichtbaren Bereich. Die Lösung ist, die Skala für kleine Bildschirme zu verdichten: Die Grundgröße bleibt bei 16 bis 17 Pixeln, aber das Verhältnis wird kleiner, sodass die großen Stufen stärker schrumpfen als die kleinen. Moderne CSS-Funktionen erlauben es, Schriftgrößen fließend zwischen einem Minimal- und einem Maximalwert an die Bildschirmbreite anzupassen. So entsteht auf jeder Größe eine stimmige Hierarchie, ohne dass für jedes Gerät eigene Werte gepflegt werden müssen.

Wichtig bleibt dabei die Barrierefreiheit: Schriftgrößen sollten in relativen Einheiten angegeben werden, damit Nutzer sie über die Browsereinstellungen vergrößern können. Und die sichtbare Hierarchie sollte mit der technischen übereinstimmen – eine Zwischenüberschrift ist im Quelltext eine h2 oder h3, nicht ein fett formatierter Absatz.

5. Hierarchie im Alltag pflegen

In vielen Unternehmen entsteht typografisches Chaos nicht bei der ersten Gestaltung, sondern im Lauf der Zeit. Redakteure wählen im Editor eine größere Schrift, um etwas hervorzuheben, neue Landingpages bekommen eigene Stile, und nach zwei Jahren gibt es fünfzehn verschiedene Schriftgrößen. Vorbeugen lässt sich mit einem eingeschränkten Editor, der nur die festgelegten Stufen anbietet, und mit einer kurzen Stilübersicht, die zeigt, welche Stufe wofür gedacht ist. Einmal im Jahr lohnt sich eine Bestandsaufnahme: Welche Größen werden tatsächlich verwendet, und welche davon gehören nicht zur Skala? Das Aufräumen dauert meist nur wenige Stunden und macht die gesamte Website ruhiger. Wer mit einem Designsystem arbeitet, legt die Stufen als benannte Stile oder Tokens fest, etwa „Überschrift groß“ oder „Text klein“, statt mit Pixelwerten zu hantieren. Dann lassen sich Anpassungen später an einer Stelle für die ganze Website vornehmen.

Ein Beispiel aus der Praxis zeigt, wie viel ein solches System bringt. Auf der Website eines Dienstleisters fanden sich bei einer Bestandsaufnahme vierzehn verschiedene Schriftgrößen zwischen 12 und 64 Pixeln, teilweise mit nur einem Pixel Unterschied. Nach der Umstellung auf eine Skala mit sechs Stufen wirkten die Seiten sofort ruhiger, und neue Seiten ließen sich schneller erstellen, weil niemand mehr über Größen nachdenken musste. Auch die Abstimmung mit der Agentur wurde einfacher: Statt „etwas größer“ hieß es nun „H3 statt Text groß“.

Wer diese Regeln einmal verinnerlicht hat, gestaltet Texte schneller und sicherer. Statt bei jeder Seite neu zu überlegen, genügt ein Blick auf die Skala: Welche Stufe passt zu diesem Inhalt? Die Hierarchie wird so vom Einzelentscheid zum System – und genau das macht professionelle Typografie aus. Auch die Suchmaschinen profitieren davon, weil eine saubere, konsistente Überschriftenstruktur den Aufbau einer Seite eindeutig erkennbar macht.

Ein weiterer Vorteil zeigt sich bei der Zusammenarbeit mit Entwicklern. Eine dokumentierte Skala lässt sich direkt in Variablen oder Tokens übersetzen, die im Code an einer Stelle definiert sind. Soll die Website später etwas größer oder kompakter wirken, genügt es, die Grundgröße oder das Verhältnis anzupassen – alle Stufen ändern sich automatisch und bleiben harmonisch zueinander, ganz ohne zusätzlichen Aufwand. Ohne Skala müsste jede einzelne Größe auf jeder Seite von Hand geändert werden, mit dem Risiko, dass einzelne Stellen vergessen werden.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.