Variable Fonts: wie sie funktionieren und wann sie sich lohnen

Variable Fonts bündeln mehrere Schriftvarianten in einer einzigen Datei. Statt für jede Stärke oder Breite eine eigene Datei einzubinden, stellen Sie die gewünschten Werte innerhalb der verfügbaren Bereiche ein. Das macht sie flexibel, aber nicht automatisch zur besten Lösung für jedes Projekt.

Grundbegriffe wie Schriftfamilie und Schnitt erklärt der Ratgeber Typografie im Web. Hier geht es darum, was variable Schriften gestalterisch können, wie Sie sie einbinden und wann sich der Einsatz lohnt.

Was sind variable Fonts?

Eine herkömmliche Schriftfamilie besteht oft aus mehreren Dateien: eine für den normalen Schnitt, eine für den fetten und weitere für kursive oder schmale Varianten. Jede Datei beschreibt genau eine Gestaltung. Wer Zwischenstufen möchte, braucht zusätzliche Schnitte oder muss mit den vorhandenen Abstufungen auskommen.

Variable Fonts funktionieren anders. Sie können mehrere gestalterische Eigenschaften, sogenannte Achsen, in einer Schriftdatei vereinen. Eine Achse legt fest, wie sich ein Merkmal verändern lässt. Eine Schrift kann zum Beispiel alle Strichstärken zwischen einem leichten und einem kräftigen Schnitt abdecken. Je nach Schrift sind auch Breite, Neigung oder andere Eigenschaften variabel.

„Variabel“ heißt dabei nicht, dass sich jede Schrift beliebig verändern lässt. Die Gestalterinnen und Gestalter einer Schrift legen fest, welche Achsen es gibt und welche Werte sie annehmen können. Eine Schrift kann nur eine Achse enthalten oder mehrere kombinieren. Manche Schriften bieten zusätzlich eigene, nicht standardisierte Achsen.

Wie funktionieren variable Fonts?

In einer variablen Schriftdatei sind die Formen und die Regeln für ihre Veränderung hinterlegt. Daraus wird die gewünschte Variante berechnet. So lassen sich etwa eine mittlere Strichstärke oder eine leicht schmalere Form darstellen, auch wenn diese Kombination nicht als eigene Datei vorliegt.

Die wichtigsten standardisierten Achsen tragen kurze Kennungen:

• wght steuert die Strichstärke, etwa von dünn bis fett.
• wdth verändert die Zeichenbreite.
• ital schaltet auf die kursive Form um.
• slnt steuert die Neigung der Zeichen.
• opsz steht für die optische Größe. Damit kann eine Schrift für kleine und große Darstellungen unterschiedlich ausgearbeitet sein.

Nicht jede Schrift unterstützt alle diese Achsen, und auch die Wertebereiche fallen unterschiedlich aus. Die Gewichtsachse der einen Schrift kann andere Grenzen haben als die einer anderen. Maßgeblich sind deshalb die Angaben zur jeweiligen Schrift, nicht allein die Achsenbezeichnung.

Variable Fonts im Web mit CSS einsetzen

Im Web werden variable Schriften wie andere Webfonts eingebunden. In der CSS-Regel @font-face geben Sie an, welchen Wertebereich die Datei abdeckt. Der Browser wählt die passende Ausprägung dann anhand der üblichen CSS-Eigenschaften.

Ein vereinfachtes Beispiel für einen Bereich bei der Schriftstärke:

@font-face {
  font-family: "Beispielschrift";
  src: url("beispielschrift.woff2") format("woff2");
  font-weight: 300 800;
}

Die Werte sind hier nur ein Beispiel und müssen zum tatsächlich verfügbaren Bereich der Schrift passen. Anschließend verwenden Sie gewohnte Eigenschaften wie font-weight. Für den direkten Zugriff auf einzelne Achsen gibt es außerdem die Eigenschaft font-variation-settings. Setzen Sie sie gezielt ein: Die standardisierten CSS-Eigenschaften sind für die meisten Einstellungen verständlicher und leichter zu pflegen.

Eine Angabe im Stylesheet erweitert die Fähigkeiten der Schrift nicht. Ist eine Achse oder ein Wert nicht in der Datei enthalten, kann CSS ihn nicht nachträglich erzeugen. Prüfen Sie vor dem Einbau deshalb, welche Achsen und Grenzen die Schrift tatsächlich hat.

Die Vorteile variabler Fonts

Weniger Dateien für mehrere Schnitte

Braucht ein Projekt viele Stärken oder Breiten einer Schrift, kann eine variable Datei diese Varianten bündeln. Das vereinfacht die Verwaltung der Schriftdateien und die Einbindung. Ob dadurch auch weniger Daten übertragen werden, hängt von der konkreten Schrift, den genutzten Schnitten und der Einbindung ab. Wie Schriften insgesamt schnell laden, zeigt der Artikel Wie Bilder und Schriften die Ladezeit beeinflussen.

Nutzen Sie nicht automatisch den gesamten Wertebereich, wenn im Design nur wenige Varianten vorkommen. Halten Sie fest, welche Werte tatsächlich gebraucht werden. So bleibt der Einsatz nachvollziehbar und unnötige Komplexität wird vermieden.

