Variable Fonts (variable Schriften) sind ein OpenType-Schriftformat, das alle Schriftschnitte – von dünn bis fett, von schmal bis breit – in einer einzigen Datei speichert und stufenlose Anpassung entlang definierter Achsen ermöglicht.
Rubrik: Grundlagen der Gestaltung · Unterrubrik: Typografie · Niveau: Fortgeschritten Synonyme / Auch bekannt als: OpenType Variable Fonts, Variable Typefaces, dynamische Schriften
Was sind Variable Fonts?
Variable Fonts sind eine moderne Weiterentwicklung des OpenType-Schriftformats, eingeführt 2016 durch eine gemeinsame Initiative von Apple, Google, Microsoft und Adobe. Statt für jeden Schriftschnitt (Regular, Bold, Light, Italic usw.) eine separate Datei zu laden, enthält eine einzige Variable Font-Datei das gesamte Spektrum. Designer können Gewicht, Breite, Neigung und weitere Parameter stufenlos anpassen – also nicht nur „Bold" oder „Regular", sondern jeden beliebigen Zwischenwert. Das revolutioniert besonders die Web-Typografie, da weniger Dateien geladen werden müssen.
Erklärung
Das Grundprinzip von Variable Fonts basiert auf sogenannten Achsen (Axes). Jede Achse beschreibt eine gestaltliche Dimension der Schrift. Die häufigsten registrierten Achsen sind:
- wght (Weight): Schriftgewicht – von hauchdünn (100) bis extrafett (900)
- wdth (Width): Breite – von kondensiert bis extrabreit
- ital (Italic): Kursivstellung – 0 (aufrecht) bis 1 (kursiv)
- slnt (Slant): Schräglage ohne echten Kursivschnitt
- opsz (Optical Size): Automatische Anpassung der Schrift an die Darstellungsgröße
Hersteller können darüber hinaus eigene Custom Axes definieren, z. B. für optische Strichstärke oder spezifische Designmerkmale.
Technischer Hintergrund: Variable Fonts nutzen OpenType 1.8-Technologie. Die Schrift enthält mathematische Interpolation zwischen Extremwerten (sogenannte Master). Wählt man Wert 450 für das Gewicht, interpoliert die Engine automatisch zwischen dem Light- und dem Regular-Master. Das ermöglicht feine Abstimmung auf unterschiedliche Bildschirmgrößen, Kontrastverhältnisse und Ausgabemedien.
Vorteile:
- Eine Datei statt vieler Schnitt-Dateien (Performancegewinn im Web)
- Stufenlose Typografie-Kontrolle
- Responsive Typografie: Schrift passt sich dynamisch an Viewport oder Nutzereinstellungen an
- Spannende animierte Typografie-Effekte per CSS
Nachteile:
- Nicht alle Schriften sind als Variable Font verfügbar
- Ältere Software (z. B. ältere InDesign-Versionen) unterstützt Variable Fonts nicht vollständig
- Die Dateigröße einer Variable Font ist größer als die einer einzelnen Schnitt-Datei, aber kleiner als mehrere Schnitt-Dateien zusammen
Beispiele
- Inter Variable: Beliebte Sans-Serif-Schrift für Interfaces; als Variable Font auf Google Fonts verfügbar, von zahlreichen Designsystemen (u. a. Figma selbst) genutzt.
- Recursive: Open-Source-Variable Font mit einer eigenen „Casual"-Achse; ermöglicht Übergang von monospaced Codedarstellung zu kursiver Display-Typografie.
- Amstelvar: Referenzimplementierung des opsz-Achsenkonzepts; zeigt, wie Schrift automatisch für kleine Größen dicker und für große Größen feiner wird.
- Roboto Flex: Googles bekannte Interface-Schrift als Variable Font; bietet über 12 Achsen, darunter Grade und optische Größe.
- Fraunces: Dekorative Variable Font mit einer „Wonk"-Achse, die Buchstabenformen zwischen sachlich und verspielt interpoliert – ein Beispiel für kreative Custom Axes.
In der Praxis
Im Web werden Variable Fonts per CSS mit der Eigenschaft font-variation-settings gesteuert. Moderne Browser unterstützen Variable Fonts vollständig. In Figma lassen sich Variable Fonts über das Schrift-Panel anpassen, sofern das Plugin „Variable Font Previewer" oder natives Support aktiviert ist. Adobe InDesign (ab CC 2019) zeigt Variable Fonts mit einem speziellen Icon und erlaubt Achsen-Einstellung direkt im Zeichenpalette. Beim Kauf oder der Nutzung über Google Fonts und Adobe Fonts ist darauf zu achten, ob die Schrift tatsächlich als Variable Font angeboten wird – das ist nicht immer der Fall.
Vergleich & Abgrenzung
Variable Fonts sind nicht dasselbe wie Multiple Master-Schriften (ein älteres Format von Adobe). Multiple Master wurde Ende der 1990er Jahre eingestellt; Variable Fonts sind das moderne, browserkompatible Nachfolgeformat. Gegenüber klassischen OpenType-Schriften mit festen Schnitten bieten Variable Fonts mehr Flexibilität, aber auch mehr Komplexität in der Handhabung.
Häufige Fragen (FAQ)
Werden Variable Fonts von allen Browsern unterstützt? Ja – alle modernen Browser (Chrome, Firefox, Safari, Edge) unterstützen Variable Fonts vollständig. Ältere Browser (IE 11 und darunter) tun dies nicht; für diese Fälle sollte eine Fallback-Lösung mit statischen Fonts bereitgestellt werden.
Macht es Sinn, Variable Fonts auch im Print-Design einzusetzen? Ja, aber die Vorteile sind kleiner als im Web. Im Print profitiert man von der feinen Gewichtsabstimmung für verschiedene Papiertypen und Druckverfahren. In Adobe InDesign und Illustrator lassen sich die Achsen direkt einstellen. Der Hauptvorteil – Dateigrößenersparnis – ist im Print weniger relevant.
Verwandte Einträge
Weiterführend
- Rhatigan, D. & Slimbach, R. (2021): Variable Fonts – A Web Typography Revolution. Adobe Blog.
- Bigelow, C. (2019): OpenType Variable Fonts – Technical Overview. Microsoft Typography.
- Google Fonts: Variable Fonts Guide. fonts.google.com/knowledge/usingtype/usingvariable_fonts.
