denkwerk TechTalk
Fluid Typography – Wie wir Schrift für alle Bildschirmgrößen optimieren
Schrift auf jeder Bildschirmgröße optimal darstellen, geht das? Mit CSS war das bislang schwierig. Doch dank CSS-Math-Funktionen und dem neuen container-query-unit ist die sogenannte fluide Typografie aber inzwischen kein Problem mehr. Wir erklären, wie es funktioniert.
Moderne Websites müssen responsiv sein, um auf möglichst vielen Endgeräten optimal auszusehen. Mit der Fähigkeit, sich an verschiedene Bildschirmgrößen anzupassen, entsteht jedoch ein weiteres Problem: Der enthaltene Text muss ebenfalls auf allen Bildschirmgrößen gut lesbar sein. Die beiden denkwerk Webentwickler Tobias Sindek und Arco Mul zeigten im Rahmen ihres Tech-Talks Möglichkeiten auf, wie bei der Typografie einer Website optimale Ergebnisse erzielt werden können: Die sogenannte Fluid Typography hilft in vielen Fällen, eine Website deutlich einfacher für alle Bildschirmgrößen zu optimieren.
Schriften stoßen bei Viewports an ihre Grenzen
Die klassische Art und Weise, Text für responsive Websites anzupassen, ist die: über Breakpoints mit media-queries. Ein erster Ansatz von Fluid Typography geht schon über den Viewport, also die Breite des Bildschirms in Pixeln. Dazu können Web-Entwickler nach wie vor gut mit dem Viewport-Width-Unit arbeiten, in dem verschiedene Bildschirmbreiten und zugehörige Schriftgrößen definiert werden: Wird der Bildschirm oder das Browser-Fenster größer oder kleiner, schaltet die Schrift ab einem gewissen Punkt in eine andere Größe um. Das klappt allerdings nur auf einfach gestalteten Websites und kommt bei verschachtelten Elementen und der Vielzahl aktueller Geräte und Bildschirmgrößen schnell an seine Grenzen. Denn es gibt nicht mehr nur Desktop, Tablet und Mobile.
Bessere Produkte erstellen: Fluid Typography hilft bei multidimensionalen Websites
„Allein das iPhone hat drei Darstellungsarten: Browser, In-App-Browser und Preview“, erläutert Tobias. Der Entwickler weist darauf hin, dass dadurch die große Anzahl verschiedener Viewport-Größen existiert: Vom winzigen Smartwatch-Display über die Vielzahl der Smartphone- und Tablet-Größen bis hin zu Desktop-Monitoren im Vollbild gibt es im Grunde nichts mehr, was es nicht gibt. Hinzu kommen Extras wie Light- und Dark-Mode.
„Wir haben Viewports und multidimensionale Websites. Das ist keine klare Sache mit vier, fünf Breakpoints mehr, auf die wir schauen müssen. Nein: Es ändert sich viel – und Fluid Typography kann dabei helfen, ein besseres Produkt zu schaffen.“
Scott Kellum hat im Bereich fluider Typografie geforscht und sogar ein Patent, auf dessen Basis er auch seinen Dienst Typetura gegründet hat. Kellum ging die Schwierigkeiten an, die die zahllosen Bildschirmgrößen in der Webentwicklung verursachen, und kam zu dem Schluss: Der optimale Viewport existiert nicht.
Wo vermeidet man CSS-Unit Viewport Width am besten?
Tobias zeigte, dass der Ansatz mit Viewports deshalb nicht immer funktioniert: Wenn Elemente in einer Sidebar angezeigt werden sollen, sollte sich die Schriftgröße nicht an der Viewport-Größe orientieren, sondern eher an der Sidebar-Größe. Also Layouts wie in einer Zeitung, wo sich die Schriftgröße an die Größe und Wichtigkeit des Elements anpasst, sind mit Viewport-Width-Units schwer zu erreichen.
Neue Methode: Container-Query-Unit
Für komplexe Layouts gibt es eine Lösung: Unser Entwickler Arco Mul demonstrierte im Tech-Talk eine neue Methode für die Erstellung responsiver Seiten mit fluider Typografie: Das Container-Query-Unit. Container-Querys erlauben die Anwendung von Styles auf Basis der Größe ihres Containers, wodurch die Elemente mit der Größe der Darstellung auf dem Bildschirm flexibel schrumpfen oder wachsen. Dadurch können Schriftgrößen und -verhältnisse bereits zuverlässig auf beliebigen Bildschirmgrößen korrekt dargestellt werden. Ein perfektes Ergebnis ist aber auch hier nicht unbedingt möglich: „Cqi (Container Query Inline-Sizes) wachsen immer linear, daher ist man immer limitiert“, sagt Arco. Das ist nicht immer erwünscht.
Fluid Typography-Beispiele
Container-Query
h2 {
font-size: clamp(1.2rem, 4cqi + 1.2rem, 3.157)
}
h3 {
font-size: clamp(1rem, 4cqi + 1rem, 2.369)
}
Viewport
h1 {
font-size: clamp(1rem, 4vw + 1rem, 3.157)
}
CSS-Animationen als Workaround
Arco empfiehlt in Anlehnung an die Arbeiten von Kellum den Einsatz von fluider Typografie mit zusätzlichen CSS-Animationen: Durch Interpolation kann eine weitgehend optimale Darstellung von Texten erreicht werden. Das bedeutet, dass statt eines linearen Wachstums eine Bezierkurve verwendet wird, bei der die Schrift im kleinen und großen Bereich langsam und im mittleren Bereich schnell skaliert.
Testing trotz Flexibilität und einfacher CSS-Entwicklung beibehalten
Mit Fluid Typography ist es möglich, Websites im Layout klassischer Zeitungen zu erstellen, mit vielen unterschiedlichen Kästen, die zueinander skalieren müssen, um auf allen Viewports ein harmonisches Bild zu ergeben. Dazu zeigte Arco eine Beispiel-Website von Scott Kellum bei codepen.io, die genau diese Kriterien erfüllt – und dabei wirklich modern und ausgereift aussieht.
Fluid Typography ist „superflexibel“, so Arco. Und tatsächlich sorgt die Methode für einfachere CSS-Entwicklung in der Vielzahl der möglichen Viewports. Gleichzeitig kann sie Extremfälle – wie etwa die Apple Watch – abdecken. Einzig auf die Accessibility sollten Entwickler achten – und ihre Websites auf möglichst vielen Bildschirmgrößen testen.
Im Zusammenspiel mit einem modernen Designsystem und Design Tokens können mit Fluid Typography hochwertige, homogene Produkte erstellt werden, die leicht erweiterbar sind. Passende Librarys für die Fluid Typography bietet Kellum über seinen Dienst Typetura an.