Feinere typografische Abstufungen

Mit variablen Werten lassen sich Zwischenstufen zwischen den üblichen Schnitten gestalten. Eine Überschrift kann etwas kräftiger sein als der Fließtext, ohne dass es dafür eine eigens benannte Zwischenstufe braucht. Mit einer variablen Breite nimmt eine Schrift je nach Gestaltung etwas mehr oder weniger Raum ein.

Diese Feinheit hilft, wenn ein Entwurf auf unterschiedliche Bildschirmgrößen reagieren soll. Eine Schrift kann in einem engen Layout schmaler und in einer großzügigen Darstellung breiter laufen. Solche Anpassungen sollten aber der Lesbarkeit und dem Gestaltungssystem dienen und keine technische Spielerei sein. Wie sich Abstände zwischen den Buchstaben dabei feinjustieren lassen, beschreibt der Artikel Kerning und Laufweite.

Einheitliche Gestaltung

Weil alle Abstufungen aus derselben Schriftfamilie stammen, bleiben sie in einem einheitlichen Rahmen. Das erleichtert es, Hierarchien für Fließtext, Zwischenüberschriften und hervorgehobene Elemente aufzubauen. Die Schrift bleibt erkennbar dieselbe, nur einzelne Merkmale ändern sich.

Wann lohnen sich variable Fonts?

Variable Fonts sind besonders interessant, wenn ein Projekt mehrere Schriftstärken, Breiten oder andere Eigenschaften braucht, die die Schrift unterstützt. Das ist etwa bei umfangreichen Websites, responsiven Layouts oder einem Designsystem mit vielen Textrollen der Fall. Auch wer genaue Zwischenwerte braucht, hat mit einer variablen Schrift mehr Spielraum als mit einer Reihe einzelner Standardschnitte.

Voraussetzung ist, dass Schriftdatei und eingesetzte Technik zuverlässig zusammenspielen. Die benötigten Achsen müssen vorhanden sein, und die vorgesehenen Werte müssen im Layout funktionieren. Kontrollieren Sie die Darstellung in den Zielbrowsern und auf verschiedenen Geräten. Wichtig sind außerdem Ersatzschriften für den Fall, dass die variable Schrift nicht geladen wird.

Ein Vorteil entsteht nicht allein dadurch, dass eine Schrift variabel ist. Verwendet eine Website nur einen normalen und einen fetten Schnitt, sind zwei statische Dateien oft einfacher zu verwalten. Auch ein bestehendes Layout, das auf feste Schnitte ausgelegt ist, müssen Sie nicht ohne konkreten Nutzen umstellen.

Wann ist eine statische Schrift die praktischere Wahl?

Eine statische Schrift passt, wenn nur wenige, klar definierte Varianten gebraucht werden oder ein Projekt möglichst einfach aufgebaut sein soll. Jeder Schnitt ist dann eine feste Größe, die sich ohne Achsen einordnen lässt. Für kleine Projekte mit schlichter Typografie reicht das oft aus.

Auch die Arbeitsumgebung spielt eine Rolle. Nicht jede Anwendung bietet denselben Zugriff auf variable Achsen, und die Bedienung unterscheidet sich je nach Programm. Stellt eine Software die benötigten Möglichkeiten nicht zuverlässig bereit, sind feste Schnitte meist leichter zu handhaben.

Worauf Sie beim Einsatz achten sollten

Prüfen Sie zuerst, welche Achsen die Schrift enthält und welche Werte dafür vorgesehen sind. Legen Sie dann fest, welche Werte Ihr Gestaltungssystem braucht. Zu viele frei veränderbare Einstellungen gefährden die typografische Einheitlichkeit.

Achten Sie bei Webprojekten auf eine saubere Einbindung, sinnvolle Ersatzschriften und ein klares Verhalten, falls die Schriftdatei nicht verfügbar ist. Prüfen Sie außerdem, ob die Schrift in den verwendeten Browsern und Programmen korrekt dargestellt wird. Dabei geht es nicht nur um die Technik: Auch die Lesbarkeit in kleinen Größen und bei unterschiedlichen Stärken sollten Sie im konkreten Layout beurteilen. Wie Sie Anführungszeichen, Striche und Leerzeichen sauber setzen, zeigt der Artikel Mikrotypografie im Web.

Beachten Sie zuletzt die Nutzungsbedingungen der Schriftdatei. Was erlaubt ist, hängt von der Schrift und ihrer Lizenz ab. Im Zweifel lesen Sie die Lizenzunterlagen genau oder holen fachkundigen Rat ein.

Fazit

Variable Fonts vereinen mehrere Schriftvarianten und veränderbare Achsen in einer Datei. Sie lohnen sich vor allem dann, wenn ein Projekt die zusätzlichen Abstufungen wirklich nutzt und die eingesetzte Technik sie unterstützt. Für einfache Gestaltungen sind statische Schnitte oft die übersichtlichere Wahl. Entscheidend sind der konkrete Bedarf, die Lesbarkeit und eine sorgfältige Einbindung.