CSS-Typografie: Setzt der Browser bald wie im Druck?

CSS-Typografie: Wie der Browser endlich wie eine Druckseite setzt

Michael Dobler

Autor Dr. Web

28. Juli 2026

2 Min. Lesezeit

Moderne Browser setzen Text inzwischen fast wie eine Druckerei: ausgeglichene Überschriften, saubere Zeilenumbrüche, echte Initialen. Der Haken dabei ist, dass viele dieser CSS-Eigenschaften ab Werk abgeschaltet sind und bewusst aktiviert werden müssen. Ein Überblick, was sich schon lohnt und was noch nicht überall funktioniert.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

CSS-Typografie hat in den vergangenen zwei Jahren einen Sprung gemacht, den viele Teams noch gar nicht ausschöpfen. Die Designerin Carmen Ansio hat zusammengetragen, welche Feinheiten aus dem klassischen Bleisatz heute direkt im Browser laufen, ganz ohne JavaScript. Der Reihe nach, vom sicheren Standard bis zur Wackelkandidatin.

Das Wichtigste in Kürze

text-wrap: balance und pretty gleichen Überschriften und Fließtext seit Oktober 2024 in allen großen Engines aus (Baseline).
Initialbuchstaben (initial-letter) und hängende Satzzeichen (hanging-punctuation) sehen edel aus, laufen aber noch nicht in jedem Browser.
Alle Effekte greifen als Progressive Enhancement: Wo die Engine sie nicht kennt, bleibt der Text normal lesbar.
Für deutschen Text bleiben lang="de" und hyphens: auto Pflicht, sonst brechen lange Komposita hässlich um.

Was kann CSS-Typografie heute wirklich?

Metallhalter mit CSS-Gravur und eingesteckter Karte mit Frakturtext vor hellem Grund — Die CSS-Funktion clamp() skaliert Schriftgrößen flüssig zwischen Minimum und Maximum, ohne einzelne Umbruchpunkte pro Bildschirmbreite

Den Anfang macht die Laufweite. Mit clamp() skaliert die Schriftgröße flüssig zwischen einem Minimum und einem Maximum, ohne dass für jede Bildschirmbreite ein eigener Umbruchpunkt nötig wäre. Dass gutes CSS über den Erfolg einer Website mitentscheidet, zeigt sich genau an solchen Details.

Darüber legt sich der eigentliche Feinsatz. font-optical-sizing: auto schärft die Glyphen je nach Schriftgrad nach, sofern die Schrift eine opsz-Achse mitbringt, etwa Fraunces oder Roboto Flex.

Ab Werk aus: Der spannende Punkt steckt woanders. Diese Eigenschaften kommen abgeschaltet, weil Browser-Defaults auf Tempo und Vorhersehbarkeit optimiert sind. Den Feinsatz schalten wir bewusst zu, statt ihn geschenkt zu bekommen.

Guter Feinsatz war jahrelang eine Frage teurer JavaScript-Tricks. Dass der Browser ihn jetzt selbst beherrscht, spart Agenturen Aufwand und macht Fließtext auf jedem Gerät lesbarer.
— Markus Seyfferth, Chefredakteur Dr. Web

Welche Eigenschaften sind schon Baseline, welche fehlen noch?

text-wrap: balance verteilt die Zeilen einer Überschrift gleichmäßig, text-wrap: pretty verhindert einzelne Schusterjungen am Absatzende. Beide sind seit Oktober 2024 Baseline und laufen damit in den aktuellen Versionen von Chrome, Firefox und Safari.^[1]

Alte Krücken: Bis dahin hat derselbe Ausgleich JavaScript-Bibliotheken oder reine Handarbeit verlangt. Dass der Browser ihn jetzt selbst übernimmt, gehört zu einer mehrjährigen Aufwertung der Web-Typografie im CSS-Standard.

Weniger weit sind Initialbuchstaben und hängende Satzzeichen. initial-letter zieht den ersten Buchstaben über mehrere Zeilen groß, hanging-punctuation schiebt öffnende Anführungszeichen in den Rand. Beide gelten laut MDN als eingeschränkt verfügbar, hanging-punctuation praktisch nur in Safari.^[2]

Notlösung: Ersatzweise lässt sich der Effekt überall mit einem negativen text-indent nachbauen.

CSS-Typografie: fertig oder noch in Arbeit?

Sechs Eigenschaften für den Feinsatz und ihr Browser-Status (Stand: Juli 2026)

clamp()

Schriftgröße skaliert flüssig zwischen Minimum und Maximum, ohne feste Breakpoints.

Baseline

text-wrap: balance

Verteilt Überschriftszeilen gleichmäßig. Greift bis 6 Zeilen (Chromium) bzw. 10 (Firefox).

Baseline 2024

text-wrap: pretty

Vermeidet Schusterjungen am Absatzende. Ideal für langen Fließtext.

Baseline 2024

font-optical-sizing

Schärft Glyphen je nach Schriftgrad nach, wenn die Schrift eine opsz-Achse hat.

Baseline

initial-letter

Zieht den ersten Buchstaben als Initiale über mehrere Zeilen. Firefox fehlt noch.

Eingeschränkt

hanging-punctuation

Schiebt öffnende Anführungszeichen in den Rand. Praktisch nur in Safari.

Eingeschränkt

Was bedeutet das für Agenturen und Freelancer im DACH-Raum?

Ohne Risiko: Das Angenehme am Feinsatz per CSS ist seine Gutmütigkeit. Kennt eine Engine eine Eigenschaft nicht, ignoriert sie diese, und der Text bleibt normal umbrochen. Ein Fallback muss also niemand bauen.

Deutsche Eigenheit: Ein Detail bleibt für deutschsprachige Seiten wichtig. text-wrap: pretty entschärft zwar Schusterjungen, gegen die langen deutschen Komposita helfen aber weiter lang="de" und hyphens: auto. Wie stark die Sprache das Layout aushebeln kann, unterschätzen viele. Und weil pretty den Umbruch teurer berechnet, gehört es an den Fließtext, nicht wahllos auf jedes Element.

Konkret jetzt: text-wrap für Überschriften und Absätze aktivieren, Initialen und hängende Satzzeichen nur als Zugabe behandeln, und die Silbentrennung für deutschen Text nicht vergessen. So sieht der Satz auf jedem Gerät ein Stück näher an der gedruckten Seite aus.