Skalierung des Schriftbildes mit fließender Typografie

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öße zu ändern, aber dieser Ansatz wird schnell unübersichtlich, wenn immer mehr Geräte und Bildschirmgrößen auftauchen.

Seit WordPress 6.1 (veröffentlicht im November 2022) gibt es jetzt einen besseren Weg: die fließende Typografie. Sie passt die in deiner theme.json Datei definierten Schriftgrößen automatisch an, sodass sie unabhängig von der Breite oder Höhe des Bildschirms gleichmäßig skaliert werden.

Diese Funktion ändert nicht nur die Schriftgröße, sondern passt auch die Zeilenhöhe, den Wortabstand und sogar den Leerraum an, damit dein Design auf allen Geräten einheitlich, lesbar und zugänglich ist.

In diesem Artikel erfährst du, wie fließende Typografie funktioniert, wie sie sich von herkömmlichen Haltepunkten unterscheidet und wie du sie mit theme.json und CSS in WordPress implementierst.

Doch zunächst wollen wir uns ansehen, wie wir früher mit Typografie umgegangen sind und warum die fließende Typografie eine so große Verbesserung darstellt.

Breakpoint-Typografie vs. fließende Typografie

Ein guter Weg, um die fließende Typografie zu verstehen, ist ein Vergleich mit ihrem Vorgänger, der Breakpoint-Typografie, die Media Queries verwendet, die bestimmte Gerätebreiten für die Schriftgröße vorgeben.

Breakpoint-Typografie

Haltepunkte sind in der Regel bestimmte Bereiche von Viewport-Breiten, die in der Regel in Pixeln angegeben werden. Ein gängiger Ansatz ist es, drei Haupt-Breakpoints zu setzen, die für Mobil-, Laptop- und Desktop-Bildschirme gelten.

Hier sind typische Breakpoint-Einstellungen für Laptops in einer CSS-Datei:

@media (min-width: 48em) and (max-width: 74.9375em) {
  body {
    font-size: 1.125rem;
    line-height: 1.6;
  }
  h1 {
    font-size: 2rem;
  }
}

Das funktioniert zwar, hat aber einen großen Nachteil: Wenn neue Geräte und Bildschirmgrößen auftauchen, wird die Verwaltung all dieser Haltepunkte schnell unhaltbar.

Im obigen GIF-Beispiel ändert sich die Größe des Textes in ungleichmäßigen Sprüngen, wenn der Viewport schrumpft. Dieses „stufenweise“ Verhalten führt oft zu einer ungünstigen oder unvorhersehbaren Skalierung, was für eine reibungslose, konsistente Typografie nicht ideal ist.

Fließende Typografie

Mit der Einführung der CSS clamp() Eigenschaft im Jahr 2019 sowie der Viewport-Einheiten (vw und vh) wurde eine nahtlose und automatische Skalierung möglich.

Damit kannst du Schriftgrößen definieren, die dynamisch auf Basis der Viewport-Abmessungen skaliert werden, sodass du nicht mehr mehrere Haltepunkte brauchst.

Hier ist ein Beispiel für eine mittlere Schriftgröße mit clamp():

