Was ist fluide Typografie?

Fluide Typografie definiert jede Schriftgröße als Funktion der Viewport-Breite: eine Mindestgröße für kleine Bildschirme, eine Maximalgröße für große und ein sanftes, kontinuierliches Gleiten zwischen beiden. Sie ersetzt das Breakpoint-Modell — feste Größen, die bei einigen wenigen ausgewählten Breiten springen — durch eine responsive Schriftgröße, die bei jeder Breite dazwischen neu berechnet wird.

Die Technik wurde praktikabel, als CSS eine Möglichkeit bekam, „einen gleitenden Wert mit einem Boden und einer Decke” in einer einzigen Deklaration auszudrücken, und sie wird zu einem System, wenn diese Deklaration einmal an der Wurzel angewendet wird, sodass sich die gesamte Schriftgrößenskala gemeinsam bewegt. Beide Varianten werden unten mit echten Zahlen durchgerechnet. Dieser Artikel ist der Ausgangspunkt unseres Leitfadens zur fluiden Typografie.

Welches Problem löst fluide Typografie?

Das Breakpoint-Modell bedient einen kontinuierlichen Bereich von Bildschirmen mit einer Stufenfunktion. Eine Überschrift, die bei 1200px richtig aussieht, ist immer noch dieselbe Größe, die auch bei 900px angezeigt wird, wo sie die schmaleren Spalten überfüllt, und bei 1400px, wo sie das breitere Layout nicht mehr trägt. Zwischen zwei beliebigen Breakpoints driftet das Design von der Breite weg, für die es abgestimmt wurde; mehr Breakpoints verkürzen die Drift, vervielfachen aber die Abstimmungsarbeit — und jede neue Stufe hat ihre eigenen Kanten.

Die anschauliche Version des Problems: Bildschirme sind ein Kontinuum. Geräte kommen in praktisch jeder Breite auf den Markt, von etwa 320px bis hin zu Ultrawide-Monitoren, und ein Kontinuum, das mit Stufen bedient wird, hat immer Kanten — Breiten, an denen der Sprung sichtbar ist, und Strecken, an denen die Größe bloß geduldet wird. Fluide Typografie löst die Kanten auf, indem sie die Größe direkt der Breite folgen lässt: Statt zu fragen „welche meiner drei Größen gilt hier?”, berechnet der Browser die eine Größe, die zu genau dieser Breite gehört.

Wie funktioniert fluide Typografie in CSS?

Die gesamte Technik passt in eine Deklaration mit clamp(), das ein Minimum, einen bevorzugten Wert und ein Maximum entgegennimmt. Der bevorzugte Wert mischt eine Viewport-Einheit (der gleitende Teil) mit einem rem-Term (der Anker, der das Zoomen funktionsfähig hält). Hier ist eine Überschrift, die von 28px bei einem 360px-Viewport auf 38px bei 1280px gleitet:

h2 {
  font-size: clamp(1.75rem, 1.5054rem + 1.087vw, 2.375rem);
}

Die Zahlen sind nicht willkürlich. Der Term 1.087vw ist die Steigung — zehn Pixel Wachstum, verteilt über 920 Pixel Viewport — und 1.5054rem (≈24,09px) ist die Stelle, an der diese Linie die Viewport-Breite null kreuzt. Prüfe es an beiden Enden: Bei 360px ist 1.087vw ≈3,91px, und 24,09 + 3,91 = 28px. Bei 1280px ist 1.087vw ≈13,91px, und 24,09 + 13,91 = 38px. Unterhalb von 360px gilt das Minimum; oberhalb von 1280px gilt das Maximum; dazwischen liegt die Größe immer auf der Linie.

Die Geschichte hinter dieser einen Zeile ist kurz. Viewport-Einheiten machten Anfang der 2010er-Jahre „Größe folgt Bildschirm” möglich, und calc()-Formeln, die vw mit rem mischten, machten es steuerbar. Dass clamp() um 2020 herum in den großen Browsern ausgeliefert wurde, komprimierte das ganze Muster in eine einzige Deklaration.

Was macht aus einer fluiden Größe ein fluides System?

Ein clamp wie das obige für jede Größe einer Skala zu schreiben funktioniert, aber es gibt jeder Größe ihre eigene Steigung — und ein Dutzend unabhängig berechneter Steigungen sind ein Dutzend Gelegenheiten, sich zu widersprechen. Die systematische Variante verschiebt das clamp auf die Wurzel-Schriftgröße und setzt jede andere Größe in rem:

html {
  font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); /* ≈16px @360 → ≈18px @1280 */
}

(Die Grenzen und der Achsenabschnitt sind aus gutem Grund in rem statt in px angegeben: Auf dem Wurzelelement löst rem sich gegen die Browser-Schriftgrößen-Einstellung des Lesers auf, sodass ein in rem angegebenes clamp diese Einstellung respektiert, während ein px-Wert sie stillschweigend überschreibt.)

Weil rem relativ zur Wurzel definiert ist, reitet jetzt jeder rem-basierte Wert im Dokument auf diesem einen clamp. Fließtext bei 1rem gleitet von 16px auf 18px; eine Überschrift bei 2.369rem gleitet von ≈37,9px auf ≈42,6px; nichts sonst im Stylesheet muss sich ändern. So funktioniert der fluide Modus von Scale Composer: Du legst vier Parameter fest — die Basisgröße am kleinen Ende, am großen Ende und die beiden Viewport-Breiten — und eine Steigung trägt das ganze System.

Sieh dir die System-Variante in Bewegung an: öffne eine vollständige Schriftgrößenskala im fluiden Modus und ziehe die Vorschaubreite — jede Ebene der Skala wird aus demselben Wurzel-clamp neu berechnet, während sich der Viewport ändert.

Was ändert fluide Typografie nicht?

Zwei Dinge bleiben unberührt, und beide werden häufig fälschlich als Opfer missverstanden.

Die Proportionen der Skala. Fluide Typografie ändert die gerenderten Pixel, nicht die Verhältnisse. Mit dem obigen Wurzel-clamp wächst jeder rem-Wert um denselben Faktor — 12,5% von einem Ende des Gleitens zum anderen — sodass eine Skala, die auf einem Verhältnis von 1,333 aufbaut, bei 360px, bei 1280px und bei jeder Breite dazwischen immer noch eine 1,333-Skala ist. Die Hierarchie, die du entworfen hast, ist das, was gleitet; sie löst sich nicht auf.

Die Breakpoints des Layouts. Bei fluider Typografie geht es um Text, nicht um Spalten. Ein Layout-Raster ändert die Spaltenanzahl weiterhin in Stufen, weil ein Raster tatsächlich diskret ist — du kannst zwei Spalten haben oder drei, nicht 2,4. Fluide Typografie entfernt die Sprünge aus dem Text, während das Layout seine Breakpoints behält; die beiden Systeme koexistieren, jedes reagiert auf die Breite so, wie es sein eigener Inhalt verlangt.

Fest und fluid auf derselben Skala vergleichen

Der schnellste Weg, den Unterschied zu verinnerlichen, ist, eine Skala beim Wechsel der Modelle zu beobachten: schalte dieselbe Skala zwischen fest und fluid um und ändere dann in jedem Modus die Vorschaubreite. Fest bleiben die Größen unbewegt, bis ein Breakpoint sie retten würde; fluid folgen sie der Breite kontinuierlich. Die Proportionen bewegen sich in keinem der beiden Modi — und genau das ist der Punkt: Fluide Typografie ändert, wann Größen richtig sind (immer, innerhalb des Bereichs), nicht was die Skala ist.