Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.
Kerning (Unterschneidung) ist die Anpassung des Abstands zwischen zwei bestimmten Zeichen; der Wortabstand ist der Rhythmus der Lücken zwischen Wörtern über eine Zeile hinweg. Beide dienen demselben Ziel: einer Textur, die gleichmäßig genug ist, dass sich das Auge in glatten Zügen durch den Text bewegt, statt über dunkle Klumpen und weiße Löcher zu stolpern. 2005 argumentierte dieses Kapitel, die Abstandsqualität sei weitgehend der Schrift und der Render-Engine ausgeliefert, und Blocksatz am Bildschirm verschlechtere die Lesbarkeit. Zwanzig Jahre später braucht die erste Behauptung eine gründliche Revision. Die zweite steht, mit einem wichtigen Vorbehalt, noch immer.
Was sich seit 2005 geändert hat
Die ursprüngliche Ausgabe behandelte Kerning als etwas, das das Web größtenteils nicht konnte. Fonts wurden auf grobe Pixelraster gerastert, Kerningpaare von Browsern oft ignoriert, und Gestaltern wurde geraten, Schriften zu wählen, die die Vernachlässigung überlebten. Diese Welt ist vorbei. Jeder moderne Browser wendet OpenType-Kerning standardmäßig auf Fließtext an — die CSS-Eigenschaft font-kerning steht per Default auf auto, was die Kern-Daten in Textgrößen aktiviert —, und Subpixel-Positionierung sorgt dafür, dass diese Anpassungen tatsächlich gerendert werden. Der praktische Rat hat sich umgekehrt: Sie kämpfen nicht mehr um Kerning; Sie erben es, und Ihre Aufgabe ist, es nicht zu zerstören.
Die zweite große Veränderung ist regulatorisch. WCAG 2.1 führte das Erfolgskriterium 1.4.12 Text Spacing ein (Level AA, in WCAG 2.2 übernommen), das verlangt, dass Inhalte weder Funktionalität noch Inhalt verlieren, wenn ein Nutzer die Abstände überschreibt — konkret den Buchstabenabstand auf das 0,12-Fache der Schriftgröße und den Wortabstand auf das 0,16-Fache der Schriftgröße, zusammen mit Erhöhungen von Zeilen- und Absatzabstand. Das rahmt Abstände völlig neu. Sie sind nicht nur eine ästhetische Entscheidung, die der Gestalter einmal trifft; sie sind eine Variable, die zu ändern dem Leser zusteht. Container mit fester Höhe, enge Buttons und zum Abschneiden neigende Beschriftungen, die abgeschnitten werden oder überlappen, wenn ein Nutzer diese Überschreibungen anwendet, sind Barrierefreiheitsfehler. Testen Sie Ihre Layouts vor dem Ausliefern mit einem Text-Spacing-Bookmarklet oder einer Browser-Erweiterung.
Drittens stellt CSS heute echte Steuerungen bereit. Die Eigenschaft word-spacing justiert die Wortzwischenräume direkt, letter-spacing übernimmt die Laufweite (siehe nächstes Kapitel), und font-kerning sowie font-feature-settings geben expliziten Zugriff auf das OpenType-Verhalten. Noch neuer: text-wrap: pretty bittet den Browser, zusätzlichen Aufwand in den Zeilenumbruch zu stecken — Hurenkinder und schlechte Umbruchstellen zu vermeiden —, was die Abstandstextur in linksbündigem Flattersatz still verbessert, ohne jeden manuellen Eingriff.
Kerning in der Praxis
Weil Kerning standardmäßig aktiv ist, sind die verbleibenden Fehler größtenteils selbst verschuldet. Aggressive positive letter-spacing setzt Kerningpaare faktisch außer Kraft, indem sie sie in hinzugefügtem Raum ertränkt — ein Grund, warum das Spationieren von Fließtext riskant ist. Schlecht produzierte Displayfonts werden noch immer mit dünnen Kern-Tabellen ausgeliefert, und in Headline-Größen fallen diese Lücken auf — die klassischen Problempaare wie ein Versal-T oder -V gefolgt von einem kleinen Vokal. In Displaygrößen ist es vernünftig, ein einzelnes Paar von Hand zu korrigieren; braucht eine Schrift aber ständige Korrektur, ist es die falsche Schrift.
Eine echte Sorge von 2005 überlebt: Die Fontqualität zählt noch immer. Variable Fonts und professionell produzierte Webfonts tragen in der Regel gründliche Zurichtungs- und Kerningdaten; freie Fonts unklarer Herkunft oft nicht. Bewerten Sie eine Kandidatenschrift, indem Sie echte Absätze setzen, nicht eine Musterzeile.
Wortabstand und Blocksatz
Der ursprüngliche Befund — dass Blocksatz die Lesbarkeit am Bildschirm verringert — bleibt in seiner üblichen Form korrekt, aber der Mechanismus verdient Präzision. Voller Blocksatz zwingt jede Zeile auf eine feste Satzbreite, indem er die Zwischenräume zwischen den Wörtern dehnt oder staucht. Ohne Silbentrennung hat der Algorithmus wenige Umbruchstellen zur Verfügung, sodass manche Zeilen mit höhlenartigen Wortlücken enden. Wenn sich diese Lücken über aufeinanderfolgende Zeilen vertikal stapeln, bilden sie "Gießbäche" aus Weißraum, die den Absatz hinunterlaufen. Gießbäche sind mehr als hässlich: Sie konkurrieren mit dem horizontalen Lesepfad, und Leserinnen und Leser, die auf gleichmäßige Abstandssignale angewiesen sind — darunter viele mit Dyslexie —, sind überproportional betroffen. Ungleichmäßiger Wortabstand stört die parafoveale Vorschau, mit der das Auge seine nächste Sakkade plant.
Der Druck hat das vor Jahrhunderten gelöst, indem Silbentrennung und Blocksatz zusammenarbeiten, und das Web kann das im Prinzip heute auch: CSS hyphens: auto aktiviert in den meisten Browsern die wörterbuchgestützte Silbentrennung und reduziert die Abstandsvarianz von Blocksatz dramatisch. Aber die Browser-Justierung bleibt ein einfacher zeilenweiser Algorithmus, nicht die absatzweite Optimierung professioneller Layoutsoftware, sodass selbst silbengetrennter Blocksatz im Web selten die Gleichmäßigkeit eines gut gesetzten Buches erreicht. Der pragmatische Schluss: Verwenden Sie linksbündigen Flattersatz als Standard für das Lesen am Bildschirm. Wenn ein Entwurf wirklich Blocksatz verlangt, aktivieren Sie die Silbentrennung, halten Sie die Satzbreite großzügig und prüfen Sie das Ergebnis bei schmalen Breiten — Blocksatz in einer schmalen Spalte ist der Ort, an dem Gießbäche gedeihen.
Beachten Sie auch, dass das Erfolgskriterium 1.4.8 Visual Presentation der WCAG 2.2 (Level AAA) "Text ist nicht im Blocksatz gesetzt" ausdrücklich unter seinen Anforderungen an Textblöcke aufführt. Selbst auf dem AA-Level, das die meisten Teams anstreben, ist das ein starkes Signal dafür, wo die Autoren des Standards gelandet sind.
Wortabstand als Gestaltungsvariable
Die direkte Manipulation von word-spacing ist für Fließtext selten nötig — die eingebaute Leerzeichen-Glyphe der Schrift ist meist richtig —, aber sie verdient ihren Platz in Randfällen: Wortlücken in Versal-Navigationsbeschriftungen leicht öffnen oder sie in großen Display-Einstellungen straffen, wo Standard-Leerzeichen überdimensioniert wirken. Jede Anpassung sollte in em-relativen Einheiten angegeben werden, damit sie mit dem Text skaliert, und sie muss die von 1.4.12 vorgeschriebenen Nutzer-Überschreibungen tolerieren. Wenn Ihr Layout nur bei exakt dem von Ihnen gewählten Abstand funktioniert, funktioniert es nicht.
In CSS
body {
font-kerning: normal; /* on by default — never disable it */
text-align: left; /* justification without hyphenation makes rivers */
}
p { text-wrap: pretty; }
/* If justification is required, hyphenate: */
.justified { text-align: justify; hyphens: auto; }Empfehlungen
- Setzen Sie Fließtext standardmäßig linksbündig im Flattersatz; behandeln Sie vollen Blocksatz als Ausnahme, die hyphens: auto und Tests bei schmalen Breiten erfordert.
- Belassen Sie font-kerning auf seinem Default; deaktivieren Sie das Kerning nicht und vermeiden Sie starke letter-spacing, die Kerningpaare überlagert.
- Verwenden Sie text-wrap: pretty auf Fließtext, wo unterstützt, um Umbruchstellen und Abstandstextur nahezu kostenlos zu verbessern.
- Geben Sie jede Anpassung von word-spacing oder letter-spacing in em-Einheiten an, nie in Pixeln.
- Prüfen Sie, dass Layouts die WCAG-1.4.12-Überschreibungen überstehen — Buchstabenabstand 0,12em, Wortabstand 0,16em, Zeilenabstand 1,5 — ohne Abschneiden, Überlappung oder verlorene Inhalte.
- Wählen Sie Schriften mit vollständigen Kerning- und Zurichtungstabellen; beurteilen Sie sie anhand gesetzter Absätze, nicht anhand von Schriftmustern.