Variable Fonts – Geschichte und Verwendung

Variable Fonts sind ein 2016 mit OpenType 1.8 eingeführtes Schriftformat, das mehrere Schriftschnitte und -variationen in einer einzigen Datei speichert und es ermöglicht, Schriften kontinuierlich entlang von Design-Achsen (Gewicht, Breite, Neigung) zu variieren.

Rubrik: Grundlagen der Gestaltung · Unterrubrik: Typografie – Schriften · Niveau: Einsteiger Entwickler: Apple, Google, Microsoft, Adobe (Konsortium) · Jahr: 2016 (OpenType-Spec 1.8) · Standard: OpenType Variable Font

Geschichte & Entstehung

Jahrzehntelang galten für Schriften eine einfache Regel: Für jeden Schnitt einer Schriftfamilie (Regular, Bold, Italic, Light, Condensed usw.) brauchte es eine eigene Datei. Eine umfangreiche Schriftfamilie mit zehn Schnitten bedeutete zehn separate Font-Dateien. Im Web-Kontext war das ein erhebliches Performance-Problem: Jede Datei musste geladen werden, was Ladezeiten verlängerte und Nutzer auf langsameren Verbindungen benachteiligte.

Die Idee variabler Schriften ist nicht neu. Schon in den 1980er Jahren hatte Donald Knuth mit Metafont ein System entwickelt, bei dem Schriften durch Parameter beschrieben wurden, die beliebig angepasst werden konnten. Adobe experimentierte in den 1990er Jahren mit Multiple Master Fonts, die zwischen zwei oder mehr Mastern interpolierten. Diese Konzepte scheiterten damals an fehlender Unterstützung in Betriebssystemen und Browsern.

2016 veröffentlichten Apple, Google, Microsoft und Adobe gemeinsam die OpenType-Spezifikation 1.8, die Variable Fonts als Standard einführte. Das Konsortium der größten Tech-Konzerne sicherte die Unterstützung in allen relevanten Plattformen: macOS, Windows, iOS, Android und allen modernen Browsern. Erstmals konnte eine variable Schrift zuverlässig auf allen Endgeräten verwendet werden.

Seit 2016 ist die Unterstützung in Browsern und Betriebssystemen vollständig, und die Anzahl verfügbarer variabler Schriften wächst rapide. Google Fonts hat einen erheblichen Teil seiner Bibliothek auf Variable Fonts umgestellt; Adobe Fonts bietet ebenfalls viele variable Schriften an.

Technische Grundlagen

Variable Fonts speichern nicht fertige Schriftschnitte, sondern parametrisierte Beschreibungen von Schriftformen. Zwischen festgelegten Extremwerten (Master) kann die Schrift kontinuierlich interpoliert werden.

Standard-Designachsen (OpenType-Spezifikation):

Zusätzlich zu den Standard-Achsen können Schriftgestalter eigene Achsen definieren (Custom Axes, 4-Buchstaben-Tag in Großbuchstaben). Beispiele: GRAD (Grade/Textura), YTAS (Y-Position der Ober-Striche), CRSV (Cursive-Charakter).

In CSS werden Variable Fonts über die Eigenschaft font-variation-settings angesteuert: ``css p { font-family: 'Inter', sans-serif; font-variation-settings: 'wght' 450, 'wdth' 90; } ` Einfachere Syntax über font-weight und font-stretch` funktioniert in modernen Browsern direkt für Standard-Achsen.

Formale Merkmale und Möglichkeiten

Variable Fonts eröffnen Gestaltungsmöglichkeiten, die mit statischen Schriften nicht realisierbar sind:

• Präzise Gewichtswahl: Statt nur Regular (400) und Bold (700) kann jede beliebige Stärke zwischen 100 und 900 gewählt werden. Ein Gewicht von 337 ist ebenso möglich wie 621.
• Responsive Typografie: Die Schriftstärke kann per CSS an Viewport-Größe, Leseumgebung oder Nutzerpräferenzen angepasst werden.
• Optische Größen: Die opsz-Achse ermöglicht es, dass die Schrift in kleinen Graden andere Proportionen hat als in großen – eine Praxis, die im Bleisatz selbstverständlich war, im digitalen Zeitalter aber lange verloren gegangen war.
• Animationen: Variable Fonts können per CSS animiert werden. Das Gewicht kann von Light zu Bold fließen; diese Technik wird für Hover-Effekte, Loading-States und Microinteractions eingesetzt.
• Performance: Eine Variable-Font-Datei ersetzt typischerweise 4–8 statische Schnitte, bei einer Gesamtdateigröße, die kleiner oder vergleichbar ist. Das reduziert HTTP-Requests und verbessert Ladezeiten.

Wichtige verfügbare Variable Fonts:

