Variable Fonts praktisch einsetzen: eine Schriftdatei für alle Schnitte

1. Was Variable Fonts wirklich sind

Ein Variable Font ist eine einzige Schriftdatei, die einen kompletten Gestaltungsraum aus Achsen enthält, statt für jeden Schnitt eine eigene Datei zu benötigen. Wo früher Regular, Medium, Bold, Light und Italic als fünf separate Dateien geladen wurden, liefert ein Variable Font denselben Umfang, oft sogar deutlich mehr Zwischenwerte, in einer Datei, die meist kleiner ist als zwei oder drei statische Schnitte zusammen. Das Format basiert auf der OpenType-Font-Variations-Spezifikation und wird von allen aktuellen Browsern nativ unterstützt.

Der entscheidende Unterschied zu klassischen Webfonts liegt in der Kontinuität. Ein statischer Schnitt kennt nur Bold oder Regular, ein Variable Font kennt jeden Wert dazwischen, zum Beispiel Gewicht 550 oder 612. Diese Flexibilität eröffnet Design-Optionen, die vorher schlicht nicht existierten, etwa eine Überschrift, die beim Scrollen sanft von dünn zu fett überblendet, ohne dass der Browser eine zweite Datei nachladen muss. Für Teams, die Typografie als Designsystem denken, sind Variable Fonts deshalb kein Nischenfeature, sondern die konsequente Fortführung dessen, was CSS mit font-weight ohnehin schon andeutete.

In der Praxis bedeutet das: Statt fünf @font-face-Blöcke mit je einer .woff2-Datei bindet man eine einzige Datei ein und steuert alle Zwischenwerte per CSS. Das reduziert HTTP-Requests, vereinfacht das Caching und macht Design-Iterationen günstiger, weil kein neuer Schnitt mehr nachgeladen werden muss, wenn ein Designer ein Gewicht von 600 statt 700 möchte.

2. Achsen verstehen: wght, wdth, slnt, ital, opsz

Jeder Variable Font definiert einen eigenen Satz an Achsen, aber fünf registrierte Achsen sind über die OpenType-Spezifikation standardisiert und tauchen am häufigsten auf. wght steuert das Gewicht analog zu font-weight, typischerweise im Bereich 100 bis 900. wdth steuert die Laufweite von schmal bis breit in Prozent der Normalbreite. slnt steuert die Neigung in Grad für eine echte Schrägstellung ohne künstliche Schräge, ital schaltet zwischen aufrecht und kursiv um, meist als binärer Wert 0 oder 1. opsz steuert die optische Größe und passt Strichstärke und Proportionen automatisch an die verwendete Schriftgröße an.

Diese registrierten Achsen sind in Kleinbuchstaben notiert, weil Kleinbuchstaben-Tags für standardisierte Achsen reserviert sind. Ein Schriftdesigner kann zusätzlich beliebige eigene Achsen definieren, die dann in Großbuchstaben geschrieben werden, etwa GRAD für optische Korrektur oder markenspezifische Achsen wie SERF für den Anteil an Serifen. Nicht jeder Variable Font unterstützt alle fünf registrierten Achsen, viele beschränken sich auf wght allein oder auf die Kombination aus wght und ital.

Der Wertebereich jeder Achse ist im Font selbst hinterlegt und lässt sich mit dem CSS-Font-Inspektor moderner Entwicklertools direkt ablesen. Wer außerhalb des unterstützten Bereichs einen Wert setzt, riskiert, dass der Browser den nächstgelegenen gültigen Wert clamped, was zu unerwarteten Ergebnissen führen kann, wenn man den Bereich vorher nicht geprüft hat.

/* Register the variable font with its supported axis ranges */
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;   /* supported wght range */
  font-stretch: 75% 125%; /* maps to wdth axis */
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter Variable", system-ui, sans-serif;
}

/* Standard axes can be set via ordinary properties */
h1 {
  font-weight: 650;      /* fractional weight, not possible with static fonts */
  font-stretch: 105%;
}

