Fluid Typography lässt Schriftgrößen stufenlos mit der Breite des Viewports wachsen, statt sie an festen Breakpoints umzuschalten. Mike Riethmuller grenzte das 2016 im Smashing Magazine so ab: responsive heißt in Stufen, fluid heißt stufenlos. Heute setzt man das meist mit der CSS-Funktion clamp() um.
- Fluid Typography
Schriftgrößen, die stufenlos mit der Breite des Viewports wachsen, meist zwischen einem Minimum und einem Maximum.
Beispiel: „Dank Fluid Typography wächst die Überschrift vom Smartphone bis zum großen Monitor ohne Sprünge.“Auch: fluide Typografie, Fluid Type, responsive Schriftgrößen.
Abgrenzung zu Media Queries: Sie schalten an Breakpoints um.
Fluid Typography mit clamp()
Die Funktion clamp() nimmt drei Werte: ein Minimum, einen bevorzugten Wert und ein Maximum. Der bevorzugte Wert kombiniert meist rem und vw, so wächst die Schrift mit dem Viewport, bleibt aber zwischen den Grenzen. clamp() läuft seit 2020 in allen großen Browsern.
h1 {
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}
Woher Fluid Typography kommt
Trent Walton schrieb schon 2012 über Fluid Type und sah in vw-Einheiten die Zukunft. Mike Riethmuller veröffentlichte 2015 eine Formel mit calc() und vw, die zwischen zwei Pixelwerten genau skaliert; Tim Brown nannte das Prinzip 2016 CSS Locks. Wer den Begriff zuerst geprägt hat, ist nicht eindeutig belegt.
Fluid Typography und Zoom
Reine vw-Werte wachsen beim Zoomen nicht mit. Die WCAG-Technik F94 wertet das als Verstoß gegen Kriterium 1.4.4, das eine Vergrößerung auf 200 Prozent verlangt. MDN rät deshalb, Minimum und Maximum in rem anzugeben und das Maximum mindestens doppelt so groß wie das Minimum zu wählen.