Typografische Hierarchie: So baust du eine, die wirklich lesbar ist

Die meisten Artikel über typografische Hierarchie beschreiben sie, statt sie zu bauen. Sie sagen, Überschriften sollten wichtig wirken und Fließtext ruhig. Nutzlos, wenn die Aufgabe lautet: „Wähle fünf Größen, drei Gewichte und den Zeilenabstand, der auf einer Startseite, in einem Artikel und in einem Einstellungsfenster trägt.“ Beschreibung ist kein System. Das System ist das, was live geht.

Dieser Beitrag ist der Bauplan. Echte Verhältnisse, echte Zahlen, die Reihenfolge der Entscheidungen und die Fehlermuster, die die meisten Hierarchien vor dem Launch killen.

Was typografische Hierarchie wirklich ist

Typografische Hierarchie ist die strukturelle Rangordnung aller Textelemente, damit das Auge weiß, was es zuerst, zweitens und drittens lesen soll, noch bevor es überhaupt etwas liest. Sie ist die typografische Ebene der visuellen Hierarchie und das Rückgrat jedes funktionierenden Typografiesystems.

Eine echte Hierarchie beantwortet vier Fragen schriftlich. Wie viele Ebenen gibt es. Wie groß ist jede Ebene. Wie schwer ist jede Ebene. Welcher Abstand liegt zwischen und innerhalb der Ebenen. Wenn diese Antworten nicht auf einer einzigen Dokumentationsseite stehen, ist das System improvisiert, nicht gestaltet.

Die fünf Ebenen, die fast jedes System braucht

Die meisten funktionierenden Systeme landen bei fünf Ebenen: H1, H2, H3, Fließtext und klein. Mehr erzeugt Rauschen. Weniger macht die Seite flach.

Die Falle ist, Buttons, Bildunterschriften und Formularlabels als eigene Ebenen zu behandeln. Sie sind Fließtext oder klein mit anderer Rolle. Ein Button ist Fließtext in Medium. Eine Bildunterschrift ist klein in Regular. Ein Label ist klein in Medium. Gleiche Größen, andere Aufgaben.

Wähle ein Skalenverhältnis und zieh es durch

Die Größe jeder Ebene stammt aus einem einzigen Verhältnis, angewendet auf eine Basis. Wähle zuerst das Verhältnis und leite dann jede Größe daraus ab. Die Basis ist fast immer 16px, der Browser-Standard und die Größe, in der Fließtext am Bildschirm am saubersten liest. Drei Verhältnisse decken fast jedes Projekt ab.

Große Terz (1,25). Eng und dicht. Am besten für datenlastige UIs und Admin-Tools. Bei 16px Basis: 16, 20, 25, 31, 39, 49, 61. Sichtbar, aber nie dramatisch.

Reine Quarte (1,333). Das Arbeitstier. Stark genug für Editorial, zurückhaltend genug für Produkte. Bei 16px Basis: 16, 21, 28, 37, 50, 67. Der Standard für die meisten Marketing-Sites.

Goldener Schnitt (1,618). Editorial, expressiv, fast theatralisch. Am besten für Landingpages und Magazin-Layouts. Bei 16px Basis: 16, 26, 42, 68, 110. Die H1 überragt den Fließtext, und genau das ist der Punkt.

Tools wie type-scale.com erzeugen die Tabelle für jede Basis und jedes Verhältnis in einer Sekunde. Eins wählen, Zahlen aufschreiben, ausliefern. Mitten im Projekt zu wechseln ist ein Refactoring, das jede Seite berührt.

Gewicht ist die zweite Achse, nicht die erste

Designer greifen nur zur Größe als Hebel und wundern sich, warum die Seite flach wirkt. Das Gewicht trägt die halbe Arbeit, besonders mobil, wo die Größenspanne begrenzt ist.

Ein funktionierendes System braucht drei Gewichte. Regular für Fließtext, Medium für Betonung und Labels, Bold oder Semibold für Überschriften. Ein viertes Gewicht ist eine Markenentscheidung, keine Systemanforderung.

Die Regel, die die meisten flachen Seiten rettet: Nutze nie dasselbe Gewicht für zwei benachbarte Ebenen. Wenn H2 bold ist, sollte H3 semibold oder medium sein. Gleiches Gewicht nebeneinander lässt die Hierarchie kollabieren, egal wie groß die Schrift ist. Die umgekehrte Falle ist „alles ist bold“, was das Gewicht als Hebel komplett entfernt.

Zeilenabstand ist der stille Hierarchie-Hebel

Zeilenabstand ist der vertikale Raum zwischen Zeilen, von Grundlinie zu Grundlinie. CSS nennt ihn line-height. Der am meisten unterschätzte Hebel der typografischen Hierarchie.