Ein praktischer Nebeneffekt der Achsen-basierten Architektur ist, dass sich ein einziger Variable Font gleichzeitig für Fließtext, Überschriften und UI-Elemente eignet, wo früher drei getrennte Schriftfamilien mit unterschiedlichem Lizenzmodell nötig waren.

3. font-variation-settings versus registrierte Eigenschaften

Für die fünf registrierten Achsen sollte man wo immer möglich die normalen CSS-Eigenschaften nutzen, also font-weight für wght, font-stretch für wdth, font-style: oblique Ng für slnt und font-style: italic für ital. Diese Eigenschaften existieren bereits lange in CSS, sind gut dokumentiert und funktionieren auch dann sinnvoll, wenn der Browser keine Variable Fonts unterstützt, weil sie auf statische Schnitte zurückfallen.

Die generische Eigenschaft font-variation-settings braucht man vor allem für Custom Axes, die keine registrierte CSS-Property besitzen, oder wenn man mehrere Achsen gleichzeitig in einer einzigen Deklaration setzen möchte. Die Syntax verlangt eine kommagetrennte Liste aus Vier-Buchstaben-Tags in Anführungszeichen und dem zugehörigen Zahlenwert. Wichtig: font-variation-settings überschreibt registrierte Kurzformen nicht automatisch synchron, wenn beide gleichzeitig im selben Selektor auf dieselbe Achse zielen, kann es zu Konflikten kommen, die schwer zu debuggen sind.

/* Prefer standard properties for registered axes */
.button {
  font-weight: 550;
}

/* font-variation-settings needed for combining multiple axes at once,
   or for custom axes without a dedicated CSS property */
.headline-hover {
  font-variation-settings: "wght" 700, "wdth" 110, "GRAD" 40;
  transition: font-variation-settings 0.3s ease;
}

.headline-hover:hover {
  font-variation-settings: "wght" 850, "wdth" 100, "GRAD" 0;
}

4. Named Instances und robuste Fallbacks

Schriftdesigner definieren häufig sogenannte Named Instances, also feste, kuratierte Kombinationen von Achsenwerten mit eigenem Namen, zum Beispiel "SemiBold Condensed" als Kombination aus einem bestimmten wght- und wdth-Wert. Diese Named Instances lassen sich über @font-face mit dem Deskriptor font-named-instance ansprechen, was in Betriebssystemen und manchen Anwendungen als eigener Font in der Auswahlliste erscheint. Für die Websitesteuerung per CSS ist es meist einfacher, die zugrunde liegenden Achsenwerte direkt zu setzen, statt sich auf Named Instances zu verlassen, da deren Unterstützung inkonsistenter ist.

Ein robuster Fallback-Stack bleibt trotzdem Pflicht. Fällt das Laden des Variable Font aus irgendeinem Grund aus, etwa wegen eines Netzwerkfehlers oder eines veralteten Browsers, muss die font-family-Deklaration eine sinnvolle Systemschrift als zweiten Wert enthalten. Zusätzlich sollte man mit @supports (font-variation-settings: normal) prüfen, ob der Browser variable Achsen überhaupt unterstützt, bevor man aufwendige Interpolationen einsetzt, die auf älteren Browsern zu statischen, aber funktionalen Ergebnissen zurückfallen sollen.

5. Performance: eine Datei statt zehn Schnitte

Der Performance-Vorteil von Variable Fonts zeigt sich am deutlichsten, wenn eine Website mehrere Schnitte gleichzeitig nutzt, etwa Regular, Bold und Italic für Fließtext sowie ein separates Display-Gewicht für Überschriften. Statt vier separate .woff2-Dateien mit jeweils eigenem HTTP-Request lädt der Browser eine einzige Datei, die alle vier Zustände abdeckt. Auch wenn diese eine Datei größer ist als ein einzelner statischer Schnitt, ist sie in Summe fast immer kleiner als die Summe aller benötigten statischen Schnitte, weil Glyphen-Daten zwischen den Zuständen geteilt und interpoliert statt dupliziert werden.