• Inter (Rasmus Andersson) – umfangreiche Variable-Font-Familie, Open Source
• Source Sans 3 (Adobe, Open Source) – Variable-Version der Quellenlos-Familie
• Roboto Flex (Google) – erweiterte variable Version der Standard-Android-Schrift
• Recursive (Arrow Type) – experimentelle Variable-Font mit 5 Achsen

Typische Verwendung

Variable Fonts werden primär im digitalen Kontext eingesetzt, da Print-Software (InDesign, QuarkXPress) die Technologie erst nach und nach unterstützt:

• Web-Typografie: Die Hauptdomäne; nahezu alle modernen Frontend-Frameworks unterstützen Variable Fonts
• App-Design: iOS und Android unterstützen Variable Fonts; App-Designer nutzen sie für Responsive-Typografie
• Digitale Publikationen: EPUB-Reader und Browser-based Publications
• Microinteraktionen: Gewichts-Animationen bei Hover- oder Focus-States
• Responsive Design: Verschiedene Schriftgewichte je nach Viewport (mobile vs. desktop)
• Barrierefreiheit: Benutzereinstellungen (besonders dicke Schrift für sehschwache Nutzer) können über Variable Fonts dynamisch angewandt werden
• Print (wachsend): Adobe InDesign unterstützt Variable Fonts seit Version CC 2019; Nutzung in Print-Workflows nimmt zu

Digitale Verfügbarkeit

• Google Fonts: Großteil der populären Schriften als Variable Fonts verfügbar; kostenlos, OFL-Lizenz
• Adobe Fonts: Umfangreiche Variable-Font-Bibliothek in Creative Cloud
• v-fonts.com: Verzeichnis und Testseite für verfügbare Variable Fonts
• Variable Fonts Guide (MDN): Offizieller Browser-Kompatibilitäts-Guide für Entwickler
• axis-praxis.org: Interaktives Tool zum Experimentieren mit Variable-Font-Achsen

Der browserbasierte Font-Selektor von Google Fonts zeigt Variable Fonts mit Schiebereglern an, was die Zugänglichkeit für Designer ohne CSS-Kenntnisse erleichtert.

Vergleich & Abgrenzung

Variable Fonts vs. Static Fonts: Die klare Grenze liegt in Flexibilität und Performance. Static Fonts sind einfacher zu verstehen und in jedem Kontext nutzbar; Variable Fonts bieten mehr Kontrolle, erfordern aber Kenntnisse über CSS-Syntax und Achsen.

Variable Fonts vs. Multiple Master: Adobe Multiple Master (1990er) war ein früher Vorläufer mit ähnlichen Konzepten, aber ohne plattformübergreifende Unterstützung. OpenType Variable Fonts sind der Nachfolgestandard mit vollständiger Industrie-Unterstützung.

OpenType Variable vs. WOFF2: WOFF2 ist ein Komprimierungsformat für Web-Fonts (ca. 30 % kleiner als WOFF). Variable Fonts können im WOFF2-Format geliefert werden – die optimale Kombination für Web-Performance.

Häufige Fragen (FAQ)

Kann ich Variable Fonts in Adobe InDesign verwenden? Ja, seit InDesign CC 2019 werden Variable Fonts unterstützt. Im Zeichenformate-Dialog erscheint ein Cursor-Symbol bei Variable Fonts, und Achsen können über den Font-Dialog angepasst werden. Die Unterstützung ist solide, aber weniger intuitiv als in modernen Web-Browsern.

Wie überprüfe ich, ob eine Schrift eine Variable Font ist? In Adobe Fonts ist Variable Fonts durch ein „Variabel"-Badge gekennzeichnet. In Google Fonts erscheinen Schieberegler bei der Schriftvorschau. Im CSS-Kontext prüft @supports (font-variation-settings: normal), ob der Browser Variable Fonts unterstützt. Das Tool wakamaifondue.com analysiert eine hochgeladene Schriftdatei und zeigt alle verfügbaren Achsen an.

Verwandte Einträge

• Google Fonts – die größte kostenlose Schriftenbibliothek, zunehmend Variable Fonts
• Schriftlizenzen – wie Variable-Font-Lizenzen sich von Standard-Lizenzen unterscheiden
• Georgia – Klassiker der Screen-Typografie als historischer Kontext

Weiterführend

• Lupton, E. (2010). Thinking with Type (2. Aufl.). New York: Princeton Architectural Press, S. 84–87
• Bellamy-Royds, A., Weiler, N. & Muntes-Mulero, M. (2017). Variable Fonts on the Web. MDN Web Docs [Online-Ressource]
• OpenType Specification 1.8 (2016). Microsoft / Adobe / Apple / Google [Technische Spezifikation]
• Smashing Magazine. (2019). Introduction to Variable Fonts on the Web. Smashing Magazine [Online-Artikel]