Typografische Hierarchie: Überschrift und Fließtext im Gleichgewicht

Eine gute typografische Hierarchie führt das Auge des Lesers mühelos über die Seite: zuerst der Titel, dann die Zwischenüberschrift und zuletzt der Fließtext. Was diese Reihenfolge herstellt, ist selten Farbe oder Verzierung; meist läuft es auf Unterschiede in Größe und Gewicht hinaus. In diesem Artikel zeige ich Schritt für Schritt, wie du Überschrift und Fließtext ausbalancierst, welche Verhältnisse du wählst und wie du das in CSS wartbar aufschreibst.

Warum Hierarchie auf Größe und Gewicht beruht

Wenn du einen Text öffnest, erfasst dein Auge zuerst das größte und dunkelste Element. Das Gehirn markiert es als „wichtig" und beginnt dort zu lesen. Hierarchie ist also eigentlich eine Prioritätskarte: Als Designer sagst du dem Leser „schau hierher, dann dorthin." Das machst du mit drei Kernwerkzeugen:

• Größe (font-size): Das Größere wird zuerst gelesen. Es ist das stärkste und am schnellsten wahrgenommene Signal.
• Gewicht (font-weight): Selbst bei gleicher Größe tritt fetter Text hervor. So fügst du Betonung hinzu, ohne die Größe zu ändern.
• Weißraum: Der Abstand über einer Überschrift trennt sie vom vorherigen Block und signalisiert „neuer Abschnitt."

Farbe und Kursiv helfen ebenfalls, doch Größe und Gewicht tragen das Gerüst. Eine gute Hierarchie funktioniert weiter, selbst wenn du die Seite in Graustufen druckst.

Eine Skala wählen: nutze ein typografisches Verhältnis

Statt Überschriftengrößen zufällig zu wählen, nutze eine modulare Skala. Du legst eine Basisgröße fest (meist 16px / 1rem für den Fließtext) und multiplizierst jede höhere Stufe mit einem festen Verhältnis. Gängige Verhältnisse sind 1,2 (kleine Terz), 1,25 (große Terz) und 1,333 (reine Quarte). Größere Verhältnisse wirken dramatischer, kleinere ruhiger.

