Variable Fonts – Maximale Flexibilität bei minimaler Dateigrösse

Der September 2016 könnte ein Meilenstein in der Geschichte von Schriftdesign gewesen sein: Dann nämlich gab die Allianz aus Adobe, Apple, Google und Microsoft bekannt, dass sie gemeinsam die Variable Fonts entwickelt haben. Das Konzept ist simpel: Anstatt wie bisher ein Schriftfile pro Schriftschnitt (zum Beispiel «bold» oder «light») zu erstellen, wird die gesamte Schrift in einem einzigen File zusammengefasst. Mittels «Designachsen» werden dann dem Font verschiedene Eigenschaften hinzugefügt.  

Klingt nicht so wirklich spektakulär, ist es aber. Bisher musste man nämlich jeden Schriftschnitt einzeln für eine Website hochladen. Dies hatte bedeutet, dass es einen Einfluss auf die Grösse und Ladezeit der Website hatte, ob ich jetzt zusätzlich noch «semibold» auf der Seite verwenden wollte.

Mit einem Variable Font habe ich all möglichen Schriftschnitte dabei, und noch viele mehr. Es gibt nämlich keine harten Abstufungen mehr, sondern die Dicke der Schrift wird in der Breite von 100 - 900 «interpoliert», also ausgerechnet. Und diese feinen Abstufungen und die Möglichkeit, Designachsen beliebig zu kombinieren, geben ganz neue Möglichkeiten im Webdesign.

Auf der Seite v-fonts.com findet man unzählige Variable Fonts zum Herumspielen.

Wie können Variable Fonts produktiv eingesetzt werden?

Hover

Ohne Harte Abstufungen kann ein fliessender Übergang zwischen verschiedenen Schrift-Styles bewerkstelligt werden. Dadurch ergeben sich völlig neue Möglichkeiten für Hover-Effekte, wie folgendes Beispiel zeigt:

Anicons

Ein weiterer spannender Ansatz sind die Anicons. Dabei handelt sich auf den ersten Blick um eine klassische Icon-Schrift. Der grosse Unterschied? Es handelt sich um einen Variable Font, bei dem eine Designachse, «Time» genannt, eine Animation behandelt. Das Icon wird also nicht zum Beispiel dicker, sondern verwandelt sich in eine andere Form. Mühsame SVG-Animations entfallen somit und man hat mit der Icon-Schrift schon unzählige Microanimations für wenige Kilobyte dabei.

Adineue CHOP (Adidas)

Auch die grosse Marke Adidas hat bereits mit Variable Fonts gearbeitet. Die Adineue CHOP wurde speziell für Adidas designt, sie ist in der Breite und Dicke variabel. Es ist also möglich, verschieden lange Wörter optisch gleich lang aussehen zu lassen. Websites mit Sprachwechseln kennen das Problem: Französischer Text ist zum Beispiel oft länger als die deutsche Version. In wichtigen Elementen wie zum Beispiel Headlines oder Buttons könnte dann einfach auf der Sprache eine andere Breite verwendet werden.

Gibt es Nachteile?

Nicht wirklich, die Nichtunterstützung im Internet Explorer 11 kann man als Negativpunkt aufführen. Dafür gibt es aber auch Fallback-Möglichkeiten. Ausserdem ist das Angebot von Variable Fonts noch relativ klein, viele bekannte Schriften gibt es noch nicht in diesem Format. Diese werden aber mit grosser Sicherheit in der Zukunft folgen.

Fazit

Wir stehen erst am Anfang dieser Technologie – dennoch gibt es schon einige spannende Vorteile bei der Verwendung von Variable Fonts. Hinzu kommt, dass Adobe, Apple, Google und Microsoft dahinter stehen und Variable Fonts nach und nach in ihre Produkte einbinden. Es ist also gut möglich, dass sich das Format in einigen Jahren als neuer Standard durchsetzen könnte. Das Potenzial ist immens und ich bin unglaublich gespannt, was es in der nächsten Zeit an neuen, innovativen Schriften geben wird.

Und wer weiss, vielleicht ist bereits dein nächstes Projekt bei der VIU eines, in welchem wir Variable Fonts verwenden können.