Display, Überschrift und Fließtext: die drei Textstile erklärt

Nimm einen einzigen Satz — Liefere Interfaces, denen Menschen vertrauen — und setze ihn auf drei Arten. Bei 51px, Schriftstärke 700, Laufweite −0,02em, Zeilenhöhe 1,1 ist er ein Statement: Du liest ihn, bevor du dich dazu entscheidest. Bei 28px, Schriftstärke 600, Zeilenhöhe 1,3 ist er ein Wegweiser: Du nimmst ihn beim Vorbeiscrollen wahr und entscheidest, ob du anhältst. Bei 16px, Schriftstärke 400, Zeilenhöhe 1,5 fügt er sich in einen Absatz ein und wartet, bis er an der Reihe ist. Dieselben Wörter, drei verschiedene Aufgaben.

Diese drei Aufgaben definieren die drei Familien von Textrollen in einem Schriftsystem: Display-Stile verkaufen (Hero-Statements, in einem Blick gelesen), Überschriften-Stile navigieren (Orientierung, im Scannen gelesen) und Fließtext-Stile tragen (anhaltendes, mehrzeiliges Lesen). Jede Familie bekommt ihre eigene Behandlung — nicht bloß größere oder kleinere Versionen eines Stils — weil jede für einen anderen Akt des Lesens optimiert ist. Dieser Artikel geht die drei Aufgaben durch, die Einstellungen, die aus ihnen folgen, und warum Display nicht einfach eine größere h1 ist. Er ist Teil unseres Leitfadens zur Schriftgrößenskala.

Wofür ist ein Display-Stil da?

Verkaufen — im weiten Sinn: ein einzelnes Statement landen lassen, bevor der Leser sich überhaupt aufs Lesen eingelassen hat. Eine Hero-Überschrift, eine Zahl auf der Preisseite, eine Entschuldigung auf der 404-Seite. Display-Text wird in einem einzigen Blick gelesen, meist nur einmal und fast nie in Mengen — ein Screen trägt ein Display-Statement, selten zwei.

Die Einstellungen folgen aus der Aufgabe. Die Größen sind die größten auf der Skala (ab 44px; 51px im durchgerechneten Beispiel unten). Die Zeilenhöhe fällt auf etwa 1,1, denn ein zweizeiliges Display-Statement mit Fließtext-Zeilenabstand zerfällt in zwei getrennte Statements — auf einen Blick müssen die Zeilen als eine Form gelesen werden. Die Laufweite zieht sich auf etwa −0,02em zusammen, weil die eingebaute Laufweite einer Schrift locker wirkt, wenn man sie weit über Lesegrößen hinaus vergrößert. Die Schriftstärke liegt typischerweise bei 700 oder mehr: Bei diesen Größen sind genug Pixel da, damit kräftige Striche ihre Punzen offen halten, und die Dunkelheit gibt dem Statement seine Autorität.

Was leisten Überschriften-Stile, was Display nicht leistet?

Überschriften navigieren. Sie existieren, damit ein Leser, der eine Seite scrollt, ihre Struktur rekonstruieren kann, ohne sie zu lesen — in welchem Abschnitt bin ich, was kommt als Nächstes, wo ist der Teil, den ich brauche. Das heißt, Überschriften werden vergleichend gelesen: Eine h2 zählt vor allem dadurch, dass sie sichtbar größer als eine h3 und sichtbar kleiner als die h1 ist — deshalb kommen Überschriftengrößen als eine gestufte Reihe (21, 28, 38px auf der durchgerechneten Skala) statt als eine einzige Größe.

Weil eine Überschrift lang genug sein kann, um umzubrechen, bleibt ihre Zeilenhöhe leserfreundlich — um die 1,3 — und ihre Laufweite zieht sich nur sanft zusammen (0 bis −0,015em, wenn die Größen wachsen). Die Schriftstärken liegen bei 600–700: dunkel genug, um auf einen Blick über dem Fließtext zu rangieren, zurückhaltend genug, dass sechs Überschriften auf einer Seite sich nicht gegenseitig überschreien. Eine Überschrift ist ein Wegweiser, und ein Wegweiser, der bewundert werden will, versagt bei seiner Aufgabe.

Was macht Fließtext anders?

Fließtext trägt das eigentliche Lesen — viele Zeilen, anhaltende Aufmerksamkeit, das Auge, das ein paar hundert Mal pro Seite nach links zurückkehrt. Alles an einem Fließtext-Stil dient diesem Rücksprung. Die Größe liegt in dem Bereich, für den Schriften entworfen wurden (14–18px; 16px ist der übliche Standard). Die Zeilenhöhe öffnet sich auf etwa 1,5, denn der leere Kanal zwischen den Zeilen ist das, was dem Auge erlaubt, den Anfang der nächsten Zeile ohne Stolpern zu finden. Die Schriftstärke bleibt bei 400 — die Strichstärke, für die die Schriftart zum Lesen gezeichnet wurde — und die Laufweite bleibt bei null, weil Schriften für diesen Größenbereich bereits die richtige Laufweite haben.

