Bei einer variablen Schriftart (variable font) können mehrere Varianten einer Schriftart in einem File zusammengefasst werden. Das kann font-weight und font-style betreffen, aber auch benutzerdefinierte Eigenschaften. Theoretisch können auch komplett unterschiedliche Schriftbilder zusammengepackt werden (siehe weiter unten im Abschnitt „Axis“).

Wenn es rein um die Ladezeiten geht, sollte man von Fall zu Fall abwägen, ob sich dafür eine variable font auszahlt; zwar gibt’s jetzt ein Komplettpaket der Schriftart, aber dafür vergrößert sich natürlich auch die filesize. Abhängig vom verwendeten Dateiformat kann man aber trotzdem sinnvolle Dateigrößen erreichen. Empfohlen: woff2.

Variable fonts können weitaus mehr, als nur zwischen normal, kursiv und fett zu wechseln. Sie ermöglichen uns einen Zugriff mit CSS auf die Schriftart selbst, und dadurch werden fließende Übergänge und  kontinuierliche statt sprunghafte Veränderungen der Schriftart möglich.

Vielleicht würde man erwarten, das sei schon mit herkömmlichen Methoden, beispielsweise über eine Animation möglich; ist es aber nicht. Wenn wir mit einer Transformation, Animation oder mit :hover arbeiten, erfolgt die Veränderung von font-weight sprunghaft.

Wir möchten beispielsweise, dass eine Schrift mittels Animation dicker und dünner wird.

Die CSS-Anweisung unterscheidet sich etwas von der bisherigen Methode. 

Bei variablen Schriftarten arbeiten wir mit font-variation-settings. Dabei handelt es sich um eine low-level-property, die normalerweise nicht verwendet werden soll (mehr dazu in der Dokumentation), da wir damit direkt auf die Schrift zugreifen. Bei variablen Schriftarten wollen wir aber genau das. Wir verändern eine bestimmte axis einer Schriftart, wobei die zulässigen Werte bei unterschiedlichen Schriftarten variieren können.

Bei "wght" beispielsweise können bei einer variablen Schriftart nicht nur die Standardwerte 400 für normal und 700 für bold angegeben werden (oder Werte in 100er-Sprüngen zwischen 100 und 900), sondern beliebige Werte innerhalb des verfügbaren Rahmens, etwa 374.

Das erklärt übrigens auch die nahtlose Verbreiterung der Schrift im Beispiel weiter oben.

Es ist damit zu rechnen, dass im Laufe der nächsten Jahre noch weitere registered axes hinzukommen.

Es gibt allerdings nicht nur diese fünf registrierten Achsen, sondern auch beliebig viele benutzerdefinierte (custom axes)!

Im Unterschied zu den registrierten Achsen müssen die benutzerdefinierten mit Großbuchstaben geschrieben werden, wie beispielsweise "TRMC" für „rounded slab“ bei der variablen Schriftart „Decovar“ von David Berlow – wie der Schriftdesigner diese benennen möchte, bleibt ihm selbst überlassen, der Achsenname muss nur aus genau vier Großbuchstaben bestehen.

Die Achsenangaben können beliebig miteinander kombiniert und somit unterschiedlichste Variationen einer Schrift geschaffen werden:

In Kombination von extrem schmal mit extrem fett in der ersten und zweiten Zeile des Beispiels oben wird die Schrift unleserlich.

Über benutzerdefinierte Achsen (custom axes) können auch andere, aus der Typografie bekannte Eigenschaften wie "GRADE" beeinflusst oder neue erfunden werden.

Bei der Schriftart „Buffalo Gal“ lassen sich z.B. die Eigenschaften „Cookies“, „Fringe“, „Hooves“, „Concavity“ und „Bracketing“ variabel einstellen.

Dadurch lässt sich das Erscheinungsbild der Schrift komplett verändern; „Cookies“ beispielsweise betreffen die Form der Punkte auf den Großbuchstaben, „Fringe“ die Form und Größe der Auswölbung in der Mitte.

Oder es kann sich, je nach Komplexität der vorhandenen benutzerdefinierten Achsen, auch um eine etwas längere Anweisung handeln…

…wie für das „Eiszeit“-Beispiel verwendet.

Wer selbst ein bisschen mit variablen Schriftarten und ihren Möglichkeiten herumspielen will, ohne sich gleich eine herunterladen zu müssen, oder wer sich einfach ein bisschen „Appetit holen“ möchte, kann das auf der Seite  „Axis-Praxis“ von Laurence Penny tun.

Eine aktuelle Übersicht, welcher Browser was und ab welcher Version unterstützt, findet Ihr auf caniuse.com.