Klassische Webfonts brauchen pro Schnitt eine eigene Datei. Variable Fonts bündeln alle Gewichte und Breiten in einer einzigen Datei – oft kleiner als zwei statische Schnitte zusammen. Für Design Systeme sind Variable Fonts ein Paradigmenwechsel: Sie ermöglichen typografische Präzision, die mit statischen Fonts nicht erreichbar wäre, bei gleichzeitig besserer Performance.
Das Prinzip
Ein Variable Font enthält nicht einzelne, fest definierte Schriftschnitte, sondern ein kontinuierliches Spektrum typografischer Variationen. Statt separate Dateien für Regular (400), Medium (500), Semibold (600) und Bold (700) zu laden, deckt eine einzige Datei den gesamten Bereich ab. Die sogenannten Designachsen – Weight (wght), Width (wdth), Italic (ital), Slant (slnt) und Optical Size (opsz) – lassen sich stufenlos über CSS steuern.
Für Design Systeme ist das besonders relevant: Typografische Hierarchien lassen sich feiner abstufen, ohne zusätzliche Dateien laden zu müssen. Ein Heading mit font-weight: 630 ist ebenso möglich wie eine Micro-Anpassung der Breite für verschiedene Sprachversionen.
Die fünf registrierten Achsen
Der OpenType-Standard definiert fünf registrierte Achsen, die von allen Browsern unterstützt werden:
Weight (wght) kontrolliert die Strichstärke von Thin (100) bis Black (900) – und theoretisch darüber hinaus. Im Gegensatz zu statischen Fonts ist der Wert nicht auf die neun definierten Stufen beschränkt, sondern frei wählbar.
Width (wdth) kontrolliert die Laufweite der Buchstaben. Werte unter 100 % ergeben Condensed-Varianten, über 100 % Extended-Varianten. Besonders nützlich für responsive Typografie, wo Headlines auf kleinen Viewports schmaler werden können, ohne die Schriftgröße zu reduzieren.
Italic (ital) schaltet zwischen aufrechter und kursiver Variante um. Anders als font-style: italic kann dies bei Variable Fonts zu echten kursiven Formen führen statt zu einer bloßen Schrägstellung.
Slant (slnt) kontrolliert die Neigung der Buchstaben unabhängig von der Kursiv-Achse. Werte von 0 bis -20 Grad sind typisch.
Optical Size (opsz) passt die Zeichnung der Buchstaben an die Darstellungsgröße an. Kleine optische Größen haben offenere Formen und stärkere Striche für bessere Lesbarkeit, große optische Größen zeigen feinere Details.
Darüber hinaus können Foundries Custom-Achsen definieren – etwa für Serifen-Kontrast, Rundungen oder dekorative Elemente. Inter bietet beispielsweise eine Custom-Achse für optische Größenanpassung.
Performance-Vorteile
Der Performance-Gewinn ist signifikant. Eine typische Website lädt vier bis sechs Schriftschnitte – das bedeutet vier bis sechs HTTP-Requests und 150–300 KB Transfervolumen. Ein Variable Font reduziert das auf einen Request und typischerweise 80–120 KB für den gleichen Funktionsumfang. Kombiniert mit Font-Subsetting lassen sich die Dateigrößen weiter reduzieren.
In Core Web Vitals schlägt sich das messbar nieder: Weniger Requests bedeuten schnelleres First Contentful Paint (FCP), und die reduzierten Font-Swaps verbessern den Cumulative Layout Shift (CLS).
CSS-Steuerung
Variable Fonts werden über CSS Custom Properties und die @font-face-Deklaration mit font-weight-Range gesteuert:
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}Die Achsen können über die font-variation-settings-Property oder über die entsprechenden CSS-Properties (font-weight, font-stretch, font-style) angesprochen werden. Für registrierte Achsen ist die CSS-Property-Methode vorzuziehen, da sie besser mit CSS-Transitions und Animationen zusammenarbeitet.
Integration in Design Tokens
Variable-Font-Achsen lassen sich direkt in einer Token-Architektur abbilden. Statt einzelner Token-Werte für vorgegebene Gewichte können Tokens die gesamte Achse referenzieren und benannte Instanzen als Semantic Tokens definieren:
{
"font": {
"weight": {
"light": { "$value": 300, "$type": "fontWeight" },
"regular": { "$value": 400, "$type": "fontWeight" },
"medium": { "$value": 500, "$type": "fontWeight" },
"semibold": { "$value": 600, "$type": "fontWeight" },
"bold": { "$value": 700, "$type": "fontWeight" },
"heading": { "$value": 650, "$type": "fontWeight" }
}
}
}Der Token font.weight.heading mit dem Wert 650 wäre mit statischen Fonts nicht darstellbar – er liegt zwischen Semibold (600) und Bold (700). Variable Fonts ermöglichen diese Präzision, und die Token-Architektur macht sie systematisch nutzbar.
Animationen und Micro-Interactions
Ein oft übersehener Vorteil: Variable-Font-Achsen lassen sich mit CSS-Transitions animieren. Hover-Effekte, die das Gewicht eines Navigationslinks von 400 auf 600 interpolieren, oder Scroll-basierte Gewichtsänderungen in Headlines sind technisch trivial und performant, da der Browser die Interpolation nativ berechnet – ohne zusätzliche Font-Dateien zu laden.
Vergleich: Statische Fonts vs. Variable Fonts
Kernpunkte
- Variable Fonts bündeln alle Schriftschnitte in einer einzigen Datei und reduzieren HTTP-Requests und Transfervolumen erheblich.
- Fünf registrierte Achsen (Weight, Width, Italic, Slant, Optical Size) ermöglichen stufenlose typografische Kontrolle über CSS.
- Typografische Variationen lassen sich stufenlos steuern – feinere Hierarchien ohne zusätzliche Assets.
- Variable-Font-Achsen lassen sich als Design Tokens abbilden und ermöglichen konsistente Steuerung über Plattformen hinweg.
- CSS-Transitionen auf Font-Achsen ermöglichen performante Micro-Interactions ohne zusätzliche Font-Downloads.
- Browser-Support liegt bei über 96 % – alle modernen Browser unterstützen das Format vollständig.
- Kombiniert mit Subsetting und Self-Hosting ergeben Variable Fonts die performanteste und souveränste Font-Strategie.
