Variable Fonts

TL;DR

Variable Fonts kombinieren mehrere Schriftschnitte in einer Datei. Statt 5 Fontdateien nur eine – das spart bis zu 70% Dateigröße bei voller typografischer Flexibilität.

Was sind Variable Fonts?

Variable Fonts sind eine Schrifttechnologie, die mehrere Variationen (Gewicht, Breite, Neigung) in einer einzigen Fontdatei vereint. Statt separate Dateien für Regular, Bold, Italic etc. zu laden, stellt eine Variable Font alle Zwischenstufen bereit.

Vorteile von Variable Fonts

• Weniger HTTP-Requests: Eine Datei statt vieler
• Kleinere Gesamtgröße: 50-70% Ersparnis möglich
• Mehr Flexibilität: Stufenlose Gewichte (100-900)
• Bessere Animationen: Smooth transitions zwischen Gewichten

Variationsachsen

Variable Fonts können verschiedene Achsen haben:

• wght (Weight): Strichstärke (100-900)
• wdth (Width): Breite der Buchstaben
• ital (Italic): Neigung
• opsz (Optical Size): Anpassung für verschiedene Größen

Nutzung in CSS

font-weight: 450; – Jeder Wert zwischen 100 und 900 ist möglich, nicht nur 400 oder 700.

Variable Fonts und Nachhaltigkeit

Der Nachhaltigkeitseffekt ist direkt messbar:

• Weniger Dateigröße = weniger Datenübertragung
• Weniger Requests = schnellerer Seitenaufbau
• Eine Ressource = besseres Caching

Beispiele

• Inter Variable
• Source Sans Variable
• Roboto Flex
• Space Grotesk Variable

Fazit

Variable Fonts sind die Zukunft der Web-Typografie. Sie bieten mehr Möglichkeiten bei weniger Ressourcenverbrauch – ein seltener Win-Win.