Vertikale Abstände zwischen Textblöcken

Probier das an einem beliebigen Artikel aus: Gib jeder Überschrift denselben Abstand oben und unten — 24px auf jeder Seite — scroll dann durch die Seite und frag dich bei jeder Überschrift: Zu welchem Abschnitt gehört sie? Symmetrische Ränder machen die Antwort tatsächlich mehrdeutig: Jede Überschrift schwebt genau in der Mitte zwischen dem Text, den sie abschließt, und dem Text, den sie eröffnet. Gib denselben Überschriften jetzt 32px oben und 16px unten. Sonst ändert sich nichts, und doch heftet sich jede Überschrift sichtbar an den Inhalt, der ihr folgt, und die Seite liest sich als Abschnitte statt als gleichmäßiger Stapel von Blöcken.

Vertikale Textabstände lassen sich auf vier Regeln herunterbrechen: Absatzabstände von zwei bis drei Grundlinien-Einheiten, Überschriften-Ränder, die asymmetrisch sind — deutlich mehr Abstand oben als unten — Listenpunkte enger gesetzt als Absätze, und jeder dieser Abstände aus der Abstandsskala genommen, statt pro Element gewählt.

Dieser Artikel arbeitet jede Regel durch, den perzeptiven Grund, warum die Asymmetrie funktioniert, und einen vollständig durchgerechneten Stack — Überschrift, Absätze, Zwischenüberschrift, Liste — mit echten Werten. Er überträgt das Skalen-Denken aus dem übergeordneten Abstände-Hub auf das konkrete Problem von Text.

Wie viel Abstand gehört zwischen Absätze?

Miss ihn in Grundlinien-Einheiten statt in willkürlichen Pixeln. Die Grundlinien-Einheit ist üblicherweise die Hälfte der Fließtext-Größe — 16px Fließtext ergibt eine 8px-Einheit — und Absatzabstände von zwei bis drei Einheiten (16–24px) decken die meisten Texteinstellungen ab.

Die Grenzen sind auf beiden Seiten wichtig. Ein Absatzabstand hat eine einzige Aufgabe: sichtbar größer zu sein als der Abstand zwischen den Zeilen innerhalb eines Absatzes, ohne so groß zu werden, dass sich aufeinanderfolgende Absätze nicht mehr als ein Text lesen. Bei 16px Fließtext mit einer Zeilenhöhe von 1,5 beträgt der sichtbare Weißraum zwischen den Zeilen etwa 8px; ein Absatzabstand von 16px ist das Doppelte — klar eine Grenze, klar kein Abschnittswechsel. Ein Abstand von 24px kommt einer ganzen Leerzeile nahe und passt zu lockereren, redaktionellen Einstellungen. Unter zwei Grundlinien-Einheiten beginnen Absätze ineinander zu verschwimmen; deutlich über drei zerfällt der Text in Fragmente.

Warum sollten Überschriften mehr Abstand oben als unten haben?

Weil eine Überschrift ein Etikett für den Abschnitt darunter ist, kein Trenner zwischen zwei Abschnitten — und mit Abstand sagst du genau das. Der große Abstand oben verkündet, dass der vorherige Abschnitt zu Ende ist; der kleine Abstand unten bindet die Überschrift an ihren eigenen ersten Absatz.

Die perzeptive Grundlage ist das Gesetz der Nähe aus der Gestaltforschung zur Gruppierung: Elemente, die nah beieinander liegen, werden als zusammengehörig wahrgenommen, noch bevor irgendetwas gelesen wird. Wer an einer symmetrischen Überschrift vorbeiscannt, muss sie lesen, um zu wissen, welchen Abschnitt sie benennt; eine asymmetrische ist auf einen Blick korrekt gruppiert. Ein brauchbares Verhältnis ist in vielen Texteinstellungen etwa 2:1 oben zu unten — 32px oben und 16px unten für eine Hauptüberschrift.

