Vor etlichen Jahren erfreuten sich Webdesigner über die typografische Vielfalt durch Webfonts. Nun bahnt sich die nächste Evolution durch den Einsatz von variablen Fonts an.
„Wow endlich Alternativen zu Arial, Verdana und Co.“ dachten sich Webdesigner vor einigen Jahren. Durch die Webfonts war es nun möglich individuelle Typografie auch im Web zu präsentieren. Mehr und mehr Schriftschnitte fanden ihren Weg ins Web. Allerdings hatte dies zur Folge dass auch immer mehr Dateien geladen werden mussten, das auf Kosten der Performance von Websites und Apps ging. Durch variable Fonts soll dem nun Abhilfe geschaffen werden. Ursprünglich wurden sie mit der Absicht entwickelt, die Datenmenge geringer zu halten. Sie bieten darüber hinaus noch eine Vielzahl an Möglichkeiten um Webseiten typografisch ansprechender und individueller zu gestalten.
Wer schon mal mit der Verarbeitung von Schrift, egal ob für einen Flyer, eine Einladung oder eben für die Gestaltung einer Website konfrontiert war, weiß dass es für eine Schriftart in der Regel verschiedene Schriftschnitte (Strichstärken) gibt. Oftmals bezeichnet alsLight, Regular, Bold etc. Auch die Schriftbreiten wurden individueller und so warten die Schriften oft mit einem Condensed- oder Extended-Schnitt auf. Für jeden Schriftstil war es bislang notwendig diesen in eine extra Datei anzulegen, dass wie bereits erwähnt im Web zu hohen Ladezeiten führen konnte. Daraufhin haben es sich die IT-Pioniere Google, Apple, Microsoft und Adobe zum Ziel gesetzt, diesen Umstand zu ändern. So wurde das Opentype-Format kurz OTF mit Opentype Font Variations kurz mit variablen Fonts ergänzt.
Klingt recht simpel, nun findet man also alles gesammelt in einer Datei. Doch was passiert da genau? Jetzt werden die Schriftschnitte nicht mehr, wie bei den herkömmlichen Webfonts in einzelnen Dateien, sondern in einer Schriftdatei über verschiedene Achsen definiert. Der Central Master also der Basisschriftschnitt „Regular“, wird mit den vorhandenen Schriftschnitten der jeweiligen Schriftart verknüpft, das Spektrum reicht daraufhin von Thin bis Black. Entlang dieser Achse können die einzelnen Strichstärken stufenlos berechnet werden. Dadurch können Strickstärken definiert werden, die z.B. zwischen Light und Regular liegen. Denn jeder Gestalter kennt das Problem, dass manchmal der gewünschte Bold-Schnitt über zu wenig Strichstärke verfügt, der nächste Schnitt Black allerdings wieder eine zu hohe Strickstärke aufweist! Mit variablen Fonts kann ein Wert in der Mitte der beiden Schnitte definiert werden.
Aber nicht nur die Strichstärke kann nun interpoliert werden, in der Opentype-Spezifikation sind 5 Standard-Achsen hinterlegt.
- Strichstärke
- Schriftbreite
- Optische Größe
- Schriftneigung
- Kursive (nur bedingt möglich, anders als die Schriftneigung kann eine echte Kursive nicht immer aus dem Basisschnitt berechnet werden und benötigt daher oftmals nach wie vor eine extra Datei)
Wobei allerdings nicht alle belegt sein müssen. Des Weiteren können auch noch weitere Achsen ergänzt werden, wie z.B. Serifenform, Konturen etc.
Die Nutzer der aktuellsten Adobe CC Version, haben bereits die Möglichkeit mit Illustrator, Indesign und Photoshop variable Fonts zu testen. Es ist bei den Schriftarten wie Myriad Variable Conzept, Source Serif Variable, Source Code Variable, Minion Variable Conzept, Acumin Variable Conzept bereits möglich.
Wie funktioniert es nun im Web?
Für die Webanwender, ist es in CSS möglich über die Eigenschaft „font-variation-settings“ die verschiedenen Achsen anzusprechen.
Also im Detail: Variable Fonts können ebenso wie Webfonts über den Befehl @font-face eingebunden werden. Sicherzustellen ist hierbei, dass die Schriftart im komprimierten woff2-Format zur Verfügung steht um eine geringe Dateigröße und somit Ladezeit zu sparen.
Im Anschluss kann die integrierte Schrift folgendermaßen über CSS angesprochen werden
Strichstärke = wght (Weight)
Schriftbreite = wdth (Width)
Kursive = ital (Italic)
Neigung = slnt (Slant)
Optische Größe = opsz (Optical Size)
Bsp:
Weitere Achsen können einfach durch ein Komma getrennt, ergänzt werden.
Leider werden variable Fonts noch nicht von allen Browsern unterstützt, folgende Browserversionen schaffen es allerdings bereits die variablen Fonts zu interpretieren:
Stand Dez. 2019:
Webrowser
- Chrome 62+,
- Safari 11+,
- Firefox 62+,
- Edge 17+,
- Opera 49+
Betriebssysteme
- macOS 10.5+
- iOS 3.2+
- tvOS 9.0+
- watchOS 2.0+
- Windows Windows Creators Update (1709)
- Android 5+
Daher sollte immer darauf geachtet werden, Fallback Fonts zu hinterlegen. D.h. neben den verwendeten variablen Fonts, sollten herkömmliche Webfonts für die Verwendung in älteren Browsern hinterlegt werden, die im Anschluss nur dann geladen werden, wenn der verwendete Browser die CSS-Eigenschaft font-variation-settings nicht interpretieren kann.
Die variablen Fonts werden somit nur für jene Browser verwendet, die auch die font-variations-settings unterstützen können. Das wird mit einer entsprechenden Abfrage überprüft:
Website-Empfehlung, um die Vielfalt im Detail zu entdecken und die Auswirkungen der Settings von variablen Fonts in Echtzeit zu testen:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
Fazit für den Einsatz von variablen Fonts
· Geringere Ladezeiten
Durch die Zusammenfassung mehrerer Schriftdateien zu einer Einzeldatei, wird die Performance einer Website erhöht, da nicht auf verschiedene Dateien zugegriffen werden muss.
· Responsive Typografie
Die Webtypografie ist nicht mehr abhängig von einem verankerten CSS-Framework. Die Gestaltungsmöglichkeiten sind vielfältiger, Umbrüche können vermieden werden, und die Schrift passt sich automatisch der Screenwidth an.
· Anpassung auf Bildschirmauflösung
Die Ausgabe der Schrift ist auch abhängig von der Auflösung des Bildschirms. Je kleiner die Schrift, desto schlechter lesbar für den Nutzer. Durch die Möglichkeit die Optical Size zu definieren wird es in Zukunft leichter, auch auf geringeren Auflösungen ein optimales Schriftbild zu generieren ohne Abstriche in der Performance machen zu müssen.
· Mehr Freiheit für Designer
Durch die Vielfalt und die einfachen Anpassungsmöglichkeiten der variablen Fonts, haben nun Webdesigner noch mehr Möglichkeiten den verwendeten Schriften Ausdruck zu verleihen