Webtypografie
Webworker mit einem Faible für Schriften dürfen sich über neue Features in OpenType freuen: Color Fonts und Variable Fonts.
Neue Features in OpenType
Über das Schriftformat OpenType wandern langsam ein paar neue Techniken ins Web, um noch mehr aus Schriften herauszuholen. Für Freunde guter Typografie bieten sich dadurch neue interessante Möglichkeiten. Allerdings sind die Techniken nicht so einfach zu handhaben, wie es vielleicht auf den ersten Blick scheint.
Schriften im Web
Seit ein paar Jahren können Sie beliebige Schriften auf Webseiten einsetzen. Das funktioniert über die CSS-Eigenschaft
@font-face, über die Sie Schriften auf dem eigenen Server oder über Dienste wie Google Fonts einbinden. Allerdings gibt es mit TTF/OTF, EOT, WOFF, WOFF2 und SVG viele unterschiedliche Schriftformate. Nicht alle Browser unterstützen alle Formate, so dass es bei älteren Browsern noch nötig ist, verschiedene Schriftdateien einzubinden. Ein kurzer Überblick: TTF (TrueType Font) ist ein Format, das von Apple und Microsoft Ende der 1980erJahre entwickelt wurde. Es ist das gängigste Schriftformat unter dem klassischen Mac OS, macOS und Windows. Alle modernen Browser verstehen das Format – allerdings nicht der Internet Explorer 8, und die IE 9-11 bieten nur partiellen Support. OTF (OpenType Font) ist eine Weiterentwicklung von TrueType. Dieses Format kann unter anderem bis zu 65.536 Glyphen (Zeichen) enthalten, so dass eine Schrift auch Platz für Kapitälchen, alternative Zeichen oder andere Extras bietet. Der Browser-Support entspricht dem für TTF. EOT (Embedded OpenType) ist eine kompakte Form von OpenType Fonts, die von
Microsoft entwickelt wurde und nur vom Internet Explorer unterstützt wird. WOFF (Web Open Font Format) ist eine Entwicklung der Mozilla Foundation, Opera Software und Microsoft. Im Grunde ist ein WOFF ein Containerformat, das eine Schrift als TTF oder OTF enthält – komprimiert und angereichert mit Metadaten. Es war als gemeinsames Schriftformat für alle Browser geplant. Und tatsächlich unterstützen es auch alle Browser ab Internet Explorer 9. WOFF 2 ist die Weiterentwicklung von WOFF, die eine andere Komprimierung nutzt und so etwa 30 Prozent bei der Dateigröße einspart. Er wird von allen modernen Browsern unterstützt, nicht aber vom Internet Explorer. SVG (Scalable Vector Graphics) ist eigentlich ein Format für Vektorgrafiken im Web. Bei einem SVG-Font werden die einzelnen Buchstaben im SVG-Format gespeichert. Es gibt einige Nachteile, zum Beispiel fehlt hier ein Font Hinting, um die Lesbarkeit bei kleinen Größen zu verbessern. Die Möglichkeit gilt als deprecated; sie wurde aus SVG 2.0 entfernt, und Browser wie Chrome und Opera haben die Unterstützung bereits wieder entfernt. Wenn Sie Schriftpakete herunterladen, enthalten die CSS-Beispiele oft noch eine umfangreiche Syntax, um alle möglichen Browser anzusprechen:
@font-face { font-family: 'webfont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix')
format('embedded-opentype'), url('webfont.woff')
format('woff'), url('webfont.ttf')
format('truetype'), url('webfont.svg#webfont')
format('svg'); font-weight: normal; font-style: normal; }
Für viele Projekte reicht es heutzutage allerdings, einfach nur WOFF und ggf. WOFF 2 einzubinden. Wenn Sie zusätzlich den veralteten Internet Explorer 8 einbeziehen müssen, kommt noch ein EOT dazu. Innerhalb des Formats OTF sind fortgeschrittene Techniken möglich, die nicht alle Browser unterstützen. So können Sie etwa über die Eigenschaft @font-feature-values Ligaturen, Swashes oder Ornamente einschalten – derzeit allerdings nur in Firefox und Safari; und auch nur dann, wenn der Font die Zeichen unterstützt. Da sich die Spezifikation von OpenType weiterentwickelt, kommen auch im Web immer wieder neue Möglichkeiten hinzu.
Color Fonts
Eine dieser neuen Möglichkeiten bieten Color Fonts, manchmal auch Multicolor Fonts oder Chromatic Fonts genannt. Eine Schrift enthält zunächst einmal die nötigen Vektor-informationen, um einzelne Buchstaben und Glyphen zu zeichnen. Bei Color Fonts werden zusätzlich Daten im SVGFormat in einem OpenType-Font gespeichert. Diese SVG-Daten können Farben und Verläufe enthalten, Bitmap-Grafiken oder sogar Animationen. Das führt zu der offiziellen Bezeichnung OpenType-SVG-Fonts. Die grundlegende Idee eines farbigen Fonts ist erst einmal recht leicht zu verstehen. Wie so oft bei Schriftformaten, wird es komplizierter, wenn man einen Blick unter die Haube bzw. auf die Entwicklung des Formats wirft. Mit der Verbreitung von mehrfarbigen Unicode Emojis benötigten TrueType und OpenType eine Möglichkeit, um farbige Glyphen zu unterstützen. Hierfür hatten die großen Unternehmen jeweils ihre eigenen Ideen. Diese Lösungen führen neue Tabellen in OpenType ein. Alle Schriften basieren auf solchen Tabellen; diese enthalten zum Beispiel Copyright-Angaben oder legen Abstände zwischen den Zeichen fest. Googles Lösung nutzt neue CBDT/CBLC-Tabellen. Darüber werden Glyphen einfach durch PNG-Bilder ersetzt. Das klappt gut für kleine Grafiken, aber natürlich skalieren die PNG-Bilder nicht. Außerdem können Sie in den Bildern nicht einfach die Farben austauschen. Apple hatte eine ähnliche Idee. Hier werden für die Gly-
phen ebenfalls PNG-Bilder benutzt, die Daten stehen in einer SBIX-Tabelle. Microsofts Idee arbeitet mit COLR/CPAL-Tabellen. Hier werden verschiedenfarbige Glyphen übereinander gelegt, bis das gewünschte Ergebnis entsteht. Mozilla und Adobe haben zusammengearbeitet und vorgeschlagen, SVG in OpenType zu verankern. Die Glyphen werden also durch ein SVG-Bild erzeugt. Das bringt – wie oben erwähnt – automatisch ein paar Extras mit sich: neben verschiedenen Farben eben auch Verläufe, eingebettete Bitmap-Bilder sowie Animationen. Adobe, Mozilla, Google und Microsoft haben jeweils ihre Spezifikationen zur Standardisierung nach ISO/IEC 14496-22 eingereicht. Die neuen Tabellen für jede dieser Tabellen wurden dann in OpenType Version 1.7 hinzugefügt. Apples SBIX-Tabelle wurde ursprünglich nur in AAT-Schriften (Apple Advanced Typography) unterstützt, später aber in OpenType Version 1.8 hinzugefügt. Das Microsoft Windows 10 Anniversary Update war das erste Betriebssystem, das alle vier Farbfonterweiterungen unterstützte, und Microsoft Edge war der erste Browser.
Unterstützung für Color Fonts
Die SVG-Lösung bietet die meisten Optionen und soll der neue Industrie-Standard werden, auf den sich alle fünf genannten Unternehmen geeinigt haben. In der Übergangsphase stellt sich die Frage, welches Betriebssystem, welches Programm und welcher Browser welches der vier Farbsysteme unterstützt und ab welcher Version. Kurz zusammengefasst: Photoshop, Illustrator, InDesign und Sketch unterstützen in den aktuellen Versionen SVG und SBIX. QuarkXPress unterstützt SVG, SBIX und COLR. Affinity Designer unterstützt SVG ( www.colorfonts.wtf). Bei den Browsern sieht die Unterstützung wie folgt aus: Microsoft Edge: SVG, SBIX, COLR, CBDT Safari: SVG, SBIX, COLR Firefox: SVG, COLR Chrome: COLR, CBDT Internet Explorer: COLR (nur Windows 8.1) Opera: COLR (nur Windows) Wenn ein Browser einen Color Font nicht richtig anzeigen kann, gibt es glücklicherweise einen einfachen Fallback: Die Schrift wird dann schlicht einfarbig dargestellt.
In der Praxis
Der Vorteil der Color Fonts zeigt sich in erster Linie bei dem Fall, für den sie entwickelt worden sind: Nun ist es einfach, mehrfarbige Emojis in eine Schrift aufzunehmen. Entwickler sparen sich die Mühe, eigene Lösungen zu programmieren, wenn es etwa darum geht, Emojis in Chats bei Computerspielen oder in Kommentaren bei Blogs einzusetzen. Daneben bieten sich Color Fonts eher in kleinen Dosen bei besonderen Projekten an, um etwa Überschriften interessanter und verspielter zu machen. Dafür gibt es eine Handvoll schicker Schriften, wie etwa gilbert oder Popsky. Hier gilt es, die Vor- und Nachteile abzuwägen. Durch die zusätzlichen Farbinformationen sind die Color Fonts größer als einfarbige Schriften. Das zeigt sich noch deutlicher, wenn größere Pixelgrafiken eingebettet werden. Außerdem kann eine zu verspielte Schrift die Lesbarkeit stören. Wichtig zu wissen: Da nun die Schrift selbst Farbinformationen enthält, können Sie die Farbe nicht wie gewohnt per CSS mit color verändern. Die Schrift behält einfach die voreingestellte Farbe. Das gilt auch für Links. Allerdings können Links eine übliche Unterstreichung haben, die dann über color beeinflusst werden kann. Derzeit gibt es in CSS keine Möglichkeit, die Farben eines Color Fonts zu ändern. Wenn jedoch der Font entsprechend vorbereitet ist, können Sie verschiedenfarbige Glyphen über die Eigenschaft font-variation-settings ansprechen. Etwa durch:
h1 { font-family: "trajan-color"; font-feature-settings: "ss00"; }
Dazu gibt es eine Demo von Robin Rendle: codepen.io/robinrendle/full/YpxXLx. Der Working Draft des CSS Fonts Module Level 4 sieht vor, Color Fonts mit zusätzlichen CSS-Eigenschaften zu unterstützen. So soll es möglich sein, über font-palette die Farb-Paletten innerhalb eines Color Fonts anzusprechen. Mit @font-palette-values legen Sie eigene Farbpaletten für einen Color Font festlegen. Es wird allerdings noch eine Weile dauern, bis Sie diese Eigenschaften in einem Browser ausprobieren können.
Variable Fonts
Version 1.8 des OpenType-Formats enthält eine weitere, spannende Ergänzung: Variable Fonts. Wenn Sie Schriften einsetzen, kommen meist vier Schriftschnitte in Betracht: normal, bold, italic und bold italic. Das reicht in der Regel für Schriften im Web. Typografisch gibt es bei den großen Schriftfamilien oft weitere Schnitte, von Ultralight hin bis zu Extra Heavy. Vielleicht auch noch Expanded oder Condensed. Für das Web ist es nicht sinnvoll, die ganze Palette einer Schriftfamilie einzusetzen. Schließlich muss jeder einzelne Schnitt heruntergeladen werden. Und nicht alle Schnitte eignen sich für das Web.
Die Idee hinter Variable Fonts ist es, alle Schnitte in einer einzelnen Datei anzubieten. In der OpenType-Spezifikation gibt es fünf Achsen/Variablen, die kontrolliert werden können. Dabei muss nicht jede Schriftdatei unbedingt alle fünf nutzen. Wgth: Dies ist die Dicke der Schrift. Über die CSS-Eigenschaft font-weight können Sie einen Wert zwischen 1 und 999 festlegen. So können Sie die Schnitte normal und bold festlegen. Die Standardwerte liegen bei 400 für normal und 700 für bold. Wdth: Die Breite einer Schrift, die über die CSS-Eigenschaft font-stretch angesprochen wird. Erlaubte Werte sind Prozentangaben und bestimmte Keywords: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Ital: Kursive Schrift oder nicht. Dies entspricht der bekannten CSS-Eigenschaft font-style mit den Werten normal, italic und oblique. Wobei sich italic und oblique – je nach Schrift – eventuell nicht oder nur wenig unterscheiden. Laut Spezifikation meint italic eine echte kursive Schrift, während bei oblique lediglich die Buchstaben geneigt werden. Slnt: Diese Eigenschaft spielt mit dem genannten oblique-Wert zusammen. Per Default wird die Schrift um 20 Grad geneigt. In OpenType sind aber Werte zwischen -90deg und 90deg vorgesehen. Opsz: Die optische Breite einer Schrift, die über die neue CSS-Eigenschaft font-opticalsizing ein- und ausgeschaltet werden kann. Der Wert kann sinnvoll sein, um Schriften für Sonderfälle, etwa kleine Bildschirme, optimiert auszugeben.
Variable Fonts und CSS
Das CSS Fonts Module Level 4 befindet sich aktuell in einem Working Draft und sieht die CSS-Eigenschaft font-variation-settings vor, mit der sich die OpenType-Optionen direkt ansprechen lassen. Die beiden folgenden Deklarationen sind also equivalent – bis auf die Tatsache, dass font-variationsettings nur von Variablen Fonts und modernen Browsern unterstützt wird.
h1 { font-weight: 850; font-style: italic; font-stretch: normal; }
h1 { font-variation-settings: "wght" 850, "wdth" 100, "ital" 1; } Laut caniuse.com können alle modernen Browser bereits mit Variablen Fonts umgehen, die Internet Explorer jedoch nicht. Allerdings funktionieren nicht unbedingt alle Spielereien. Auf v-fonts.com können Sie bei verschiedenen Fonts zum Beispiel die Werte für Width, Weigth oder Italic verändern. Das klappt im Chrome, aber nicht in Firefox. Bis Sie die Technik zuverlässig einsetzen können, wird also noch eine Weile vergehen.
Kleine Hürden
Neben dem Browser-Support gibt es auch ein paar andere Nachteile, die zu bedenken sind. Eine variable Schrift bietet Ihnen zwar eine ungeheure Bandbreite. Dafür müssen die nötigen Informationen aber auch in der Schrift hinterlegt werden. Die Datei wird also größer. Wenn Sie nur zwei Schriftschnitte benötigen kann es also passieren, dass Sie mit zwei einzelnen, statischen Fonts besser bedient sind. Dazu kommt, dass die vielen Stellschrauben ein gutes Gespür für Typografie verlangen. Ein Schriftentwickler hat sich Gedanken darüber gemacht, wie eine kursive Schrift aussehen soll. Da ist es wenig sinnvoll, einem Webentwickler oder gar Kunden die Wahl zu lassen, wie sehr eine Schrift geneigt werden soll. Im Zweifel halten sich Webworker also an ein paar Standardwerte, die die Schriftentwickler im besten Fall gleich vorgeben.