How-To

Variable Fonts: Das neue Schriftformat erobert das Web

(Shutertock/ Andrii Symonenko)

Seit acht Jahren sorgen Webfonts für mehr Ausdruck und Vielfalt im Webdesign. Jetzt bahnt sich mit variablen Fonts die nächste Revolution an. Welche Möglichkeiten eröffnet das neuen Schriftformat?


In den Anfangszeiten der Webfonts waren Webdesigner schon damit zufrieden, endlich Alternativen für Arial, Georgia und Co. an der Hand zu haben. Aber recht schnell wuchs der Anspruch, auch im Web abwechslungsreiche Typografie auf Printniveau anwenden zu können: Mehr und mehr Schriftschnitte wurden eingebunden, um typografische Vielfalt zu erzeugen. Doch mit jedem Schriftschnitt musste eine weitere Datei geladen werden, was die Ladezeiten in die Höhe schnellen ließ. Genau hier setzen heute variable Fonts an. Sie sind mit dem Ziel der Datenkomprimierung entwickelt worden, bieten aber darüber hinaus noch weitere Vorteile.

Was sind variable Fonts?

Eine Schriftart gibt es in der Regel mit verschiedenen Schriftschnitten oder Schriftstilen beziehungsweise Strichstärken – etwa „Light“, ­„Regular“, „Bold“ – oder Schriftbreiten wie „Condensed“ oder ­„Extended“. Jeder dieser Schriftstile wird vom Schriftdesigner festgelegt und in einer separaten Datei gespeichert. Je nach Umfang der Schriftart können hier natürlich viele Einzeldateien entstehen, was gerade im Web aufgrund längerer Ladezeiten nicht von Vorteil ist. Dieses Problem haben Adobe, Apple, Google und Microsoft erkannt und 2016 zusammen mit weiteren Experten das Opentype-Format um „Opentype Font ­Variations“, bekannt als „variable Fonts“, ­erweitert.

Variable Fonts verknüpfen den Basisschriftschnitt (Central ­Master) mit den Extremwerten einer Schrifteigenschaft, beispielsweise mit „Thin“ und „Black“. So ­entsteht eine Achse, entlang derer die ­Schriftstärke stufenlos interpoliert werden kann. (Abbildung: Christoph Zillgens)

Mit diesen variablen Fonts ist es jetzt möglich, verschiedene Schriftstile einer Schrift in einer einzigen Datei zu vereinen. Einzelne Schriftschnitte werden dabei nicht in separate ­Dateien ausgelagert, sondern über verschiedene Achsen definiert. Ein Basisschriftschnitt, Central Master genannt, wird dabei mit Extremwerten einer Schrift­eigenschaft, beispielsweise „Thin“ und „Black“, verknüpft. So entsteht eine Achse, entlang derer die Strichstärke stufenlos interpoliert werden kann. In der ­Opentype-Spezifikation sind fünf Standardachsen hinterlegt: für die Strichstärke, die Schriftbreite, die Neigung, die optische Größe sowie die Kursive. Allerdings ist es nicht immer möglich, die Kursive in die gleiche Datei zu integrieren, denn oftmals werden bei einer richtigen Kursiven viele Zeichen komplett neu gezeichnet. Sie lassen sich somit nicht aus dem aufrechten Schnitt inter­polieren.

Alles in nur einem Font: Macht man die Schrift per Schieberegler kleiner oder größer, wird automatisch die richtige optische Größe gewählt. (Abbildung: Christoph Zillgens)

Die Standardachsen müssen nicht zwangsweise alle belegt sein. Zusätzlich können auch weitere Achsen für Serifenform und -länge, Kontrast, Konturen und sonstige Ausprägungen angelegt werden. Der Kreativität sind keine Grenzen gesetzt. Wer eine aktuelle Version der Creative Cloud von Adobe nutzt, kann in Illustrator oder ­Photoshop verschiedene Schriften wie ­Acumin, Minion oder Myriad als variablen Font testen. Diese sind mit dem Zusatz „Variable Concept“ gekennzeichnet und lassen sich über das Schriftmenü aufrufen. Die verschiedenen Achsen lassen sich dann über Schieberegler steuern. In CSS ist es möglich, über die Eigenschaft font-variation-settings die verschiedenen ­Achsen anzusteuern und die Schriftdarstellung zu beeinflussen. Wie das geht, zeigt der nächste Abschnitt.

Variable Fonts anwenden

Variable Fonts sind zurzeit ein experimentelles Feature, das noch nicht zuverlässig browserübergreifend funktioniert. Dennoch liegt die Browser-Unterstützung deutschlandweit aktuell schon bei rund 65 Prozent. Dass einem produktiven Einsatz nichts im Wege steht, zeigt die Website der Webtypografie-Konferenz Ampersand (2018.ampersandconf.com), die von variablen Fonts schon Gebrauch macht.

Variable Fonts lassen sich, wie alle anderen Schriften auch, über ­@font-face ins CSS einbinden:

@font-face {
font-family: "SourceSans";
src: url("source-sans-variable.woff2")
format("woff2");
}

Hierbei sollte sichergestellt sein, dass die verwendete Schriftart auch im komprimierten Woff2-Format vorhanden ist. Zurzeit liegen die meisten variablen Fonts lediglich als Truetype-Schriften (ttf) vor, mit denen sich zwar schön experimentieren lässt, ­deren Dateigröße sie aber für den produktiven Einsatz ­ungeeignet macht. Google bietet ein Tool für die Kommandozeile an ­­­
(­github.com/google/woff2), mit dem die Umwandlung in Woff2 durchgeführt werden kann.

Der oben genannte Code bindet den variablen Font ein, der von unterstützten Browsern angewendet werden kann. Dies sind – Stand Juli 2018 – die aktuellen Versionen von Edge, Chrome und Safari (ab MacOS 10.13). Firefox wird mit der Version 63 nachziehen.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!