Das ist auch die Familie, in der Zurückhaltung am meisten zahlt: Fließtext macht auf fast jedem Screen den größten Teil der Wörter aus, also ist jede Eigenheit des Stils eine Eigenheit, mit der der Leser absatzweise leben muss.

Wie vergleichen sich die drei Familien?

* Die Bereiche sind typisch für Interface-Arbeit; die Werte in Klammern stammen aus einer modularen Skala mit 16px-Basis bei Verhältnis 1,333 mit zwei Noten pro Intervall. Auf dieser Skala, mit auf das 8px-Grundlinienraster (die halbe Basis) gerasterten Zeilenhöhen: display 51/56, heading-lg 38/48, heading-md 28/36, body 16/24, caption 12/16.

Lies die Tabelle spaltenweise, und das Muster zeigt sich: Geht man von Display hinunter zu Caption, steigt die Zeilenhöhe, während die Größe fällt, und die Laufweite schwingt von negativ zu positiv. Die drei Familien sind keine Größen eines einzigen Stils — es sind drei Stile, die sich zufällig eine Schriftart teilen.

Sieh dir alle drei Familien in einem System an: öffne dieses Rollen-Set in Scale Composer — Display, die Überschriften-Reihe, Fließtextgrößen und Caption nebeneinander, jede mit der Zeilenhöhe, Schriftstärke und Laufweite, die ihre Aufgabe verlangt. Vergleiche die Zeilenhöhe 1,1 der Display-Ebene direkt mit den 1,5 des Fließtexts.

Warum ist Display nicht einfach eine größere h1?

Weil die Aufgabe der h1 immer noch Navigation ist — sie ist die Spitze der Orientierungs-Reihe und gehorcht deren Konventionen: Überschriften-Zeilenhöhe, Überschriften-Schriftstärkenlogik, eine Größe, die relativ zur h2 rangiert. Display sitzt über dieser Reihe und bricht ihre Konventionen mit Absicht: engere Zeilenhöhe, engere Laufweite, oft eine kräftigere Schriftstärke — Einstellungen, die irgendwo in der Überschriften-Reihe selbst falsch wären.

Die Unterscheidung verdient sich ihren Platz in der Praxis. Dehne die Überschriften-Reihe, damit sie einen 51px-Hero abdeckt, und du gibst dem Hero entweder die Zeilenhöhe des Überschriften-Stils (er zerfällt auf zwei Zeilen) oder du verbiegst still den Stil der h1, bis er nicht mehr zu seinen Geschwistern passt. display als eigene Rolle zu behalten, lässt beides richtig sein — und beachte, dass Display ein Stil ist, kein Element: Ein Marketing-Hero, der als Display gestaltet ist, wird meist trotzdem als h1 ausgezeichnet, weil visuelle Rolle und Dokumentstruktur getrennte Entscheidungen sind. Plattform-Schriftsysteme ziehen dieselbe Linie — Apples Human Interface Guidelines definieren eine Large-Title-Rolle über der Titel-Reihe, mit Body-, Footnote- und Caption-Rollen darunter, was dieselben drei Familien spiegelt.

Wo passen Captions und Overlines hin?

Sie sind die stillen Geschwister des Fließtexts — kleiner als Lesegröße, eingesetzt für Metadaten, Zeitstempel, Tabellen-Labels und Bildnachweise. Eine Caption ist kleiner Text in Kleinbuchstaben: Sie behält die Schriftstärke des Fließtexts, bekommt eine Spur mehr Laufweite (+0,02em), um bei 12px offen zu bleiben, und tritt oft eher in der Farbe als in der Schriftstärke zurück. Eine Overline ist die Großbuchstaben-Variante — das kleine Label über einem Card-Titel — und Großbuchstaben in kleinen Größen brauchen echte Luft: +0,08em und eine Schriftstärke von 500, damit ihre Striche die Größe überleben. Keine von beiden gehört zur Überschriften-Reihe; sie rangieren unter dem Fließtext, nicht darüber.

Baue das minimale Set

Die meisten Produkte brauchen weniger Stile, als sie denken: öffne ein minimales Rollen-Set — ein Display, zwei Überschriften, ein Fließtext, eine Caption — und teste es an deinem komplexesten Screen. Füge einen Stil nur hinzu, wenn zwei bestehende Rollen wirklich kollidieren, und lass jede Ergänzung die Logik ihrer Familie erben: Überschriften-Zeilenhöhen für Überschriften, Lese-Zeilenhöhen für Fließtext. Die drei Aufgaben — verkaufen, navigieren, tragen — sind die Checkliste; wenn ein vorgeschlagener Stil sich keiner von ihnen zuordnen lässt, ist er wahrscheinlich eine Variante eines Stils, den du schon hast.