Ein zweiter, oft unterschätzter Vorteil ist das Caching-Verhalten. Eine einzige Font-Datei wird einmal geladen und danach für jede Gewichtsvariation im Browser-Cache wiederverwendet, ohne dass für neue Zwischenwerte ein neuer Request nötig wird. Für internationale Projekte mit Subsetting lohnt sich außerdem ein Blick auf unicode-range, um nur die tatsächlich benötigten Zeichensätze zu laden, auch bei Variable Fonts bleibt Subsetting ein wirksames Werkzeug gegen unnötig große Dateien.

/* Subsetting still matters for variable fonts */
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/InterVariable-subset-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
  font-display: swap;
}

/* Preload the single variable font file for the critical path */

Ergänzend gehört ein <link rel="preload"> für den kritischen Variable Font in den Dokumentkopf, damit der Browser die Datei parallel zum HTML lädt, statt erst nach dem Parsen des CSS auf sie zu stoßen. In Kombination mit font-display: swap verhindert das sichtbaren Layout-Shift, während die Schrift noch nachlädt.

Für Content-Management-Systeme mit vielen Templates lohnt sich zusätzlich ein zentrales CSS-Custom-Property für die Fontdatei-URL, damit ein Wechsel des Variable Font an einer einzigen Stelle im Theme erfolgt und nicht in dutzenden Templates einzeln nachgezogen werden muss. Das reduziert Wartungsaufwand und verhindert, dass veraltete Font-Referenzen in vergessenen Templates zurückbleiben.

6. Variable Fonts animieren

Da Achsenwerte kontinuierliche Zahlen sind, lassen sich Variable Fonts flüssig animieren, etwa bei Hover-Zuständen, beim Scrollen oder als Ladeanimation. Moderne Browser interpolieren font-variation-settings als animierbare Eigenschaft, sodass ein Übergang von Gewicht 400 zu Gewicht 700 nicht abrupt, sondern als weiche Bewegung durch alle Zwischenwerte gerendert wird. Für Performance-kritische Fälle empfiehlt sich, die Animation auf wenige Achsen zu beschränken, da jede Änderung ein Reflow des Layouts auslösen kann, wenn sich Zeichenbreiten durch wdth oder wght verschieben.

Eine bewährte Technik ist die Kopplung von Scrollposition und Schriftgewicht über CSS Scroll-Driven Animations oder, als robusterer Fallback, per IntersectionObserver in JavaScript, der eine CSS Custom Property aktualisiert. So kann eine Landingpage-Überschrift beim Einblenden von dünn zu kräftig überblenden, ohne dass dafür mehrere Bilder oder SVGs nötig wären, das gesamte Effekt bleibt reines Text-Rendering mit voller Zugänglichkeit für Screenreader.

/* Animate weight smoothly on hover */
.card-title {
  font-weight: 450;
  transition: font-weight 0.25s ease-out;
}

.card:hover .card-title {
  font-weight: 700;
}

/* Reduced motion users get an instant, non-animated change */
@media (prefers-reduced-motion: reduce) {
  .card-title {
    transition: none;
  }
}

7. Optical Sizing automatisch koppeln

Die opsz-Achse ist eine der unterschätztesten Funktionen von Variable Fonts, weil sie ein Problem löst, das Designer früher manuell mit separaten Display- und Text-Schnitten lösen mussten. Kleine Schriftgrade brauchen dickere Striche und größere Punzen, damit sie bei niedriger Auflösung lesbar bleiben, während große Überschriften feinere, elegantere Proportionen vertragen. Ohne optische Größenanpassung sieht ein und derselbe Schnitt bei 12px zu dünn und bei 72px zu klobig aus.

Viele Browser koppeln opsz automatisch an font-size, wenn der Font dies unterstützt und keine explizite font-variation-settings-Deklaration die Kopplung überschreibt. Für volle Kontrolle kann man opsz auch manuell an eine Custom Property binden, die man mit calc() aus der aktuellen Schriftgröße ableitet, was besonders bei fluid typografischen Skalen mit clamp() nützlich ist, da sich Strichstärke und Größe dann synchron mit derselben Formel bewegen.

8. Eigene Custom Axes nutzen

