Überschriftengrößen: Eine h1–h6-Hierarchie aufbauen

Überschriftengrößen funktionieren am besten abgeleitet, nicht ausgewählt: bilde die Überschriftenebenen auf die Stufen einer modularen Schriftgrößenskala ab — Fließtext auf der Basis, jede Überschrift eine feste Anzahl Stufen darüber — statt sechs unabhängige Werte zu wählen. Bei einer 16px-Basis mit einer reinen Quarte (Verhältnis 1,333) ergibt das h4 21px, h3 28px, h2 38px, h1 51px, mit Bildunterschriften bei 12px unter der Basis. Zwei ehrliche Hinweise gehören in die Antwort: Die meisten Seiten verwenden nie h5 oder h6, und HTML-Überschriften-Ebenen sind Dokumentstruktur, während Größe Darstellung ist — verwandt, aber trennbar.

Dieser Artikel ist Teil unseres Leitfadens zur Schriftgrößenskala. Er geht die Zuordnung mit echten Zahlen durch, was mit den untersten Ebenen zu tun ist, warum Semantik und Größe getrennt bleiben müssen und wie steil die Größensprünge sein sollten.

Wie bildet man h1–h6 auf eine Schriftgrößenskala ab?

Eine modulare Skala erzeugt Größen als base × ratio^(i/notes). Mit zwei Noten pro Intervall existieren Halbstufen zwischen den ganzen Verhältnissprüngen — 18px, 25px, 33px, 44px auf dieser Skala — und die sauberste Überschriften-Zuordnung überspringt sie: Gib den Überschriften die ganzen Stufen und behalte die Halbstufen für einleitende Absätze, große UI-Beschriftungen und andere Zwischenrollen.

Jede Überschriftenebene steht jetzt im selben Verhältnis zur nächsten — eine volle reine Quarte. Diese Konsistenz ist das, was eine Leserin tatsächlich wahrnimmt. Niemand misst Pixelwerte auf einer Seite, aber Menschen können Proportionen gut erspüren, und wenn jeder Sprung in der Hierarchie dasselbe Verhältnis hat, lesen sich die Ebenen — um eine Analogie aus der Sprache zu borgen — wie eine Stimme in verschiedenen Lautstärken statt wie sechs verschiedene Stimmen. Eine Hierarchie aus sechs unverbundenen Größen kann technisch geordnet sein und sich trotzdem willkürlich anfühlen; eine Hierarchie aus einem einzigen Verhältnis fühlt sich beabsichtigt an.

Öffne die vollständige Zuordnung im Scale Composer — reine Quarte, 16px-Basis, zwei Noten, mit den Überschriftenebenen auf den ganzen Stufen. Zieh am Verhältnis und die gesamte Hierarchie leitet sich neu ab; keine Ebene muss neu entschieden werden.

Wie sollten h5 und h6 aussehen?

Ehrlich gesagt: auf den meisten Websites gar nicht — weil sie nie gerendert werden. Inhalte, die wirklich sechs Verschachtelungsebenen brauchen, sind außerhalb von Spezifikationen, juristischen Dokumenten und tiefen API-Referenzen selten, und die meisten Seiten hören bei h3 oder h4 auf. Zwei Skalenstufen für Ebenen zu verbrauchen, die einmal im Jahr auftauchen, drückt die Ebenen zusammen, die auf jeder Seite vorkommen.

Die verbreitete, sinnvolle Konvention: Hör beim Skalieren bei h4 auf und unterscheide die untersten Ebenen stattdessen über die Behandlung — h5 in Fließtextgröße mit einer kräftigeren Schriftstärke, h6 in Bildunterschriftgröße, oft in Großbuchstaben mit Buchstabenabstand. Größe ist nur ein Kanal für Hierarchie; Schriftstärke, Groß-/Kleinschreibung und Abstand tragen die letzten beiden Ebenen, ohne die Skala etwas zu kosten. Wenn deine Inhalte wirklich sechs Ebenen tief gehen, ist das ein Signal, ein flacheres Verhältnis zu wählen, damit die Spitze der Hierarchie auf der Seite bleibt.