Enger Zeilenabstand bei einer Headline wirkt selbstsicher und dicht. Lockerer Zeilenabstand im Fließtext wirkt ruhig und lesbar. Andersherum kehrt sich die Hierarchie um. Fließtext mit 1,2 liest sich wie eine Mauer. Eine 64px-Headline mit 1,6 liest sich wie Dekoration.

Brauchbare Standardwerte. Headlines (H1, H2): 1,1 bis 1,2. Zwischenüberschriften (H3): 1,2 bis 1,3. Fließtext: 1,5 bis 1,7. Bildunterschriften: 1,4 bis 1,5. Größerer Text braucht weniger Zeilenabstand, kleinerer mehr. Langtext braucht mehr Zeilenabstand als UI. Ein Dashboard mit 1,4 wirkt dicht, und das ist richtig so.

Laufweite gehört zur Display-Schrift, nicht in den Fließtext

Kerning ist der Abstand zwischen bestimmten Buchstabenpaaren, angepasst auf Logo- oder Headline-Ebene. Laufweite (Tracking) ist der Abstand über alle Buchstaben eines Textlaufs, einheitlich gesetzt. Es sind nicht dieselben Hebel.

Laufweite ist nur an den Extremen ein Hierarchie-Werkzeug. Enge Laufweite bei einer großen Headline (-0,02em bis -0,04em) lässt sie gesetzt und entschlossen wirken. Weite Laufweite bei kleinen Versalien-Labels (+0,05em bis +0,1em) lässt das Label beabsichtigt wirken. Beides signalisiert die Rolle der Schrift.

Die Gefahrenzone ist der Fließtext. Laufweite im Fließtext schadet der Lesbarkeit und bringt keinen Hierarchie-Vorteil. Lass Fließtext bei null. Das schnellste Erkennungszeichen eines Designers, der Laufweite nicht versteht, ist eine Hero-Headline mit +0,1em, weil sie sich „editorial anfühlt“. Tut sie nicht. Sie fühlt sich nach Dekoration an.

Der Abstand zwischen den Ebenen gehört zur Hierarchie

Der vertikale Raum um jede Ebene rankt sie genauso wie Größe und Gewicht. Eine H2 mit 80px darüber und 24px darunter wirkt wie der Beginn eines neuen Abschnitts. Dieselbe H2 mit 24px darüber und darunter wirkt wie ein Absatzwechsel.

Die Regel: Der Abstand oben sollte ungefähr doppelt so groß sein wie der darunter. Das Element gehört zum Inhalt unter ihm. Startwerte: über H2: 64 bis 96px, unter H2: 16 bis 24px. Über H3: 32 bis 48px, unter H3: 8 bis 16px. Die Disziplin beim Weißraum zählt so viel wie die Schrift selbst. Eine perfekte Skala mit schlampigem Abstand wirkt flach.

Die Entscheidungsreihenfolge für eine Hierarchie von Grund auf

Wer Schritte überspringt, bekommt eine Hierarchie, die isoliert gut aussieht, aber in einem echten Produkt auseinanderfällt.

1. Basisgröße wählen. 16px für Bildschirme. 18px für editorial-lastige Sites. Fließtext nie unter 16px.
2. Skalenverhältnis wählen. Große Terz für dichte UIs, Reine Quarte für den allgemeinen Einsatz, Goldener Schnitt für Editorial.
3. Größentabelle erzeugen. Jede Ebene aus dem Verhältnis ableiten. Auf ganze Pixel runden. Aufschreiben.
4. Drei Gewichte wählen. Regular, Medium, Bold oder Semibold. Nicht mehr.
5. Zeilenabstand pro Ebene festlegen. Eng für Headlines, locker für Fließtext.
6. Abstand pro Ebene festlegen. 2-zu-1-Verhältnis oben zu unten bei jeder Überschrift.
7. Laufweite nur für Extreme setzen. Eng bei Display, weit bei kleinen Versalien. Null im Fließtext.
8. Auf drei echten Screens validieren. Ein Homepage-Hero, ein Langtext-Artikel, ein dichtes UI-Panel. Wenn es auf allen dreien hält, ausliefern.

Der schnellste Weg, eine kaputte Hierarchie auszuliefern, ist, Größen aus dem Bauchgefühl statt aus einem Verhältnis abzuleiten und dann Zeilenabstand und Abstände seitenweise zu flicken.

Woran die meisten Hierarchien scheitern

Sechs Fehlermuster killen mehr Hierarchien als alles andere.

Alles ist bold. Das Gewicht ist kein Hebel mehr und die Seite verlässt sich allein auf die Größe. Setze H3 und jede weitere Überschrift auf medium oder semibold.