.has-medium-font-size {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

Wir werden uns die Funktionsweise von clamp() später genauer ansehen, aber betrachte es zunächst als eine Formel, die die minimale, bevorzugte und maximale Schriftgröße festlegt und dafür sorgt, dass der Text auf dem Bildschirm gleichmäßig skaliert.

In diesem GIF passt sich der Text fließend an, wenn sich das Ansichtsfenster verkleinert. Es gibt keine Sprünge oder plötzliche Größenänderungen.

Dieses fließende Verhalten macht die fließende Typografie zu einem großen Fortschritt gegenüber der Gestaltung mit Haltepunkten. Anstatt den Text schrittweise anzupassen, ermöglicht sie eine nahtlose Skalierung, die sich auf jedem Gerät natürlich anfühlt.

Aber die reibungslose Größenanpassung ist nur der Anfang. Die fließende Typografie bietet noch weitere Vorteile, die es einfacher machen, flexible, konsistente und barrierefreie Designs zu erstellen.

Das Argument für fließende Typografie

Wenn du mit fließender Typografie arbeitest, werden die folgenden Vorteile deutlich.

Standardmäßig responsiv

Der Text skaliert automatisch mit dem Ansichtsfenster, sodass keine Unterbrechungspunkte mehr nötig sind. Egal, ob deine Website auf einem Handy, Tablet oder einem extrem breiten Monitor angezeigt wird, die Schriftgrößen passen sich ganz natürlich und ohne zusätzliches CSS an.

Leichter zu pflegen

Da du nicht mehrere Media-Queries benötigst, bleibt dein Code einfach und lesbar. Du kannst die Schriftgrößen mit einer einfachen „T-Shirt“-Skala von klein bis extragroß festlegen und sie einheitlich in deinem Theme anwenden.

Konsistentes Design

Stelle sicher, dass deine Schriftgrößen auf der gesamten Website konsistent bleiben, sowohl global als auch innerhalb einzelner Blöcke. Lege deine Skala einmal fest, und sie zieht sich nahtlos durch alle Blöcke, Muster und Vorlagen.

Verbesserte Zugänglichkeit und Lesbarkeit

Da sich die fließende Typografie stufenlos skalieren lässt, erscheint der Text immer in einer für jedes Gerät lesbaren Größe. Das macht deine Inhalte leichter zugänglich, besonders für Nutzer mit Sehschwächen oder benutzerdefinierten Browser-Zoomstufen.

Zukunftssicheres Design

Da die Textgröße nicht mehr an künstliche Haltepunkte gebunden ist, funktioniert deine Schriftskalierung garantiert mit jeder zukünftigen Bildschirmgröße und jedem Viewport.

Kontrolle über die Skalierungsgeschwindigkeit

Die Geschwindigkeit, mit der der Text wächst oder schrumpft, wird durch einen bevorzugten Wert festgelegt, der sich mit der Breite des Ansichtsfensters ändert.

Browser-Unterstützung

Die Funktion clamp() wird von allen modernen Browsern gut unterstützt, einschließlich der aktuellen Versionen von Chrome, Edge, Firefox und Safari.

Wenn du jedoch eine 100%ige Abdeckung benötigst, solltest du einen Fallback für ältere Browser wie Internet Explorer 11 und die Vor-2020-Versionen von Safari und Chrome einbauen.

So machst du das:

/* Fallback (for IE11 and other old browsers) */
li {
  font-size: 1.25rem; 
}

/* Preferred (modern browsers) */
li {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

Wie funktioniert fließende Typografie?

Das Herzstück der fließenden Typografie sind drei Einstellungen: Mindestgröße, Maximalgröße und eine bevorzugte Größe, die auf einer gleitenden Skala zwischen dem Mindest- und dem Maximalwert liegt und durch die Breite des Viewports bestimmt wird.

Die Funktion clamp() verwendet diese drei Werte in einer einzigen Deklaration:

font-size: clamp(min, preferred, max);

Dadurch wird sichergestellt, dass der Text auf kleinen Bildschirmen nicht zu klein und auf breiten Bildschirmen nicht zu groß wird. Ein Beispiel:

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

In diesem Beispiel beginnt die Schriftgröße bei 1 cm, wächst gleichmäßig, wenn sich der Bildschirmausschnitt vergrößert, und hört bei 1,25 cm auf.

Wie WordPress das macht

WordPress nimmt dir die schwere Arbeit ab. Anstatt diese Werte manuell zu berechnen, kannst du deine Schriftgrößen direkt in theme.json festlegen.

Hier ist ein vereinfachtes Beispiel dafür, wie WordPress eine Schriftgröße in JSON darstellt:

{
  "fluid": {
    "min": "1rem",
    "max": "1.25rem"
  },
  "name": "Medium",
  "size": "1.125rem",
  "slug": "medium"
}

Daraus generiert WordPress automatisch das CSS:

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

Das macht die Implementierung von fließender Typografie schnell, konsistent und fehlerfrei. Du musst deine Werte nur einmal in theme.json definieren und WordPress kümmert sich um die Berechnung.

Allgemeine Begriffe

Bevor wir weitermachen, wollen wir noch einmal auf einige wichtige Einheiten eingehen, die in der fluiden Typografie verwendet werden. Jede Einheit skaliert relativ zu einer anderen.

Ein paar Worte zu theme.json

theme.json ist datengesteuert, d.h. sie generiert CSS automatisch und muss nicht manuell geschrieben werden.

Wie nicht anders zu erwarten, enthält der WordPress-Kern eine theme.json-Datei, in der die Basiseigenschaften festgelegt sind, die von der eigenen theme.json-Datei eines Blockthemes verwendet werden. Dies ist der Fall, wenn WordPress die fließende Typografie implementiert.

Wie praktisch alle Stileigenschaften können auch diese global oder für jeden Block mit einem Child-Theme geändert werden, was wir für alle Anpassungen empfehlen.

Wenn du dich mit theme.json nicht auskennst, solltest du unbedingt unseren Artikel „Arbeiten mit Eigenschaften und Schlüssel-Wert-Paaren in theme.json“ lesen

Wie WordPress fließende Typografie in TT5 (Twenty Twenty Five) verwendet

Wenn die Datei theme.json eines Block-Themes die Einstellung "fluid": true enthält, generiert WordPress mit der CSS-Funktion clamp() automatisch Regeln für fließende Typografie. Dies geschieht durch einen eingebauten Algorithmus, der eine gleichmäßige Skalierung für jede Schriftgröße berechnet.

{
  "settings": {
    "typography": {
      "fluid": true
    }
  }
}

Wenn "fluid" weggelassen wird, verwendet WordPress die Standardeinstellung false, d. h. die Textgrößen bleiben fest und werden nicht fließend skaliert.

Wenn die fließende Typografie aktiviert ist, definiert TT5 fünf voreingestellte Schriftgrößen. Jede davon enthält Mindest- und Höchstwerte, die WordPress verwendet, um das endgültige CSS mit der Funktion clamp() zu generieren.

Praktische Beispiele

Nachdem wir nun wissen, wie TT5 standardmäßig mit fließender Schrift umgeht, wollen wir uns nun ein paar reale Szenarien ansehen, in denen du sie vielleicht anpassen oder erweitern möchtest.

Für diese Beispiele verwenden wir ein TT5 Child-Theme und stellen wie immer sicher, dass deine Skripte richtig in die Warteschlange gestellt werden.

Erhöhe alle Schriftgrößen um 25 %

Wenn deine Zielgruppe größere Texte bevorzugt (z. B. auf barrierefreien oder seniorenfreundlichen Websites), solltest du alle Schriftgrößen global erhöhen.

Option 1 – Verwendung der theme.json

Es gibt zwar keinen einzigen Schalter, um alle Schriftarten zu skalieren, aber du kannst jede Schriftgröße manuell um 25 % erhöhen. Hier ist eine Beispielkonfiguration:

"typography": {
  "fontSizes": [
    {
      "fluid": false,
      "name": "Small",
      "size": "1.09375rem",
      "slug": "small"
    },
    {
      "fluid": { "max": "1.40625rem", "min": "1.25rem" },
      "name": "Medium",
      "size": "1.25rem",
      "slug": "medium"
    },
    {
      "fluid": { "max": "1.71875rem", "min": "1.40625rem" },
      "name": "Large",
      "size": "1.725rem",
      "slug": "large"
    },
    {
      "fluid": { "max": "2.5rem", "min": "2.1875rem" },
      "name": "Extra Large",
      "size": "2.1875rem",
      "slug": "x-large"
    },
    {
      "fluid": { "max": "3.75rem", "min": "2.6875rem" },
      "name": "Extra Extra Large",
      "size": "2.6875rem",
      "slug": "xx-large"
    }
  ]
}

Diese folgt dem Muster von TT5: Die kleine Größe bleibt fest, während die anderen Größen stufenlos skaliert werden.

Hinter den Kulissen berechnet WordPress immer noch den bevorzugten (fließenden) Wert zwischen jedem Minimum und Maximum.

Option 2 – Mit style.css

Alternativ kannst du alles mit einer einzigen Zeile in deinem Stylesheet global skalieren:

:root {
  font-size: 125%;
}

Dadurch wird die Grundschriftgröße um 25 % erhöht und alle Elemente, die rem verwenden, werden effektiv skaliert.

Benutzerdefinierte fließende Schrift für einen einzelnen Block

Du kannst die fließende Größenanpassung auch selektiv anwenden.

Wenn du z. B. möchtest, dass alle Listenelemente (core/list) die mittlere Größe anstelle der Standardgröße Large verwenden, füge Folgendes zu deinem theme.json hinzu:

"styles": {
  "blocks": {
    "core/list": {
      "typography": {
        "fontSize": "var:preset|font-size|medium"
      }
    }
  }
}

Das Ergebnis ist eine übersichtlichere Hierarchie, in der Listenelemente etwas kleiner dargestellt werden als Absätze.

Einstellen der fließenden Typografie in style.css

Wenn du mit einem klassischen Theme arbeitest, definierst du deine eigenen clamp() Werte direkt in style.css.

So kannst du zum Beispiel Listenelemente um 125 % der großen Schriftgröße vergrößern:

li {
  font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}

Dadurch wird eine größere Schriftgröße für Listenelemente angezeigt, die in der CSS-Datei festgelegt wurde. Wie zu erwarten, musst du, wenn du mit einem klassischen Theme arbeitest, die Eigenschaft clamp() in deiner styles.css Datei verwenden.

Fließende Abstände

Die Schriftart ist nur ein Faktor, den du bei der Verwendung von fließender Typografie berücksichtigen musst.

Auch die Abmessungen von Auffüllungen, Rändern und Blockabständen (der Platz innerhalb eines Gruppenblocks) lassen sich mit denselben Konzepten wie bei der fließenden Schrift reibungslos skalieren.

TT5 verwendet diese Einstellungen, um die Größe der Abstände festzulegen.

"spacing": {
  "defaultSpacingSizes": false,
  "spacingSizes": [
    { "name": "Tiny", "size": "10px", "slug": "20" },
    { "name": "X-Small", "size": "20px", "slug": "30" },
    { "name": "Small", "size": "30px", "slug": "40" },
    { "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
    { "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
    { "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
    { "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
  ]
}

Die ersten drei Größen (tiny, x-small, small) sind fest, während die größeren Größen mit clamp() fließend skaliert werden.

So wird sichergestellt, dass sich nicht nur dein Text, sondern auch die Abstände im Layout elegant an verschiedene Bildschirmgrößen anpassen.

Zusammenfassung

Breakpoint und fließende Typografie dienen unterschiedlichen Zwecken. Wenn sie zusammen verwendet werden, schaffen sie zukunftsfähige Layouts, die sich reibungslos über verschiedene Bildschirme hinweg skalieren lassen und so eine konsistente und lesbare Darstellung für alle ermöglichen.

Wenn du die Berechnungen nicht von Hand machen möchtest, können dir verschiedene kostenlose Tools helfen, deine Werte abzustimmen und zu visualisieren:

• Moderner Fluid Typography Editor
• Fluid Typography Calculator

Mit diesen Tools kannst du ganz einfach clamp() Werte generieren, die mit deinem Designmaßstab übereinstimmen, was besonders für die Entwicklung klassischer Designs nützlich ist.

Bereit für die Produktion? Hoste deine WordPress-Website auf Kinsta und erhalte schnelles TTFB, ein integriertes CDN und Edge-Caching, damit deine fließende Schrift überall gut aussieht (und lädt). Der erste Monat ist kostenlos.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.