Müssen Überschriftengrößen den Überschriftenebenen entsprechen?

Nein — und sie als dasselbe zu behandeln richtet echten Schaden für die Barrierefreiheit an. Überschriftenebenen sind die Gliederung des Dokuments: Screenreader-Nutzer navigieren, indem sie zwischen Überschriften springen, und verlassen sich darauf, dass die Ebenen hierarchisch sind — ein h3 unter einem h2 unter einem h1, ohne Sprünge —, um zu verstehen, wie die Seite aufgebaut ist. Das Tutorial zur Seitenstruktur des W3C beschreibt, wie sich diese Gliederung verhalten sollte. Größe spielt dabei keine Rolle: Assistive Technologie liest die Ebene, nicht die gerenderten Pixel.

Daraus folgen zwei Regeln. Wähle das Tag für die Gliederung — greif nie zu einem h4, weil du seine Größe willst, und spring nie von h1 zu h3, weil h2 „hier zu groß aussieht”. Dann gestalte frei: Ein h2 in einer Seitenleiste, das in der h3-Größe gerendert wird, ist legitim — die Gliederung bleibt korrekt, während das visuelle Gewicht zum Kontext passt. Die Skala macht das leicht sauber umzusetzen, weil Größen benannte Stufen sind statt Eigenschaften von Tags: Jede Ebene kann auf jede Stufe zeigen, ohne die Dokumentstruktur anzutasten.

Warum bekommt dasselbe h2 quer über eine Website unterschiedliche Größen?

Weil Größen pro Seite gewählt werden. Die Landing Page bekommt ein 40px-h2, das Blog-Template ein 32px-h2, die Preisseite ein 36px-h2 — jedes für sich lokal vernünftig, jedes von einer anderen Person oder in einem anderen Monat gewählt. Besucher lesen seitenübergreifend, und die Drift macht sich als vage Schludrigkeit bemerkbar, die niemand benennen kann.

Die Lösung ist Benennung, nicht Disziplin. Leite die Überschriftengrößen einmal aus der Skala ab und exportiere sie als Tokens — Scale Composer schreibt DTCG-Tokens, CSS custom properties, Tailwind-v4-@theme-Werte oder Figma Variables — sodass „h2-Größe” überall, wo Design und Code sie nachschlagen, zu einem Wert auflöst. Für die Wahl pro Seite bleibt dann nichts mehr zu entscheiden: Eine neue Seite erbt die Hierarchie, statt sie neu zu erfinden, und das h2 hört auf, eine Meinung pro Seite zu sein.

Wie steil sollte die Überschriftenhierarchie sein?

Das Verhältnis bestimmt das Register. Eine reine Quarte (1,333) ist ein Arbeitspferd für Content- und Marketingseiten: klare Sprünge, ein h1 mit echter Präsenz. Dichte Produkt-UIs wollen meist flacher — bei etwa 1,2 landet dieselbe Zuordnung h1 bei rund 33px statt 51px, und die Hierarchie stützt sich mehr auf Schriftstärke und Abstand als auf Größe. Redaktionelle Seiten und Landing Pages können steiler gehen (1,5 und mehr), wenn Überschriften kurz sind und dominieren sollen. Der Preis dafür ist Kapazität: Je steiler das Verhältnis, desto weniger ganze Stufen passen zwischen Fließtext und die größte Größe, die ein Layout tragen kann — steile Skalen passen also zu flachen Gliederungen und flache Skalen zu tiefen.

Vergleiche eine flache und eine steile Hierarchie

Das Register lässt sich leichter fühlen als durchdenken: öffne dieselbe Überschriften-Zuordnung mit einem flachen Verhältnis von 1,2 und vergleiche sie mit der reinen Quarte — dieselben Ebenen, dieselben Stufen, h1 bei ungefähr 33px statt 51px. Wechsle zwischen den beiden hin und her und entscheide, welche in der Stimme deines Produkts spricht; exportiere dann den Gewinner als Tokens, damit das h2 jeder Seite dasselbe bedeutet.