Typografische Hierarchie ist die Rangordnung von Textebenen in einem Layout, erzeugt durch Schriftgröße, Schriftgewicht, Farbe, Abstand, Position und Schriftmischung. Sie sagt dem Auge, was zuerst, was danach und was nebenbei gelesen wird: Titel, Zwischenüberschrift, Fließtext, Bildunterschrift.
Rubrik: Grundlagen der Gestaltung · Unterrubrik: Typografie · Niveau: Einsteiger Synonyme / Auch bekannt als: Schrifthierarchie, Texthierarchie, Überschriftenhierarchie, Type Hierarchy, Typographic Scale (für die Größenstufen)
Was ist typografische Hierarchie?
Typografische Hierarchie ordnet Text in Ebenen, die sich sichtbar voneinander unterscheiden. Lesende erfassen eine Seite zuerst als Muster von groß und klein, schwer und leicht, eng und weit. Erst danach lesen sie. Eine gute Hierarchie liefert dieses Muster so, dass die Reihenfolge der Wichtigkeit ohne Nachdenken klar ist und auch beim Überfliegen funktioniert.
Sie ist ein Teilaspekt der visuellen Hierarchie, die auch Bilder, Farben und Flächen einbezieht, und sie beruht auf Gestaltgesetzen: Ähnliches wird als eine Ebene gelesen, Nahes als zusammengehörig, das Prägnanteste zuerst.
Erklärung
Die Mittel der Hierarchie
| Mittel | Wirkung | Hinweis |
|---|---|---|
| Größe | Stärkstes Signal, größer heißt wichtiger | Stufen deutlich wählen, mindestens etwa 20 Prozent Unterschied zwischen Ebenen |
| Gewicht | Fett zieht Aufmerksamkeit, Light tritt zurück | Ersetzt oft eine Größenstufe, spart Platz |
| Farbe und Kontrast | Akzent ohne Größenänderung | Nur als zusätzliches Signal, nie als einziges (Barrierefreiheit) |
| Abstand | Weißraum vor einer Überschrift trennt, Nähe zum Folgetext bindet | Abstand oben größer als unten |
| Position | Oben links wird zuerst gesehen, Einzug und Spaltenbreite ordnen | Marginalien und Einzüge schaffen Nebenebenen |
| Schriftmischung | Serif gegen Sans, Display gegen Text | Höchstens zwei Familien, Kontrast muss deutlich sein |
| Schnitt und Auszeichnung | Kursiv, Kapitälchen, Versalien, Laufweite | Für Metaebenen wie Caption, Datum, Rubrik |
Vertiefungen: Schriftgröße: Punkt, Pixel und die richtige Größe, Zeilenabstand (Leading), optimal einsetzen, Schriftkombinationen (Type Pairing), Schriften erfolgreich kombinieren, Kapitälchen und Minuskelziffern richtig einsetzen, Tracking und Laufweite, Zeichenabstand richtig einsetzen.
Die Ebenen: von H1 bis Caption
Die meisten Layouts kommen mit drei bis fünf Ebenen aus. Mehr Ebenen führen zu kleineren Unterschieden und schwächen die Ordnung.
| Ebene | Funktion | Typische Ausprägung |
|---|---|---|
| Titel (H1, Headline) | Einstieg, eine pro Seite | Größte Stufe, fett oder Display-Schrift |
| Unterzeile (Subheadline, Dek) | Erklärt den Titel | Deutlich kleiner als H1, oft Regular oder Light |
| Zwischenüberschrift (H2, H3) | Gliedert den Text | Fett in Fließtextgröße oder eine bis zwei Stufen größer |
| Vorspann (Lead, Teaser) | Zusammenfassung vor dem Text | Fließtextschrift, eine Stufe größer oder kursiv |
| Fließtext (Body) | Hauptinhalt | Referenzgröße, Regular |
| Zitat, Infokasten | Hervorgehobener Nebeninhalt | Einzug, Farbe, kursiv oder andere Familie |
| Caption, Fußnote, Meta | Bildunterschrift, Quelle, Datum | Eine bis zwei Stufen kleiner, oft Kapitälchen oder Laufweite |
Zur Bildunterschrift im Detail: Caption und Bildunterschrift, Typografie und Gestaltung von Bild-Legenden.
Skalen: Größen systematisch festlegen
Statt Größen zu raten, wird eine Grundgröße mit einem festen Faktor multipliziert. Dieses Prinzip der modularen Skala (Modular Scale) machte Tim Brown 2011 in A List Apart für das Webdesign populär; die zugrunde liegenden Proportionen stammen aus Musik und Geometrie.
| Faktor | Name | Charakter | Beispiel ab 16 px |
|---|---|---|---|
| 1,125 | Große Sekunde | Sehr fein, viele Stufen, für dichte Interfaces | 16, 18, 20, 23, 26 |
| 1,2 | Kleine Terz | Ruhig, für Text-lastige Websites | 16, 19, 23, 28, 33 |
| 1,25 | Große Terz | Ausgewogen, Standard für Web | 16, 20, 25, 31, 39 |
| 1,333 | Reine Quarte | Deutlich, für Editorial und Landingpages | 16, 21, 28, 38, 51 |
| 1,5 | Reine Quinte | Kräftig, für Plakate und Hero-Bereiche | 16, 24, 36, 54, 81 |
| 1,618 | Goldener Schnitt | Sehr dramatisch, wenige Ebenen | 16, 26, 42, 68, 110 |
Die Werte werden auf ganze Pixel oder Punkt gerundet. Im Print ist der klassische Satz an Schriftgraden (etwa 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72 pt) selbst eine historisch gewachsene Skala, siehe Schriftgrad und das Punkt-System. Zeilenabstand und vertikale Abstände folgen idealerweise derselben Logik, etwa über ein Baseline Grid, typografisches Raster für konsistente Layouts.
Beispiele Print und Web
Zeitschriftenartikel (Print): Headline 36 pt Bold, Unterzeile 18 pt Regular, Vorspann 11 pt kursiv, Fließtext 9,5 pt mit 12,5 pt Zeilenabstand, Zwischenüberschriften 9,5 pt Bold mit Abstand davor, Bildunterschriften 7,5 pt Kapitälchen in Grau.
Website (Web): Grundgröße 16 px, Faktor 1,25: Fließtext 16 px / 400, H3 20 px / 600, H2 25 px / 700, H1 39 px / 700, Caption 13 px / 400 in gedämpfter Farbe. Zeilenhöhe im Fließtext 1,5, in Überschriften 1,1 bis 1,2. Auf kleinen Bildschirmen wird die H1 auf 31 px reduziert, die übrigen Stufen bleiben.
Präsentation: Folientitel 40 pt Bold, Aufzählung 24 pt Regular, Quellenangabe 12 pt Light. Drei Ebenen reichen.
App-Interface: Navigationstitel 17 pt Semibold, Listentitel 15 pt Medium, Beschreibung 13 pt Regular, Hinweistext 11 pt Regular. Hier trägt das Gewicht einen großen Teil der Hierarchie, weil Platz knapp ist.
Häufige Fehler
- Zu viele Ebenen: Sechs Überschriftengrößen mit je zwei Punkt Unterschied sind keine Hierarchie, sondern Rauschen.
- Zu kleine Sprünge: 16 px Fließtext und 18 px H2 unterscheiden sich kaum. Entweder Größe deutlich erhöhen oder Gewicht ändern.
- Hierarchie nur über Farbe: Fällt bei Schwarz-Weiß-Druck, Farbfehlsichtigkeit oder schlechtem Display weg.
- Abstände falsch verteilt: Gleich viel Raum über und unter einer Zwischenüberschrift löst sie vom Text, zu dem sie gehört. Oben mehr, unten weniger.
- Alles fett: Wenn alles betont ist, ist nichts betont. Fett ist ein Signal, keine Grundeinstellung.
- Semantik und Optik verwechselt (Web): Eine H3 darf nicht größer aussehen als die H2 derselben Seite, und Überschriftenebenen dürfen nicht übersprungen werden. Screenreader lesen die Struktur, nicht die Größe.
Barrierefreiheit
- Kontrast: Nach WCAG 2.2 (Erfolgskriterium 1.4.3) braucht normaler Text ein Kontrastverhältnis von mindestens 4,5:1, großer Text (ab 18 pt beziehungsweise 24 px, oder ab 14 pt beziehungsweise 19 px fett) mindestens 3:1. Gedämpfte Captions in Hellgrau verfehlen das häufig.
- Mindestgrößen: Es gibt keine gesetzliche Mindestschriftgröße, aber 16 px für Fließtext im Web und 9 bis 10 pt im Print haben sich als untere Komfortgrenze etabliert. Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalt verloren geht (WCAG 1.4.4).
- Struktur: Überschriften semantisch als H1 bis H6 auszeichnen, nicht als fetter Absatz. Nur eine H1 pro Seite.
- Nicht nur Farbe: Jede Hierarchieebene muss auch ohne Farbe unterscheidbar sein, über Größe, Gewicht oder Abstand.
Mehr zu Lesbarkeit und Größen auf Bildschirm und Papier: Lesbarkeit vs. Leserlichkeit und Schriftgröße auf Screen vs. Print.
Beispiele
- Tageszeitung: Fünf Ebenen auf einer Seite (Dachzeile, Schlagzeile, Unterzeile, Fließtext, Bildunterschrift) und trotzdem sofort lesbar, weil jede Ebene eine feste Größe, ein festes Gewicht und einen festen Abstand hat.
- Dokumentationswebsite: Nur eine Schriftfamilie, Hierarchie ausschließlich über Größe (Faktor 1,2), Gewicht und Abstand. Code-Beispiele in Monospace als eigene Ebene.
- Plakat: Zwei Ebenen reichen: Veranstaltungsname in 1,5-facher Skala sehr groß, alle Daten in einer kleinen, eng gesetzten Zeile. Der Größenkontrast ist die Botschaft.
- Formular: Feldbezeichnung 14 px Medium, Eingabetext 16 px Regular, Hilfetext 12 px in Grau mit ausreichendem Kontrast, Fehlermeldung 12 px Rot plus Symbol.
In der Praxis
Hierarchie wird einmal definiert und dann als System verwendet. In InDesign sind das Absatzformate, in Figma Text Styles, im Web CSS-Klassen oder Design-Token (zum Beispiel text-sm, text-base, text-xl). Wer Größen manuell pro Textblock vergibt, verliert spätestens auf Seite drei die Konsistenz.
Ein praktischer Arbeitsablauf: Grundgröße des Fließtexts festlegen (Lesedistanz, Medium, Zielgruppe), Faktor wählen, Ebenen zuordnen, Gewichte und Abstände ergänzen, auf Kontrast prüfen, im Blurtest kontrollieren, ob die Rangfolge auch unscharf stimmt. Solche Systeme Schritt für Schritt aufzubauen gehört zu den Grundlagen, die in der Ausbildung Grafik- und Kommunikationsdesign, einem der drei staatlich anerkannten Fachbereiche der Berufsfachschule Lazi Akademie in Esslingen, geübt werden.
Vergleich & Abgrenzung
| Begriff | Bedeutung | Abgrenzung |
|---|---|---|
| Typografische Hierarchie | Rangordnung von Textebenen | Thema dieses Eintrags |
| Visuelle Hierarchie | Rangordnung aller Gestaltungselemente | Oberbegriff, schließt Bild, Farbe, Fläche ein |
| Typografische Skala | Festgelegte Größenstufen | Werkzeug der Hierarchie, nicht die Hierarchie selbst |
| Schriftmischung | Kombination mehrerer Schriften | Ein Mittel unter mehreren; Hierarchie geht auch mit einer Familie |
| Semantische Struktur (HTML) | Bedeutung der Überschriftenebenen | Muss zur optischen Hierarchie passen, ist aber nicht identisch |
Häufige Fragen (FAQ)
Was ist typografische Hierarchie? Die sichtbare Rangordnung von Textebenen, erzeugt durch Größe, Gewicht, Farbe, Abstand, Position und Schriftmischung. Sie zeigt Lesenden, was wichtig ist und in welcher Reihenfolge gelesen wird.
Wie viele Ebenen braucht eine typografische Hierarchie? Drei bis fünf. Weniger wirkt eintönig, mehr lässt sich nicht mehr unterscheiden. Für Plakate reichen oft zwei, für Fachbücher sind fünf üblich.
Welche typografische Skala soll ich verwenden? Für Websites mit viel Text 1,2 oder 1,25, für Landingpages und Editorial 1,333, für Plakate 1,5. Entscheidend ist, dass die Skala konsequent eingehalten wird.
Geht typografische Hierarchie mit nur einer Schrift? Ja, und für Einsteiger/innen ist das der sicherste Weg. Eine Familie mit mehreren Gewichten (Light bis Black) liefert alle nötigen Kontraste über Größe, Gewicht und Abstand.
Welche Mindestgröße gilt für Fließtext? Im Web 16 px als bewährte Untergrenze, im Print 9 bis 10 pt je nach Schrift und Lesedistanz. Für Barrierefreiheit zählen daneben Kontrast (4,5:1) und Vergrößerbarkeit auf 200 Prozent.
Verwandte Einträge
- Typografie-Grundlagen
- Schriftgröße: Punkt, Pixel und die richtige Größe
- Schriftgröße auf Screen vs. Print
- Zeilenabstand (Leading), optimal einsetzen
- Schriftkombinationen (Type Pairing), Schriften erfolgreich kombinieren
- Caption und Bildunterschrift, Typografie und Gestaltung von Bild-Legenden
- Baseline Grid, typografisches Raster für konsistente Layouts
- Lesbarkeit vs. Leserlichkeit
Weiterführend
- Brown, Tim (2011): More Meaningful Typography. In: A List Apart, alistapart.com/article/more-meaningful-typography
- Bringhurst, Robert (2004): The Elements of Typographic Style. 3. Aufl. Hartley & Marks.
- Lupton, Ellen (2010): Thinking with Type. 2. Aufl. Princeton Architectural Press.
- Müller-Brockmann, Josef (1981): Rastersysteme für die visuelle Gestaltung. Niggli.
- W3C (2023): Web Content Accessibility Guidelines (WCAG) 2.2, Erfolgskriterien 1.4.3 Kontrast und 1.4.4 Textgröße ändern, w3.org/TR/WCAG22
- Werkzeug: Typescale, modulare Skalen berechnen, typescale.com
