Typografische Hierarchie ist die sichtbare Rangfolge der Textebenen einer Seite: Hauptüberschrift, Zwischenüberschriften, Fließtext, Bildunterschriften, Fußnoten. Laut Google Fonts ist Hierarchie die Gesamtstruktur eines Dokuments, und die Typografie soll sie sichtbar machen. In HTML entsprechen ihr die Überschriftenebenen h1 bis h6.
- Typografische Hierarchie
Die sichtbare Rangfolge der Textebenen einer Seite, von der Hauptüberschrift bis zur Bildunterschrift, über Größe, Stärke und Abstand.
Beispiel: „Die typografische Hierarchie stimmt: Wer die Seite überfliegt, liest nur die Überschriften und versteht trotzdem den Aufbau.“Auch: Schrifthierarchie, englisch typographic hierarchy.
Teil der visuellen Hierarchie, die auch Bilder, Farben und Flächen ordnet.
Mittel der typografischen Hierarchie
Die wichtigsten Mittel sind Größe, Stärke, Farbe und Abstand. Die Nielsen Norman Group empfiehlt, mit höchstens drei Schriftgrößen auszukommen, und nennt als Beispiel 14 bis 16 Pixel für Fließtext, 18 bis 22 für Zwischenüberschriften und bis 32 für Überschriften. Abstand trennt die Ebenen ebenso wirksam wie Größe: Mehr Raum über einer Überschrift als unter ihr ordnet sie dem folgenden Text zu.
Typografische Hierarchie mit einer Skala
Damit die Größen zueinander passen, leitet man sie aus einer Skala ab. Tim Brown beschrieb 2011 in A List Apart die modulare Skala: Ausgehend von der Textgröße wird jede Stufe mit einem festen Verhältnis multipliziert, etwa dem Goldenen Schnitt von 1:1,618. So entstehen Größen mit einer inneren Beziehung statt zufälliger Werte.
:root {
--text: 1rem;
--h3: calc(var(--text) * 1.25);
--h2: calc(var(--h3) * 1.25);
--h1: calc(var(--h2) * 1.25);
}Prüfen, ob die Hierarchie trägt
Die Nielsen Norman Group empfiehlt den Squint-Test: Mit zusammengekniffenen Augen auf die Seite schauen. Was dann noch hervorsticht, steht oben in der Hierarchie. Stechen zu viele Dinge hervor, konkurrieren sie, und die Rangfolge geht verloren.