Variable Fonts: Technologie & Geschichte

Variable Fonts (OpenType Variable Fonts) sind Schriftdateien nach dem OpenType-1.8-Standard, die es erlauben, typografische Eigenschaften wie Gewicht, Breite oder Neigung stufenlos über kontinuierliche Achsen zu variieren – statt fester Einzelschnitte.

Rubrik: Grundlagen Gestaltung · Unterrubrik: Typografie Schriften · Niveau: Fortgeschritten

Was sind Variable Fonts?

Herkömmliche Schriftfamilien bestehen aus mehreren separaten Dateien: eine für Regular, eine für Bold, eine für Italic usw. Wer zehn Schnitte einer Schrift benötigt, muss zehn Dateien laden. Variable Fonts ändern das grundlegend: Eine einzige Schriftdatei enthält alle Schnitte einer Familie – und ermöglicht stufenlose Interpolation zwischen ihnen.

Statt der festen Gewichtssprünge 400 → 700 kann der Designer jeden Wert von 100 bis 900 wählen. Statt „Condensed" oder „Normal" kann er die Breite auf einen beliebigen Grad zwischen beiden Extremen setzen. Diese Flexibilität eröffnet neue Möglichkeiten für Responsive Typography (automatische Anpassung an Bildschirmgrößen), für animierte Schrifttransformationen und für die drastische Reduktion von Ladezeiten im Web.

Erklärung

Technologischer Ursprung

Die Grundidee variabler Schriften ist nicht neu. Bereits Donald Knuth beschrieb in den 1970er Jahren mit seiner Metafont-Sprache (1979) ein System, bei dem Schriften durch parametrische Formeln beschrieben wurden – eine Art mathematische Variable-Font-Vorläuferin. Metafont blieb auf den TeX-Kontext beschränkt und fand keinen breiten Einsatz in der Schriftbranche.

Multiple Master (Adobe, 1991) war der erste kommerzielle Ansatz variabler Schriften: Schriften hatten „Master"-Instanzen für extreme Werte (z. B. sehr leicht und sehr schwer), und Software interpolierte zwischen ihnen. Multiple Master war technisch interessant, aber zu komplex für den durchschnittlichen Nutzer und wurde 1999 von Adobe eingestellt.

Der entscheidende Durchbruch kam 2016:

OpenType Variable Fonts (2016)

Am 16. September 2016 kündigten Apple, Google, Microsoft und Adobe gemeinsam die Erweiterung des OpenType-Standards auf Version 1.8 an – mit Unterstützung für Variable Fonts. Dies war ein historisch seltenes Ereignis: vier direkte Konkurrenten einigten sich auf einen gemeinsamen Standard.

Das technische Fundament war die GX Variations-Technologie (Apple), die OpenType jetzt nativ integrierte. Die Achsen sind im Format wght (Gewicht), wdth (Breite), ital (Kursiv), slnt (Neigung) standardisiert; Schriftgestalter können zusätzlich eigene Custom-Achsen definieren.

Achsensystem

Registrierte (standardisierte) Achsen:

• wght (Weight, 1–1000): Gewichtsverlauf von Ultra Light bis Ultra Black
• wdth (Width, 1–∞): Breitenverlauf von Compressed bis Extended
• ital (Italic, 0–1): Wechsel von Upright zu Kursiv
• slnt (Slant): Neigungswinkel ohne Stilwechsel
• opsz (Optical Size): Automatische Anpassung der Formdetails an den Schriftgrad

Custom-Achsen: Schriftdesigner können beliebige eigene Achsen definieren. Bekannte Beispiele:

• GRAD (Grade): Stärkevariation ohne Metrikänderung
• XOPQ, YOPQ (parametrische Strich-Stärken)
• Spielerische Achsen wie „Cursive", „Casual" in Schriften wie Roboto Flex

Wichtige frühe Variable Fonts

Amstelvar (David Berlow, 2017): Eine der ersten, umfassend dokumentierten Variable Fonts mit parametrischen Achsen – ein Referenzwerk für Schriftgestalter.

Inter (Rasmus Andersson, 2017): Begann als statische Schrift und wurde als Variable Font ein der meistgenutzten Open-Source-Schriften der Welt.