:root {
  --text-base: 1rem;     /* 16px Fließtext */
  --ratio: 1.25;
  --text-sm:  calc(var(--text-base) / var(--ratio));
  --text-lg:  calc(var(--text-base) * var(--ratio));
  --text-xl:  calc(var(--text-lg)  * var(--ratio));
  --text-2xl: calc(var(--text-xl)  * var(--ratio));
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { font-size: var(--text-base); }

Der Gewinn ist Konsistenz: Weil alle Größen mathematisch zusammenhängen, wirkt die Seite „gestimmt." Du änderst das Verhältnis an einer Stelle und skalierst die gesamte Hierarchie auf einmal neu.

Fluide Typografie: mit dem Bildschirm mitskalieren

Auf dem Smartphone kann eine 48px-Überschrift den Bildschirm überfluten, während dieselbe Überschrift am Desktop klein wirkt. Statt feste Media Queries zu stapeln, ist eine fluide Skala mit clamp() deutlich sauberer:

h1 {
  /* min, bevorzugt (viewport-abhängig), max */
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

clamp() hält die Überschrift auf kleinen Bildschirmen bei 2rem, lässt sie auf großen nie über 3,5rem steigen und interpoliert dazwischen sanft anhand der Viewport-Breite. Für Fließtext ist eine fluide Skala meist unnötig; eine feste Basis von 16–18px ist auf den meisten Geräten der bequemste Lesebereich.

Fließtext lesbar halten

Wenn die Hälfte der Hierarchie die Überschriften sind, ist die andere Hälfte der Fließtext. So markant die Überschrift auch ist – Fließtext, der nicht gelesen wird, bringt das Design zum Einsturz. Ein paar solide Regeln:

• Zeilenlänge: 50–75 Zeichen pro Zeile sind der bequemste Bereich. In CSS begrenzt du das praktisch mit max-width: 65ch;.
• Zeilenhöhe: line-height: 1.5–1.6 ist ideal für Fließtext. Überschriften dürfen enger sein (1,1–1,25), denn weiter Durchschuss wirkt bei großen Graden zerstreut.
• Kontrast: Fließtext in sehr dunklem Grau (z. B. #1a1a1a) statt reinem Schwarz reduziert die Augenermüdung, halte aber die WCAG-Kontrastschwelle ein (mindestens 4,5:1).
• Konsistenter Rhythmus: Koppel den Abstand zwischen Absätzen an die Zeilenhöhe; willkürliche margin-Werte zerstören den vertikalen Rhythmus.

Gewicht und Kontrast: die Balance finden

Nicht nur die Größe trägt die Balance zwischen Überschrift und Fließtext; das Gewicht zählt ebenso. Ein klassischer Fehler ist, eine zugleich große und sehr fette Überschrift (z. B. 800) mit sehr dünnem Fließtext (300) zu kombinieren – dieser Kontrast wirkt unausgewogen und „schreiend." Ein sichereres Rezept:

• Nutze 400 (Regular) für den Fließtext; 300 wirkt in langem Text zu blass.
• 600–700 ist genug Betonung für Überschriften; der Größenunterschied zieht ohnehin den Blick an.
• Verwende <strong> und <em> zur Betonung; alles fett zu setzen betont nichts.

Mischst du zwei Schriftarten (z. B. Serife für Überschriften, Sans-Serif für Fließtext), beschränke dich auf zwei und achte darauf, dass ihre x-Höhen zusammenpassen. In den meisten Fällen liefern verschiedene Gewichte einer einzigen Familie das sauberste Ergebnis.

Die Hierarchie testen

Du kannst die Hierarchie eines Designs mit zwei schnellen Tests prüfen. Zuerst der Blinzeltest: Kneife die Augen vor dem Bildschirm zusammen; wenn der Text verschwimmt, sollten nur die großen/dunklen Elemente unterscheidbar bleiben, und die Lesereihenfolge sollte weiterhin sinnvoll sein. Dann der Graustufentest: Schalte die Farbe aus; funktioniert die Hierarchie allein über Größe und Gewicht, ist sie solide. Für Barrierefreiheit: Nutze Überschriftenebenen (h1 → h2 → h3) nach der semantischen Reihenfolge, nicht nach der visuellen Größe; Screenreader navigieren durch diese Struktur.

Häufige Fragen

Wie viele verschiedene Größen sollte ich auf einer Seite verwenden?

Meist genügen 4–6: ein Haupttitel, zwei bis drei Zwischenüberschriftenebenen, der Fließtext und ein kleiner/Hilfstext. Mehr verwischt die Hierarchie, statt sie zu klären; jede zusätzliche Ebene verlangt dem Leser eine weitere Entscheidung ab.

Sollte ich px oder rem verwenden?

Bevorzuge rem für Schriftgrößen: Es respektiert die Schriftgrößen-Einstellung im Browser des Nutzers und verbessert die Barrierefreiheit. px kannst du für kleine Details verwenden, die wirklich fix bleiben müssen, etwa einen Rahmen.

Ist es ein Problem, dieselbe Schriftart für Überschrift und Fließtext zu nutzen?

Nein – oft ist es sogar die sicherste Wahl. Mit verschiedenen Größen und Gewichten einer einzigen Familie baust du eine starke Hierarchie. Zwei Schriftarten zu mischen erfordert Können, und eine schlechte Paarung wirkt amateurhaft.

Typografische Hierarchie ist die leise, aber entscheidendste Schicht des Designs. Wenn Größe, Gewicht und Weißraum als ein System für deine Marke zusammenarbeiten sollen, nimm Kontakt auf – lass uns gemeinsam ein lesbares, ausgewogenes und skalierbares Typografiesystem aufbauen.