Wie eng sollten Listenpunkte gesetzt sein?

Enger als Absätze. Listenpunkte sind parallele Teile eines einzigen Gedankens, und ihr Abstand sollte das ausdrücken: eine Grundlinien-Einheit (8px) zwischen den Punkten, gegen den Absatzabstand von 16px, hält die Liste als eine Einheit lesbar. Wenn Punkte regelmäßig über mehrere Zeilen laufen, verhalten sie sich wie kleine Absätze und verdienen eine Stufe mehr — 11px oder 16px. Der Listenblock als Ganzes trennt sich durch den normalen Absatzabstand von den umgebenden Absätzen, damit die Liste im Text sitzt statt zwischen Texten zu schweben.

Wie sieht ein vollständiger Artikel-Stack in Zahlen aus?

Jeder Wert unten ist eine Stufe aus einer Abstandsskala — Basis 16, Verhältnis 2, zwei Schritte pro Verdopplung, was 8, 11, 16, 23, 32 erzeugt — und die Grundlinien-Einheit ist die halbierte Basis, 8px:

Beide Überschriften-Ebenen halten grob die 2:1-Asymmetrie (32/16 und 23/11), und die h3 rückt auf beiden Seiten eine Skalenposition unter die h2, sodass die Hierarchie proportional bleibt. Die Paarung ist kein Zufall, den du von Hand pflegen musst: Bei zwei Schritten pro Verdopplung ist jede Stufe genau das Doppelte der Stufe zwei Positionen darunter — die 2:1-Asymmetrie der Überschriften ergibt sich aus der Arithmetik der Skala selbst.

Öffne die Skala hinter diesem Stack in Scale Composer — die fünf Werte in der Tabelle sind aufeinanderfolgende Stufen einer generierten Skala, und die 8px-Grundlinien-Einheit ist die halbierte 16px-Basis.

Eine Umsetzungsnotiz: Fließtext ist der Ort, an dem Element-Ränder — statt eines gap am Elternelement — das natürliche Werkzeug bleiben, weil der richtige Abstand vom Paar abhängt (Überschrift-zu-Absatz unterscheidet sich von Absatz-zu-Absatz) und ein einheitlicher gap nicht pro Paar variieren kann. Margin-Collapsing, im App-Layout so oft ein Bug, arbeitet hier für dich: Der 16px-Unterrand des Absatzes trifft auf den 32px-Oberrand der h2 und kollabiert zu 32px — genau der Wert, den du wolltest, ohne Sonderbehandlung.

Woher kommen die Abstandswerte?

Aus derselben Skala, aus der auch alle anderen Abstände kommen. Die Formel size = base × ratio^(i/notes) macht aus drei Zahlen das ganze Menü, und Textabstände nutzen einfach dessen untere Hälfte: 8 für Listenpunkte, 11 und 16 für Abstände auf Absatzebene, 23 und 32 für die Zuführung zu Überschriften. Das heißt, Textabstände sind kein zweites System, das gepflegt werden muss — der Artikel-Stack, das Komponenten-Padding und die Stege der Seite lösen sich alle in Stufen einer Skala auf, und genau das lässt eine Content-Seite und einen Produkt-Screen aus demselben Team verwandt aussehen.

Sieh die Asymmetrie bei der Arbeit zu

Am schnellsten verinnerlichst du die Überschriften-Regel, indem du die Arithmetik darunter änderst und zusiehst, wie sich die Paare verschieben. Bei zwei Schritten pro Verdopplung ist das Oben/Unten-Paar mit zwei Stufen Abstand genau 2:1; generierst du dieselbe Skala mit drei Schritten pro Verdopplung neu, lockert sich dieses Paar auf etwa 1,6:1 — eine sanftere Asymmetrie, die zu dichter Dokumentation passt, auf Kosten eines Teils der Prägnanz. Beurteile den Unterschied selbst: öffne den Überschriften-Rand-Zustand und wechsle die Schritte.