Es gibt nur zwei Ebenen. H1 und Fließtext ohne etwas dazwischen wirken wie ein flaches Dokument mit Titel obendrauf. Füge alle 150 bis 300 Wörter eine H2 ein.

Die schwebende Zwischenüberschrift. Gleicher Abstand oben und unten lässt die Zwischenüberschrift zu keinem Abschnitt gehören. Verkleinere den Abstand darunter, damit sie am folgenden Text hängt.

Die ausgerissene H1. Eine Desktop-Hero-H1, die inline auf jeder Inhaltsseite benutzt wird, bricht den Rhythmus. Lege ein Token für die Desktop-H1 und eines für die H1 der Inhaltsseiten an. Gleicher Name, zwei Werte.

Fließtext mit 14px. Unter 16px leidet die Lesbarkeit, und die kleineren Ebenen werden in eine Spanne von 2px gequetscht. 16px Minimum. Nutze 13 bis 14px nur für Bildunterschriften und Labels.

Hierarchie nur für Desktop gestaltet. Mobil staucht jede Ebene und lässt die Hierarchie zu einem Brei verschmieren. Gestalte mobile first und skaliere nach oben.

Hierarchie unter den Bedingungen von 2026

Variable Fonts sind heute der richtige Standard. Eine einzige 80KB-Datei liefert Regular, Medium, Semibold und Bold über eine Achse. Zwei Variable Fonts decken das ganze System ab. Der Leitfaden zur Schriftkombination zeigt, wie du sie auswählst.

KI-Übersichten lesen das semantische Markup, nicht das visuelle. Eine Seite mit einer H1, dann einem div, das wie eine H2 aussieht, dann einer H3, wird falsch geparst. Visuelle Hierarchie und semantisches HTML müssen übereinstimmen. Eine H1 pro Seite, keine übersprungenen Ebenen. Die Aufschlüsselung der Webdesign-Prinzipien behandelt die semantische Seite.

Die Checkliste fürs Hierarchie-Audit

Speichere sie. Geh sie vor dem Launch durch. Jedes Nein wird behoben, bevor ausgeliefert wird.

Zehn von zehn liest sich auf jedem Gerät von selbst. Sieben von zehn wirkt gestaltet. Unter sieben wirkt es flach, egal welche Schrift.

FAQ

Was ist der Unterschied zwischen visueller und typografischer Hierarchie?

Visuelle Hierarchie ist das umfassendere System, das jedes Element über Größe, Gewicht, Farbe, Position, Abstand, Ausrichtung und Bildsprache einordnet. Typografische Hierarchie ist die typografische Ebene, die Größe, Gewicht, Zeilenabstand, Laufweite und Abstand nutzt, um Text zu ranken. Typografische Hierarchie ist ein Baustein der visuellen Hierarchie.

Welches Verhältnis ist das beste für eine Schriftskala?

Die Reine Quarte (1,333) ist der sicherste Standard. Sie erzeugt klaren Kontrast, ohne theatralisch zu werden. Nutze die Große Terz (1,25) für dichte UIs und Admin-Tools. Nutze den Goldenen Schnitt (1,618) für Editorial und Landingpages, wo der Hero dominieren muss.

Wie repariere ich eine Hierarchie, die flach wirkt?

Drei Schritte in dieser Reihenfolge. Erhöhe zuerst den Größenkontrast. H1 mindestens 2x H2, H2 mindestens 1,5x Fließtext. Füge als Zweites Gewichtskontrast hinzu. Keine zwei benachbarten Ebenen teilen dasselbe Gewicht. Straffe drittens den Abstandsrhythmus mit einem 2-zu-1-Verhältnis oben zu unten bei jeder Überschrift. Wirkt die Seite danach immer noch flach, macht das Layout zu viel und braucht Kürzungen im Umfang, bevor weitere Typografiearbeit sinnvoll ist.

Baue die Hierarchie, dann vertraue ihr

Eine funktionierende Hierarchie ist der günstigste Weg zu einer Seite, die sich von selbst liest. Der Leser sieht weder die Ebenen noch die Verhältnisse noch die Zeilenabstandswerte. Er sieht eine Seite, die Sinn ergibt. Die Mathematik verschwindet in Klarheit.

Die Falle ist, Hierarchie als Politur auf der letzten Meile zu behandeln. Sie ist das Rückgrat. Baue sie zuerst, validiere sie auf echten Screens, dokumentiere sie als Tokens und lass jede andere Entscheidung dagegen komponieren. Wenn du ein Team willst, das Typografiesystem, Hierarchie und Produkt-UI als ein Projekt statt als drei baut, beauftrage Brainy. Wir wählen das Verhältnis, schreiben die Tokens und liefern das System an einem echten Produkt aus.