Variable Fonts sind ein 2016 eingeführtes OpenType-1.8-Dateiformat, das durch kontinuierliche Designachsen (Gewicht, Breite, Neigung u. v. m.) eine theoretisch unbegrenzte Zahl von Schriftvariationen innerhalb einer einzigen Schriftdatei ermöglicht – ein Paradigmenwechsel in der Geschichte der digitalen Typografie.
Rubrik: Grundlagen der Gestaltung · Unterrubrik: Typografie – Schriftengeschichte · Niveau: Fortgeschritten Synonyme / Auch bekannt als: OpenType Variable Fonts, OpenType Font Variations, Font Variations (CSS), vf-Schriften
Was sind Variable Fonts?
Variable Fonts lösen das Prinzip der statischen Schriftfamilien ab: Statt vieler separater Dateien (Regular, Bold, Light, Italic …) enthält eine einzige Variable-Font-Datei mathematisch interpolierbare Achsen, auf denen sich jeder Zwischenwert abbilden lässt. Designer und Entwickler können damit auf einer Gewichtsachse jeden Wert zwischen 100 und 900 stufenlos ansteuern – ohne mehrere Dateien laden zu müssen. Das reduziert Dateigrößen im Web erheblich und eröffnet neue gestalterische Freiheiten.
Erklärung
Vorgeschichte: Multiple Master und GX-Fonts
Die Idee, Schriftvariationen interpolierend zu erzeugen, ist älter als der Variable-Fonts-Standard. Adobe entwickelte in den späten 1980er Jahren das Multiple Master-Format (MM), das ebenfalls Designachsen kannte. Bekannte Multiple-Master-Schriften wie Myriad MM und Minion MM erlaubten Anpassungen in Gewicht und Breite. Das Format scheiterte jedoch an zu hoher Komplexität für Endnutzer und mangelnder Software-Unterstützung; Adobe stellte Multiple Master 1999 ein.
Parallel entwickelte Apple das TrueType GX Variations-Format (1991), das in macOS bereits Variationsachsen kannte, aber außerhalb des Apple-Ökosystems keine Verbreitung fand.
Die Geburt des OpenType-1.8-Standards (2016)
Am 14. September 2016 präsentierten Apple, Google, Microsoft und Adobe auf der ATypI-Konferenz in Warschau gemeinsam den OpenType Font Variations-Standard (Teil von OpenType 1.8). Dies war ein historisch einmaliger Moment: Vier Konkurrenten, die sich auf einen gemeinsamen offenen Standard einigten.
Schlüsselfiguren dieser Entwicklung waren:
- John Hudson (Tiro Typeworks): Einer der führenden Köpfe hinter dem technischen Konzept; Hudson verfasste maßgebliche Teile der Spezifikation und gilt als einer der intellektuellen Väter des Standards.
- Tal Leming (Type Supply): Bedeutender Mitentwickler des Formats und Schöpfer zahlreicher Variable-Font-Werkzeuge; er prägte die Design-Tool-Landschaft erheblich.
- Erik van Blokland (LettError): Niederländischer Typograf und einer der erfahrensten Kenner des Interpolations-Prinzips; entwickelte gemeinsam mit Just van Rossum bereits in den 1990ern experimentelle „RandomFont"-Konzepte (LettError FF Beowulf, 1990).
- Just van Rossum: Mitbegründer von LettError, Programmierer und Typograf; van Rossums Hintergrund in der Programmierung floss in frühe Überlegungen zu computergestützter Schriftvariation ein.
- Petr van Blokland: Weiterer niederländischer Typograf aus dem LettError-Umfeld mit einflussreichen theoretischen Beiträgen zu Design-Systemdenken in der Typografie.
- Adam Twardoch: Schriftexperte und OpenType-Spezialist, der die technischen Brücken zwischen den Plattformen baute.
Registrierte Achsen und benutzerdefinierte Achsen
Der Standard definiert fünf registrierte (standardisierte) Achsen:
- wght (Weight): Gewicht von dünn bis schwarz
- wdth (Width): Breite von schmal bis erweitert
- ital (Italic): Umschalten auf Kursiv-Design
- slnt (Slant): Neigungswinkel
- opsz (Optical Size): Optische Größenanpassung
Darüber hinaus können Schriftgestalter beliebige eigene Achsen definieren: z. B. „GRAD" für Schriftstärke ohne Metrikänderung, „YTAS" für die Höhe von Oberlängen oder spielerische Achsen wie „WONK" (Monotype Lexend) oder „INFM" (Informal).
Frühe Variable Fonts und Meilensteine
Die ersten veröffentlichten Variable Fonts 2016/17 stammten von Google Fonts: Amstelvar (David Berlow, Font Bureau) gilt als Paradebeispiel für ein vollständig ausgearbeitetes variables Schriftsystem mit optischer Größenanpassung. Decovar (David Berlow, 2017) demonstrierte spektakulär die dekorativen Möglichkeiten durch 15 variable Achsen.
2018 begann Google Fonts systematisch, sein gesamtes Repertoire auf Variable Fonts umzustellen. Seither sind über 2.000 variable Schriften im Google-Fonts-Katalog verfügbar. Roboto Flex (2022, Font Bureau/Google) gilt als bislang vollständigstes variables Schrift-System mit 12 registrierten und eigenen Achsen.
Einfluss auf Webentwicklung und Design-Tools
Die CSS-Spezifikation übernahm Variable Fonts in CSS Fonts Level 4 (W3C), wodurch Webentwickler mit font-variation-settings beliebige Achsenwerte steuern können. Browser-Unterstützung ist seit Chrome 66, Firefox 62 und Safari 11 (2018) vollständig gegeben.
Figma, Adobe XD und später Adobe Illustrator integrierten Variable-Font-Unterstützung in ihre Design-Werkzeuge; in Figma sind seit 2022 alle Achsen eines Variable Fonts über einen visuellen Schieberegler zugänglich.
Beispiele
- Roboto Flex (Google/Font Bureau, 2022) – mit 12 Achsen das bislang umfangreichste frei verfügbare Variable Font; Grundlage von Googles Material You Design-System.
- IBM Plex Variable – IBMs eigene Hausschriftfamilie ist als vollständig variables Set verfügbar und wird auf allen IBM-Plattformen eingesetzt.
- Recursive (Arrow Type, 2020) – ein Google-Fonts-Projekt, das die Grenzen des Variable-Font-Formats mit einer „MONO"-Achse auslotet, die zwischen Monospace und Proportionalschrift wechselt.
- Vulf Mono (OH no Type, 2019) – ein Cultfont aus der Independent-Szene, der mit einer Slant-Achse Kursivität simuliert und zeigt, dass Variable Fonts auch für kleinere Studios erschwinglich umsetzbar sind.
- Amstelvar (David Berlow, 2017) – der erste technisch vollständig ausgearbeitete Variable Font für Google Fonts; mit opsz-Achse für optische Größenanpassung, gilt er als Referenzimplementierung des Standards.
In der Praxis
Wann einsetzen? Variable Fonts empfehlen sich immer dann, wenn eine Schriftfamilie mit mehreren Schnitten benötigt wird – also fast immer in professionellen Projekten. Für Webprojekte reduzieren sie Ladezeiten erheblich (eine Variable-Font-Datei statt 4–8 statischer Dateien). In Animation und Responsive Design eröffnen sie gestalterische Möglichkeiten, die mit statischen Schriften nicht erreichbar sind.
Tools:
- Wakamai Fondue (wakamaifondue.com): Analysiert Variable Fonts und zeigt alle Achsen.
- Axis Praxis (axis-praxis.org): Interaktiver Browser zum Erkunden von Variable-Font-Achsen.
- Font Gauntlet (fontgauntlet.com): Echtzeit-Test von Variable Fonts in unterschiedlichen Kontexten.
- Google Fonts (fonts.google.com): Über 2.000 kostenlose Variable Fonts.
- Adobe Fonts: Umfangreiche Variable-Font-Sammlung für Creative-Cloud-Abonnenten.
Lizenzkosten: Viele Variable Fonts sind unter SIL Open Font License (OFL) kostenlos; kommerzielle Variable Fonts wie Aktiv Grotesk Variable (Dalton Maag) oder neue Versionen von Schriften wie Neue Haas Grotesk Variable kosten je nach Lizenz 200–1.500 €.
Vergleich & Abgrenzung
| Eigenschaft | Variable Fonts | Statische Schriften | Multiple Master (Adobe) |
|---|---|---|---|
| Standard | OpenType 1.8 (2016) | OpenType/TrueType | Proprietär Adobe (eingestellt) |
| Dateien | Eine Datei | Viele Dateien | Mehrere MM-Dateien |
| Achsen | Unbegrenzt | Keine | Begrenzt (2–4) |
| Browser-Support | Vollständig ab 2018 | Vollständig | Nicht vorhanden |
| Tool-Unterstützung | Figma, Illustrator, CSS | Überall | Veraltet |
Variable Fonts ersetzen technisch die früheren Multiple-Master-Schriften, sind aber offener, standardisierter und besser in moderne Design- und Entwicklungsworkflows integriert. Im Vergleich zu statischen Schriften bieten sie mehr Flexibilität ohne Mehrkosten bei der Dateianzahl.
Häufige Fragen (FAQ)
Was war der entscheidende Durchbruch für Variable Fonts? Der entscheidende Moment war die gemeinsame Ankündigung von Apple, Google, Microsoft und Adobe auf der ATypI-Konferenz am 14. September 2016 in Warschau. Vier konkurrierende Technologieunternehmen einigten sich auf einen gemeinsamen offenen Standard – etwas, das in der Schriftindustrie historisch einmalig war. Ohne diese Kooperation hätten proprietäre Insellösungen wie in den 1990er Jahren (Apple GX, Adobe Multiple Master) die Verbreitung verhindert.
Worin unterscheiden sich Variable Fonts von normalen Schriftfamilien? Eine normale Schriftfamilie besteht aus einzelnen statischen Dateien pro Schnitt (Light, Regular, Bold, Italic usw.). Ein Variable Font enthält alle diese Schnitte als mathematisch interpolierbare Zustände innerhalb einer einzigen Datei. Zusätzlich können Variable Fonts Zwischenwerte erzeugen, die in keiner statischen Schrift existieren – z. B. ein Gewicht von 327 auf einer Skala von 100–900.
Weiterführend
- Berlow, David (2016): „Introducing OpenType Variable Fonts." Vortrag auf der ATypI-Konferenz, Warschau, 14. September 2016.
- Hudson, John (2016): OpenType Font Variations Overview. Microsoft Typography Blog. Verfügbar unter:
- Penney, Laurence (2017): „Axis Praxis: An Introduction to Variable Fonts." Smashing Magazine, 24. Oktober 2017.
- Rutter, Richard (2017): Web Typography. Freiburg: dpunkt.verlag (dt. Ausgabe 2018).
- W3C (2021): CSS Fonts Module Level 4. W3C Working Draft.
- Google Fonts Knowledge (2022): Variable fonts guide.
