Typografische Hierarchie ist das gestalterische System, mit dem durch gezielte Variation von Schriftgröße, Schriftgewicht, Schriftschnitt, Farbe und Abstand eine klare visuelle Rangordnung zwischen verschiedenen Textebenen hergestellt wird, damit Lesende intuitiv erkennen, welche Information Priorität hat und wie ein Text zu lesen ist.
Rubrik: Grundlagen der Gestaltung · Unterrubrik: Typografie · Niveau: Einsteiger Synonyme / Auch bekannt als: Schrifthierarchie, Text-Hierarchie, Visual Hierarchy (Typografie), Type Hierarchy (engl.)
Was ist typografische Hierarchie?
Typografische Hierarchie bezeichnet die bewusste Ordnung von Schriftebenen innerhalb eines Layouts. Sie sorgt dafür, dass Lesende – ob bewusst oder unbewusst – den Text in einer bestimmten Reihenfolge wahrnehmen: zuerst die Hauptüberschrift, dann Zwischenüberschriften, schließlich den Fließtext. Ohne eine durchdachte Hierarchie wirken Layouts unstrukturiert und schwer lesbar.
Erklärung
Eine typografische Hierarchie wird durch das Zusammenspiel mehrerer Gestaltungsparameter erzeugt:
Schriftgröße ist das wirkungsvollste Mittel: Eine deutlich größere Überschrift signalisiert dem Auge sofort, dass hier eine übergeordnete Information beginnt. Typische Richtwerte für Druckmedien sind Überschriften ab 18–36 pt, Unterüberschriften bei 12–16 pt und Fließtext bei 9–12 pt; im Webdesign werden relative Einheiten (rem, em) genutzt.
Schriftgewicht (Weight) ergänzt die Größe: Eine fette (Bold) Überschrift zieht mehr Aufmerksamkeit auf sich als eine Regular-Zeile gleicher Größe. In gut aufgestellten Schriftfamilien stehen Light, Regular, Medium, Bold und ExtraBold als Abstufungen zur Verfügung.
Farbe und Kontrast schaffen zusätzliche Differenzierung: Eine farbige Überschrift auf weißem Grund oder ein abgesetztes Zitat in einer Akzentfarbe setzt visuelle Signale, ohne die Schriftgröße ändern zu müssen.
Laufweite und Zeilenabstand (Tracking, Leading) beeinflussen, wie kompakt oder offen eine Schriftebene wirkt.
Schriftschnitt (Kursiv, Kapitälchen) wird als ergänzendes Mittel eingesetzt, etwa für Bildunterschriften oder Metainformationen.
Eine gut durchdachte typografische Hierarchie funktioniert auch im Schwarz-Weiß-Druck und auch dann, wenn die Lesenden den Text nur überfliegen (Scanning).
Beispiele
- Nachrichtenartikel in Adobe InDesign: Schlagzeile in 36 pt Bold, Unterzeile in 18 pt Regular, Vorspann in 12 pt Italic, Fließtext in 10 pt Regular – vier klar unterscheidbare Ebenen.
- Website-Header in Figma: H1 in 48 px / 700 Weight, H2 in 32 px / 600 Weight, H3 in 24 px / 500 Weight, Paragraph in 16 px / 400 Weight.
- Präsentation in PowerPoint: Folientitel in 40 pt Bold, Bulletpoints in 24 pt Regular, Quellenangabe in 12 pt Light Italic.
- Broschüre in Canva: Hauptüberschrift in der Markenfarbe (fett, groß), Subheadline in Dunkelgrau, Fließtext in Schwarz (klein).
- Mobile App in Adobe XD: Navigationstitel in 17 pt SemiBold, Inhaltsüberschriften in 15 pt Medium, Beschreibungstexte in 13 pt Regular.
In der Praxis
Die meisten Profi-Tools unterstützen den Aufbau typografischer Hierarchien über Absatzformate (Paragraph Styles). In Adobe InDesign sollten Hierarchieebenen konsequent als Absatzformate angelegt werden. In Figma erfüllen Text Styles dieselbe Funktion. Im Webdesign werden Hierarchien über CSS-Klassen oder Design-Token definiert; Frameworks wie Tailwind CSS oder Material Design liefern vordefinierte Typoskalen. Als Faustregel gilt: Eine typografische Hierarchie sollte mindestens drei, aber nicht mehr als fünf klar unterscheidbare Ebenen umfassen.
Vergleich & Abgrenzung
Typografische Hierarchie ist ein Teilaspekt von visueller Hierarchie, die alle Designelemente (Bilder, Farben, Icons, Abstände) einschließt. Häufig wird sie auch mit Schriftmischung (Type Pairing) verwechselt: Das Kombinieren zweier Schriftarten ist ein Mittel, um Hierarchie zu stärken, aber nicht dasselbe wie die Hierarchie selbst, die auch mit nur einer Schriftfamilie aufgebaut werden kann.
Häufige Fragen (FAQ)
Kann ich typografische Hierarchie mit nur einer Schriftart aufbauen? Ja, und es empfiehlt sich sogar für Einsteiger. Eine Schriftfamilie mit mehreren Gewichtsstufen (z. B. Roboto Light, Regular, Bold, Black) ermöglicht eine vollständige Hierarchie mit einem einzigen Schriftschnitt-Set.
Welche Mindestgrößen gelten für Fließtext? Für gedruckte Medien gilt 9 pt als absolutes Minimum; 10–12 pt gelten als komfortabel. Im Webdesign sollten Fließtexte nicht unter 14–16 px gesetzt werden. Für barrierefreie Angebote empfiehlt die WCAG mindestens 16 px Grundschriftgröße.
Verwandte Einträge
Weiterführend
- Bringhurst, R. (2004): The Elements of Typographic Style. 3. Aufl. Hartley & Marks.
- Lupton, E. (2010): Thinking with Type. Princeton Architectural Press.
- Online-Tool: Typescale.com – Typografische Skalen interaktiv berechnen und exportieren
