{"id":74796,"date":"2025-12-01T10:22:56","date_gmt":"2025-12-01T09:22:56","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=74796&preview=true&preview_id=74796"},"modified":"2025-12-04T14:41:31","modified_gmt":"2025-12-04T13:41:31","slug":"fliessende-typografie","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/fliessende-typografie\/","title":{"rendered":"Skalierung des Schriftbildes mit flie\u00dfender Typografie"},"content":{"rendered":"

Text auf jedem Bildschirm gut aussehen zu lassen, ist nicht so einfach, wie es klingt. Lange Zeit haben Webdesigner\/innen Media Query Breakpoints verwendet, um die Schriftgr\u00f6\u00dfe zu \u00e4ndern, aber dieser Ansatz wird schnell un\u00fcbersichtlich, wenn immer mehr Ger\u00e4te und Bildschirmgr\u00f6\u00dfen auftauchen.<\/p>\n

Seit WordPress 6.1<\/a> (ver\u00f6ffentlicht im November 2022) gibt es jetzt einen besseren Weg: die flie\u00dfende Typografie. Sie passt die in deiner theme.json<\/code> Datei definierten Schriftgr\u00f6\u00dfen automatisch an, sodass sie unabh\u00e4ngig von der Breite oder H\u00f6he des Bildschirms gleichm\u00e4\u00dfig skaliert werden.<\/p>\n

Diese Funktion \u00e4ndert nicht nur die Schriftgr\u00f6\u00dfe, sondern passt auch die Zeilenh\u00f6he, den Wortabstand und sogar den Leerraum an, damit dein Design auf allen Ger\u00e4ten einheitlich, lesbar und zug\u00e4nglich ist.<\/p>\n

In diesem Artikel erf\u00e4hrst du, wie flie\u00dfende Typografie funktioniert, wie sie sich von herk\u00f6mmlichen Haltepunkten unterscheidet und wie du sie mit theme.json<\/code> und CSS in WordPress implementierst.<\/p>\n

Doch zun\u00e4chst wollen wir uns ansehen, wie wir fr\u00fcher mit Typografie umgegangen sind und warum die flie\u00dfende Typografie eine so gro\u00dfe Verbesserung darstellt.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Breakpoint-Typografie vs. flie\u00dfende Typografie<\/h2>\n

Ein guter Weg, um die flie\u00dfende Typografie zu verstehen, ist ein Vergleich mit ihrem Vorg\u00e4nger, der Breakpoint-Typografie, die Media Queries verwendet, die bestimmte Ger\u00e4tebreiten f\u00fcr die Schriftgr\u00f6\u00dfe vorgeben.<\/p>\n

Breakpoint-Typografie<\/h3>\n

Haltepunkte sind in der Regel bestimmte Bereiche von Viewport-Breiten, die in der Regel in Pixeln angegeben werden. Ein g\u00e4ngiger Ansatz ist es, drei Haupt-Breakpoints zu setzen, die f\u00fcr Mobil-, Laptop- und Desktop-Bildschirme gelten.<\/p>\n

Hier sind typische Breakpoint-Einstellungen f\u00fcr Laptops in einer CSS-Datei<\/a>:<\/p>\n

@media (min-width: 48em) and (max-width: 74.9375em) {\n  body {\n    font-size: 1.125rem;\n    line-height: 1.6;\n  }\n  h1 {\n    font-size: 2rem;\n  }\n}<\/code><\/pre>\n
Das funktioniert zwar, hat aber einen gro\u00dfen Nachteil: Wenn neue Ger\u00e4te und Bildschirmgr\u00f6\u00dfen auftauchen, wird die Verwaltung all dieser Haltepunkte schnell unhaltbar.<\/p>\n
\"Veranschaulicht,
Veranschaulicht, wie Typografie \u00fcber Haltepunkte hinweg gleichm\u00e4\u00dfig skaliert<\/figcaption><\/figure>\n
Im obigen GIF-Beispiel \u00e4ndert sich die Gr\u00f6\u00dfe des Textes in ungleichm\u00e4\u00dfigen Spr\u00fcngen, wenn der Viewport schrumpft. Dieses „stufenweise“ Verhalten f\u00fchrt oft zu einer ung\u00fcnstigen oder unvorhersehbaren Skalierung, was f\u00fcr eine reibungslose, konsistente Typografie nicht ideal ist.<\/p>\n
Flie\u00dfende Typografie<\/h3>\n
Mit der Einf\u00fchrung der CSS clamp()<\/a><\/code> Eigenschaft im Jahr 2019 sowie der Viewport-Einheiten (vw<\/code> und vh<\/code>) wurde eine nahtlose und automatische Skalierung m\u00f6glich.<\/p>\n
Damit kannst du Schriftgr\u00f6\u00dfen definieren, die dynamisch auf Basis der Viewport-Abmessungen skaliert werden, sodass du nicht mehr mehrere Haltepunkte brauchst.<\/p>\n
Hier ist ein Beispiel f\u00fcr eine mittlere Schriftgr\u00f6\u00dfe mit clamp()<\/code>:<\/p>\n
.has-medium-font-size {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);\n}<\/code><\/pre>\n
Wir werden uns die Funktionsweise von clamp()<\/code> sp\u00e4ter genauer ansehen, aber betrachte es zun\u00e4chst als eine Formel, die die minimale, bevorzugte und maximale Schriftgr\u00f6\u00dfe festlegt und daf\u00fcr sorgt, dass der Text auf dem Bildschirm gleichm\u00e4\u00dfig skaliert.<\/p>\n
\"Demonstration
Demonstration einer flie\u00dfenden Typografie<\/figcaption><\/figure>\n
In diesem GIF passt sich der Text flie\u00dfend an, wenn sich das Ansichtsfenster verkleinert. Es gibt keine Spr\u00fcnge oder pl\u00f6tzliche Gr\u00f6\u00dfen\u00e4nderungen.<\/p>\n
Dieses flie\u00dfende Verhalten macht die flie\u00dfende Typografie zu einem gro\u00dfen Fortschritt gegen\u00fcber der Gestaltung mit Haltepunkten. Anstatt den Text schrittweise anzupassen, erm\u00f6glicht sie eine nahtlose Skalierung, die sich auf jedem Ger\u00e4t nat\u00fcrlich anf\u00fchlt.<\/p>\n
Aber die reibungslose Gr\u00f6\u00dfenanpassung ist nur der Anfang. Die flie\u00dfende Typografie bietet noch weitere Vorteile, die es einfacher machen, flexible, konsistente und barrierefreie Designs zu erstellen.<\/p>\n
Das Argument f\u00fcr flie\u00dfende Typografie<\/h2>\n
Wenn du mit flie\u00dfender Typografie arbeitest, werden die folgenden Vorteile deutlich.<\/p>\n
Standardm\u00e4\u00dfig responsiv<\/h3>\n
Der Text skaliert automatisch mit dem Ansichtsfenster, sodass keine Unterbrechungspunkte mehr n\u00f6tig sind. Egal, ob deine Website auf einem Handy, Tablet oder einem extrem breiten Monitor angezeigt wird, die Schriftgr\u00f6\u00dfen passen sich ganz nat\u00fcrlich und ohne zus\u00e4tzliches CSS an.<\/p>\n
Leichter zu pflegen<\/h3>\n
Da du nicht mehrere Media-Queries ben\u00f6tigst, bleibt dein Code einfach und lesbar. Du kannst die Schriftgr\u00f6\u00dfen mit einer einfachen „T-Shirt“-Skala von klein bis extragro\u00df festlegen und sie einheitlich in deinem Theme anwenden.<\/p>\n
Konsistentes Design<\/h3>\n
Stelle sicher, dass deine Schriftgr\u00f6\u00dfen auf der gesamten Website konsistent bleiben, sowohl global als auch innerhalb einzelner Bl\u00f6cke. Lege deine Skala einmal fest, und sie zieht sich nahtlos durch alle Bl\u00f6cke, Muster und Vorlagen.<\/p>\n
Verbesserte Zug\u00e4nglichkeit und Lesbarkeit<\/h3>\n
Da sich die flie\u00dfende Typografie stufenlos skalieren l\u00e4sst, erscheint der Text immer in einer f\u00fcr jedes Ger\u00e4t lesbaren Gr\u00f6\u00dfe. Das macht deine Inhalte leichter zug\u00e4nglich, besonders f\u00fcr Nutzer mit Sehschw\u00e4chen oder benutzerdefinierten Browser-Zoomstufen.<\/p>\n
Zukunftssicheres Design<\/h3>\n
Da die Textgr\u00f6\u00dfe nicht mehr an k\u00fcnstliche Haltepunkte gebunden ist, funktioniert deine Schriftskalierung garantiert mit jeder zuk\u00fcnftigen Bildschirmgr\u00f6\u00dfe und jedem Viewport.<\/p>\n
Kontrolle \u00fcber die Skalierungsgeschwindigkeit<\/h3>\n
Die Geschwindigkeit, mit der der Text w\u00e4chst oder schrumpft, wird durch einen bevorzugten Wert festgelegt, der sich mit der Breite des Ansichtsfensters \u00e4ndert.<\/p>\n
Browser-Unterst\u00fctzung<\/h2>\n
Die Funktion clamp()<\/code> wird von allen modernen Browsern<\/a> gut unterst\u00fctzt, einschlie\u00dflich der aktuellen Versionen von Chrome, Edge, Firefox und Safari.<\/p>\n
Wenn du jedoch eine 100%ige Abdeckung ben\u00f6tigst, solltest du einen Fallback f\u00fcr \u00e4ltere Browser wie Internet Explorer 11 und die Vor-2020-Versionen von Safari und Chrome einbauen.<\/p>\n
So machst du das:<\/p>\n
\/* Fallback (for IE11 and other old browsers) *\/\nli {\n  font-size: 1.25rem; \n}\n\n\/* Preferred (modern browsers) *\/\nli {\n  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);\n}<\/code><\/pre>\n