Roboto Flex (Google, 2022): Dramatische Erweiterung des Roboto-Systems zu einer Variable Font mit über 12 Achsen.

Recursive (Arrow Type, 2019–2020): Zeigt den spielerischen Extremfall: eine Schrift mit Achsen von Casual bis Linear, Mono bis Proportional – entwickelt mit öffentlicher Förderung.

Beispiele

Google Fonts Variable Fonts Katalog: Google Fonts hat Variable-Font-Support direkt in seine API integriert. Schriften wie Roboto, Inter, Source Sans 3 sind als Variable Fonts verfügbar.

Apple SF (San Francisco): Das iOS/macOS-Schriftsystem verwendet optische Größenanpassung (opsz) – eine Variable-Font-Eigenschaft, die automatisch die Schriftdetails für kleine und große Grade anpasst.

CSS-Implementierung: ``css font-family: 'Inter', sans-serif; font-variation-settings: 'wght' 450, 'slnt' -5; ``

Animierte Typografie: Variable Fonts ermöglichen CSS-Animationen zwischen Schriftgewichten – ein nahtloser Übergang von Light zu Bold in einem Hover-Effekt, der mit statischen Schriften nur durch Bild-Swaps möglich wäre.

In der Praxis

Ladezeit-Vorteil: Statt 5–6 separate Schnittdateien (je 20–50 KB) genügt eine Variable-Font-Datei (oft 50–100 KB gesamt). Bei Familien mit vielen Schnitten ist die Ersparnis erheblich.

Responsive Typography: Variable Fonts lassen sich mit CSS Custom Properties (--font-weight) und Viewport-Einheiten kombinieren, um Schriften kontinuierlich an Bildschirmgröße, Benutzereinstellungen oder andere Parameter anzupassen.

Browser-Support: Seit 2018 unterstützen alle modernen Browser (Chrome, Firefox, Safari, Edge) Variable Fonts. Für ältere Browser empfiehlt sich das Einbinden von statischen Fallbacks via @supports.

Designsoftware: Figma, Adobe XD und Sketch unterstützen Variable Fonts seit 2020/2021 vollständig; Instanzen können direkt im Design-Tool eingestellt werden.

Barrierefreiheit: Variable Fonts erlauben Nutzern (und Betriebssystemen) eine feinstufige Anpassung der Strichstärke für bessere Lesbarkeit – besonders wertvoll für Nutzer mit Seheinschränkungen.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Sind Variable Fonts wirklich kleiner als statische Schriften? Ja, wenn man mehrere Schnitte benötigt. Eine Variable-Font-Datei ist zwar größer als eine einzige statische Schnittdatei, aber kleiner als vier oder mehr statische Dateien zusammen.

Kann ich Variable Fonts in InDesign oder Word verwenden? InDesign (ab CC 2019) und Word (ab 2016 auf Windows 10) unterstützen Variable Fonts. Die Unterstützung ist aber nicht so umfassend wie in Browsern; nicht alle Achsen sind in der GUI zugänglich.

Was ist der Unterschied zwischen `font-weight: 500` und `font-variation-settings: 'wght' 500`? Moderne Browser übersetzen font-weight automatisch in Variable-Font-Achsen. font-variation-settings bietet direktere Kontrolle und erlaubt benutzerdefinierte Achsen, die font-weight nicht abdeckt.

Verwandte Einträge

• OpenType: Schrifttechnologie-Standard
• Google Fonts – Nutzung & DSGVO
• Adobe Fonts – Creative Cloud Schriften
• Schriftlizenzen: Desktop, Web, App, Broadcast
• Mikrotypografie: Details, die den Unterschied machen

Weiterführend

• Berlow, David: „Introducing OpenType Variable Fonts." Medium, September 2016.
• Google Fonts Knowledge: Variable Fonts. fonts.google.com/knowledge (2021–2023).
• Shillington, Andrew: Variable Fonts: A Web Typography Revolution. Smashing Magazine, 2018.
• OpenType Specification 1.8: Microsoft Typography Documentation. docs.microsoft.com, 2016.
• Nöth, Winfried; Schmitt, Christian A.: Variable Schriften. Typografische Gesellschaft München, 2019.