Neben den fünf registrierten Achsen definieren manche Schriftfamilien eigene Custom Axes, erkennbar an Großbuchstaben-Tags wie GRAD für Grade, eine feine optische Korrektur des Gewichts ohne Änderung der Zeichenbreite, praktisch für Dark-Mode-Anpassungen, bei denen helle Schrift auf dunklem Grund optisch dünner wirkt als dunkle Schrift auf hellem Grund. Manche Foundries bieten außerdem Achsen für Kontrast, x-Höhe oder sogar den Grad an Rundung der Buchstabenformen an.

Diese Custom Axes lassen sich ausschließlich über font-variation-settings ansteuern, da CSS keine registrierten Kurzformen dafür kennt. Wichtig für die Praxis: Welche Custom Axes ein Variable Font unterstützt und in welchem Wertebereich, steht nicht in der CSS-Spezifikation, sondern muss aus der Font-Dokumentation der jeweiligen Foundry oder direkt aus der Fontdatei mit Tools wie Wakamai Fondue ausgelesen werden.

/* Custom axis GRAD for optical correction in dark mode */
.dark body {
  font-variation-settings: "wght" 400, "GRAD" -25;
}

body {
  font-variation-settings: "wght" 400, "GRAD" 0;
}

Für die tägliche Arbeit mit Custom Axes lohnt sich außerdem ein Blick in die Entwicklertools moderner Browser, da Chrome und Firefox mittlerweile einen eigenen Font-Inspektor mitbringen, der jede Achse eines geladenen Variable Font samt Wertebereich als interaktiven Schieberegler anzeigt. Das erleichtert die Abstimmung zwischen Entwicklung und Design erheblich, weil Designwerte direkt im Browser ausprobiert und danach in CSS übertragen werden können, ohne den Umweg über eine separate Font-Editor-Software.

9. Typische Fehler und Browser-Support im Vergleich

Der häufigste Fehler ist, font-variation-settings für registrierte Achsen zu nutzen, obwohl die dedizierte Eigenschaft wie font-weight vorhanden und semantisch klarer wäre. Ein zweiter Fehler ist das Fehlen des Bereichsdeskriptors in @font-face, wodurch der Browser nur den Default-Wert kennt statt der tatsächlich unterstützten Spannweite, was font-weight-Zwischenwerte unwirksam macht. Ein dritter Fehler ist fehlendes Subsetting bei mehrsprachigen Projekten, wodurch Nutzer unnötig große Dateien laden, obwohl sie nur lateinische Zeichen benötigen.

Der Browser-Support für Variable Fonts ist seit mehreren Jahren in allen aktuellen Versionen von Chrome, Firefox, Safari und Edge gegeben, sowohl auf Desktop als auch mobil. Fehlende Unterstützung existiert praktisch nur in sehr alten Browserversionen, für die ein statischer Fallback-Schnitt in der font-family-Kette ausreicht. Die eigentliche Herausforderung liegt daher nicht im Support, sondern in der korrekten Nutzung der Achsen und der sorgfältigen Performance-Optimierung.

10. Zusammenfassung

Variable Fonts lösen ein Grundproblem der Web-Typografie: statt für jeden Schnitt eine eigene Datei zu laden, liefert eine einzige Datei den gesamten Gestaltungsraum aus Gewicht, Breite, Neigung und optischer Größe. Registrierte Achsen wie wght und wdth sollten über die passenden CSS-Kurzformen gesetzt werden, font-variation-settings bleibt für Custom Axes und kombinierte Deklarationen reserviert. Ein sauberer Bereichsdeskriptor in @font-face, Subsetting per unicode-range und ein solider Fallback-Stack machen den Einsatz produktionsreif.

Der größte gestalterische Gewinn liegt in der Kontinuität: Animationen, responsive Gewichtsanpassungen und optische Größenkopplung werden mit Variable Fonts zu reinem CSS, ohne dass zusätzliche Bilder, SVGs oder JavaScript-Bibliotheken nötig wären. Wer bereits mehrere statische Schnitte einer Familie einbindet, spart mit dem Wechsel zu einem Variable Font in aller Regel sowohl Ladezeit als auch Wartungsaufwand.

11. FAQ: Variable Fonts praktisch einsetzen