Fluide Typografie mit clamp aufsetzen

Der übliche Weg sind Stufen an Breakpoints: text-3xl auf dem Handy, ab 768 Pixeln md:text-5xl, ab 1024 dann lg:text-6xl. Das stimmt an genau drei Stellen. Dazwischen passiert nichts, und dann springt die Überschrift um zwanzig Pixel, weil das Fenster um ein Pixel breiter geworden ist.

Der Sprung selbst wäre zu verschmerzen, niemand zieht ein Fenster langsam auf und schaut dabei zu. Ärgerlicher ist die Strecke davor. Zwischen 768 und 1024 Pixeln wächst die Fläche um ein Drittel, die Schrift aber bleibt stehen. Genau dort, auf kleinen Laptops und querliegenden Tablets, wirkt eine Seite dann entweder gedrängt oder verloren.

Fluide Typografie dreht das um. Statt Stufen zu setzen, beschreibst du eine Gerade: So groß ist die Schrift auf dem schmalsten Gerät, so groß auf dem breitesten, dazwischen rechnet der Browser. Aus drei Klassen mit Breakpoint-Präfix wird eine ohne.

clamp nimmt drei Werte: eine Untergrenze, einen Wunschwert und eine Obergrenze. Der Browser nimmt den Wunschwert, solange er zwischen den Grenzen liegt, sonst die nächstgelegene Grenze. Das Interessante steckt in der Mitte.

Der Wunschwert besteht aus zwei Teilen: einem festen Sockel in rem und einer Steigung in vw. Der vw-Anteil macht die Größe von der Fensterbreite abhängig, der rem-Anteil hält sie an der Grundschriftgröße fest. Zusammen ergeben sie eine Gerade zwischen zwei Punkten.

Diese beiden Punkte legst du fest: eine Größe bei einer schmalen Breite, eine bei einer breiten. Daraus folgt die Steigung, aus der Steigung der Sockel. Für 32 Pixel bei 360 und 56 Pixel bei 1280 sind das 24 Pixel Zuwachs auf 920 Pixel Strecke, also 2,61vw, und ein Sockel von 1,41rem.

Eine einzelne Überschrift ist schnell gemacht. Eine Seite braucht aber fünf bis sieben Größen, die zueinander passen. Der übliche Weg ist ein Verhältnis: Jede Stufe ist um denselben Faktor größer als die vorige, zum Beispiel 1,2 auf dem Handy und 1,333 auf dem Desktop.

Dass das Verhältnis oben größer sein darf als unten, ist der eigentliche Gewinn. Auf einem schmalen Bildschirm müssen die Größen nah beieinander liegen, sonst sprengt die Überschrift die Zeile. Auf einem breiten dürfen sie auseinanderlaufen, weil dort Platz für einen deutlichen Unterschied ist. Fluide Werte erledigen diese Spreizung von selbst, wenn du für jede Stufe eigene Endpunkte wählst.

Benenne die Stufen nach ihrer Aufgabe, nicht nach ihrer Größe. display, title, lead, body, small: Diese Namen überleben eine Neugestaltung. text-56 überlebt sie nicht, denn spätestens wenn daraus 48 Pixel werden, steht eine Lüge im Code.

Eine fluide Skala löst ein Problem und schafft ein zweites. Wenn die Schrift mit der Breite wächst, wächst auch die Zeile, und ab einer gewissen Länge verliert das Auge beim Rücksprung die nächste. Zwischen sechzig und fünfundsiebzig Zeichen liegt der Bereich, in dem längere Texte ruhig lesbar bleiben.

Die Einheit dafür ist ch. Sie misst die Breite der Ziffer Null, ist also eine Näherung und keine Zählung, aber eine brauchbare: max-width: 65ch trifft in den meisten Schriften ziemlich genau die gewünschte Zeile. In Tailwind heißt dieselbe Größe max-w-prose.

Die Zeilenhöhe gehört dazu, und zwar gegenläufig zur Größe. Große Schrift braucht wenig Durchschuss, weil die Zeilen ohnehin weit auseinanderliegen. Kleine Schrift braucht mehr, sonst klebt der Absatz zusammen. Etwa 1,05 für eine große Überschrift und 1,6 für Fließtext sind ein brauchbarer Ausgangspunkt.

Eine fluide Überschrift hat einen unangenehmen Nebeneffekt: Der Umbruch verschiebt sich ständig mit. Mal stehen fünf Wörter oben und eines unten, mal bleibt das letzte Wort allein auf der zweiten Zeile. Kaputt ist daran nichts, aber es sieht nach Zufall aus, und Zufall liest sich unruhig.

Dafür gibt es seit Kurzem zwei CSS-Werte, die genau diese Arbeit übernehmen. text-wrap: balance verteilt die Wörter so auf die Zeilen, dass alle ungefähr gleich lang werden. Das ist für Überschriften gedacht und dort auch wirklich gut. text-wrap: pretty geht andersherum vor: Es lässt den Umbruch weitgehend, wie er ist, verhindert aber, dass am Ende ein einzelnes Wort allein steht.

Beide Werte kosten Rechenzeit, deshalb sind sie begrenzt. balance arbeitet in Chromium bis sechs Zeilen, in Firefox bis zehn, in Safari ohne feste Grenze. Darüber fällt es auf den normalen Umbruch zurück, ohne Fehler und ohne Sprung. Das trifft den Anwendungsfall gut, denn ausbalancieren will man Überschriften mit zwei oder drei Zeilen, keine Absätze.

Tailwind v4 hat für diesen Fall alles an Bord. Eine Variable unter --text- im @theme-Block wird zu einer Utility-Klasse, und die zugehörigen Angaben hängst du mit doppeltem Bindestrich daran: --text-title--line-height und --text-title--letter-spacing. Aus drei Zeilen CSS wird eine Klasse.

Im Markup bleibt damit ein Wort übrig. text-title setzt Größe, Zeilenhöhe und Laufweite zugleich, und zwar für jede Fensterbreite. Die Breakpoint-Präfixe verschwinden, weil sie nichts mehr zu tun haben.

Einzelne Ausreißer kommen in eckigen Klammern dazu, aber sparsam. Wenn dieselbe eckige Klammer zum dritten Mal auftaucht, ist sie keine Ausnahme mehr, sondern eine Stufe, und gehört ins Theme. Genau diese Grenze hält eine Skala klein.

Die Formel ist der einfache Teil. Die Stellen, an denen eine fluide Skala kippt, liegen woanders: bei den Grenzen, beim Laden der Schrift und bei der Frage, ob überhaupt das Fenster gemeint war.

Der letzte Punkt ist zugleich der Übergang zum nächsten Werkzeug. cqi verhält sich zu einem Container genau so wie vw zum Fenster: ein Prozent der Inline-Breite. Wer Bausteine baut, die an mehreren Stellen landen, tauscht vw gegen cqi und bekommt eine Schrift, die sich am tatsächlich vorhandenen Platz orientiert statt an einer Zahl, die woanders entsteht.