Variable Fonts? – Very Able Fonts!

Kaum ein anderes Thema ist momentan in der Schriftgestaltung so präsent wie die OpenType Font-Variations-Technologie (FV-Technologie) und die damit einhergehenden Variablen Fonts (VF). Trotz den entscheidenden Vorteilen gegenüber herkömmlichen, statischen Schriften, sind die Variablen Fonts unter Gestaltern noch relativ unbekannt. Deshalb habe ich mich entschieden meine Bachelorarbeit diesem Thema zu widmen. Es entstand ein Buch voller Experimente, Experteninterviews und Wissen zu VF. Das besondere daran – VF werden aus einem ungewöhnlichem Blickwinkel betrachtet. Mittels spannender Experimente werden unkonventionelle Fragen beantwortet. Was wäre wenn wir VF als Tool zur Schriftentwicklung benutzen könnten? Was wäre wenn VF zur Schriftmischung verwendet werden könnten?

Qualität, Flexibilität und die Fähigkeiten von Schriften werden durch technische Entwicklungen stetig verbessert. Eine dieser Entwicklungen ist die Interpolation von Schriften.
Im September 2016 wurde mit der OpenType Version 1.8 die Erneuerung und die Erweiterung der Open-Type-Technologie vorgestellt. Ermöglicht hat dies ein Zusammenschluss aus Google, Apple, Adobe und Microsoft. Mit diesem Update enthält die exportierte Schriftdatei nicht mehr wie zuvor eine statische Schrift, sondern unterstützt die Variation der Schrift. Die Schrift kann erstmals direkt im Layout-Programm vom Nutzer interpoliert werden.

Ein Besuch der TYPOLabs 2018 in Berlin zeigte mir wie wichtig und aktuell dieses Thema ist. Er zeigte mir aber auch, dass in dieser Technologie unglaublich viel unerforschtes Potenzial steckt. Mein Ziel war es also nicht eine weitere Schrift mit variabler Breitenachse zu entwicklen, sondern zu untersuchen was diese Technologie sonst noch so hergeben könnte.

Ein Variabler Font fasst mehrere Schriftdateien in einer einzigen Schriftdatei zusammen. Dadurch entsteht ein ein- oder mehrdimensionaler Designraum. Die Anpassungen an der Schrift und somit die Bewegung durch diesen Raum erfolgt über Schieberegler. Dabei bewegt sich der virtuelle Punkt entlang sogenannter Designachsen. Eine Designachse beschreibt eine Strecke von Form A zu Form B. Im Schriftkontext wäre das z.B. die Strecke von Thin nach Bold, also die Breitenachse.

Wie funktioniert die Interpolation?
Jede Glyphe besitzt nur eine einzige Outline. Die Punkte, die diese Outline konstruieren, haben Anweisungen, wie sie sich verhalten oder sich bewegen sollen, um z.B. ein anderes Gewicht zu erzeugen. Die einzelnen Schriftstile werden anschließend interpoliert. Durch die Interpolation ist es möglich, auch Stile zwischen z.B. halbfett und fett zu erzeugen.
Die Interpolation kann in sehr kleinen Schritten entlang verschiedener Designachsen erfolgen, z.B der Breitenachse. Dadurch entsteht eine riesige Abstufung der möglichen Stile.

Instanzen bleiben!
Auf die Instanzen von herkömmlichen Schriften muss nicht verzichtet werden. Der Schriftgestalter kann dem VF Instanzen wie Thin, Regular und Bold mitgeben. Auf diese wird zurückgegriffen wenn das Programm noch nicht mit dem VF-Format umgehen kann.

Die OpenType Version 1.8 soll laut den Entwicklern so schnell wie möglich zum Typografiestandard im Web werden. Hierfür benötigt es allerdings noch technische Unterstützung der Betriebssysteme und Softwareprogramme. Einige Browser wie Chrome und Safari unterstützen VF und ermöglichen einen Test im Web und mit anderen digitalen Anwendungen.

Dennoch – der ursprüngliche Zweck der Technologie, eine Serie von Schriftstilen in einer einzigen Datei zu verpacken, wird längst übertroffen. Durch den Designraum eines VF entstehen weitaus faszinierendere Anwendungsfälle. Optische Größenvariationen, responsive Typografie oder die Darstellung von animierter Schrift sind nur einige der unerwarteten Vorteile von VF.

»I am now in an environment where the design space is by default way bigger than my ability to imagine it, not just my ability to do something with it.«
– Gerry Leonidas

Eine große Herausforderung in der Gestaltung und im Einsatz von VF ist der Designraum. Er entsteht durch das Interpolieren mindestens zweier Formen und beinhaltet alle interpolierbaren Formen eines VF. Je mehr Designachsen ein VF besitzt, desto größer und komplexer wird der Designraum. Einen Designraum mit mehr als drei Achsen darzustellen, ist schon sehr komplex (siehe Designraum der Acumin VC).
Dies liegt daran, dass wir in der Realität in einem dreidimensionalen Raum leben und wir uns alles, was darüber hinaus geht, nur schwer vorstellen können. Die Schriftentwicklung driftet hier schnell in die höhere Mathematik ab (Dazu mehr im Buch).

Das in der Mitte des Quaders liegende „A“ bildet die Ausgangsform für die Interpolation. Die abgebildete Schrift besteht aus drei Achsen, gekennzeichnet durch die orangenen „A´s“ und die orangenen Linien. Width (von o.n.u), slanted (von v.n.h) und Weight (von l.n.r.).
Die Kombination dieser Achsen werden durch die dunkelblauen „A´s“ abgebildet. Möchte man z.B. das  „A“ im rechten oberen Eck interpolieren, muss die Weight- und die Width-Achse auf das Maximum eingestellt werden.

Um auf die komplexe Darstellung von Designräumen zurückzukommen: Drei Achsen darzustellen ist relativ leicht. Komplex wird es, wenn der Designraum mehr als drei Dimensionen hat. Lucas de Groot demonstrierte das eindrucksvoll auf den TypoLabs 2018 in Berlin. Siehe ab Minute 36: https://www.youtube.com/watch?v=I75Efo7whrs&t=2628s.

Jeder Winkel des Designraums muss durchdacht sein. Die Mischung mehrerer Designachsen kann sonst zu unerwünschten Ergebnissen bis zur Zerstörung des Buchstabenskelletts führen. David Berlow zeigt dies an seiner Schrift „Decovar“. Die Mischung der fünfzehn Achsen führt schnell zur Unkenntlichkeit der Schrift. Sie zeigt aber auch das gestalterische Potenzial von VF auf. Es lässt sich jede Vektorgrafik in einer Schriftdatei verankern und visualisieren. Berlow zeigt dass am Font „Zycon“. Dieser beinhaltet Zeichen welche durch die Designachse animiert werden können.

Die im neuen VF-Dateiformat enthaltene Technologie OpenType Font Variations ermöglicht es Schriftgestaltern, eine Schriftfamilie mit bis zu 64.000 Abstufungen in Schriftstärke, -breite und Schriftlage zu versehen. Es kann jede erdenkliche Vektorform mit diesem Format visualisiert werden. Durch die Varianz ist der Gestalter nicht mehr an statische Schriftschnitte gebunden. Dies bietet ihm mehr Freiheit während des Gestaltungsprozesses.

01 Geringere Ladezeiten
Das Herunterladen einer Schriftart, welche sich nicht auf dem Endgerät befindet, nimmt Zeit in Anspruch, insbesondere wenn mehrere Schriftarten gleichzeitig auf einer Seite geladen werden müssen. VF erlauben es, Daten für theoretisch unendliche Schriftvarianten in einer einzigen Datei zu speichern. Dies ermöglicht das Darstellen von mehreren Schriften, ohne die Ladezeit durch zu viele Dateien zu verlängern.

02 Responsive Typografie
Webtypografie ist nicht mehr auf ein verankertes CSS-Framework beschränkt. Responsive Layouts bieten die Möglichkeit, kreative typografische Details einzubinden, welche im Web bisher nicht zu sehen waren. Layouts sind somit auch nicht mehr auf einen kleinen Bereich von Masterfonts beschränkt, welche vom Schriftdesigner definiert werden. Umbrüche können vermieden werden und die Schrift passt sich automatisch der Bildschirmbreite an.

03 Intelligente Gestaltung
VF bieten Potenzial für intelligente Websites, welche typografische und Layout-Anpassungen auf Basis individueller Benutzer vornehmen können. Das Nutzerverhalten könnte verwendet werden, um mögliche Verbesserungen der Seite über einen bestimmten Zeitraum hinweg zu testen. Diese Ergebnisse könnten dann von der Website selbst umgesetzt werden, um ein optimiertes, individuelles Erlebnis zu ermöglichen.

04 Anpassung an Bildschirmauflösung
Auf Bildschirmen mit niedriger Auflösung erscheint Schrift anders als auf einem Bildschirm mit höherer Auflösung. Je kleiner die Schriftgröße, desto weniger Details sind für den Betrachter erkennbar. Auf Bildschirmen mit geringer Auflösung können Gestalter durch VF die Lesbarkeit weiterhin gewährleisten. Optical Size ist nur eine Möglichkeit.

05 Kreative Freiheit
VF bieten dem Gestalter theoretisch unendlich viele Variationsmöglichkeiten. Das ermöglicht einen hohen Grad an typografischer Freiheit sowohl in traditionellen Printmedien als auch in digitalen Medien. Beispiele hierfür sind Detailanpassungen wie:

• die leichte Verdichtung der Breite einer Schrift für schmale Spalten
• die subtile Anpassung des Gewichts einer dünnen Schrift auf dunklen Hintergründen

06 Reaktion auf Umgebung durch Sensoren
Anpassung an die Distanz
Geräte mit der richtigen Hardware (Näherungssensoren) sind in der Lage VF-Achsen, wie Gewicht und Breite, abhängig von äußeren Einflüssen einzustellen. Die Folge wäre z.B. eine bessere Lesbarkeit aus größerer Entfernung.

Anpassung an Lichtverhältnisse
VF geben dem Gestalter die Möglichkeit, auf Änderungen der Lichtintensität zu reagieren. Nutzer wechseln öfters zwischen Bereichen mit starkem und schwachem Licht. Ein VF mit einer Achse für den Strichstärkenkontrast und eine für Optical Size, ermöglicht dem Nutzer das bestmögliche Leseerlebnis für die jeweilige Umgebung.

Anpassung an den Ton
Die Einstellung der Achsen kann in Verbindung mit Ton als kreatives Werkzeug verwendet werden. Mikroanimationen können in einem mobilen UI auf Ton reagieren.
VF ermöglichen jedoch auch mutigere Anwendungen wie kreative Achsenanpassungen für die Performancekunst und für das Setdesign.

07 Einfache Html-Einbindung
Die Browserunterstützung ist mit über 65% im zweiten Quartal 2018 recht gut. Aktuelle Versionen von Chrome und Safari (unter MacOS 10.13+), alle Browser unter iOS 11.2 und Chrome unter Android unterstützen es. Firefox hat die Integration in den Startlöchern und Edge wird in den nächsten Monaten folgen. Das ist alles ziemlich erstaunlich für eine Technologie, welche erst vor knapp zwei Jahren angekündigt wurde. In den folgenden Abschnitten wird Code gezeigt, welcher für die Integration von VF in Browsern benutzt werden kann.

Die Integration eines VF ist ziemlich einfach und nichts Ungewöhnliches, wenn man mit @font-face vertraut ist. Es muss lediglich das Schriftformat in woff2-Variationen oder Truetype-Variationen geändert werden (abhängig von der Schriftdatei).

Im Moment werden High-Level-Eigenschaften nur teilweise unterstützt. Um also zuverlässig auf die Funktionen des VF zugreifen zu können, müssen folgende Low-Level-Eigenschaften genutzt werden: font-variation-settings. Dort werden die vierstelligen Tags der registrierten Achsen verwendet.

Folgender Code ändert z.B. das Schriftgewicht auf 550 und die Breite auf 125 Prozent.

Natürlich kann es auch nicht registrierte Achsen in einem VF geben. Auf diese wird immer über die Eigenschaft "font-variation-settings" zugegriffen.

Ein Variabler Font kann weitaus kreativere Achsen beinhalten als eine Breiten- oder Stärkenachse. Um herauszufinden wo die Grenzen dieser Technologie liegen, habe ich eine Reihe von Versuchen mit ihr gemacht.
In zwei größeren Versuchen untersuchte ich die gestalterischen Möglichkeiten von Variablen Fonts.

Ein großer Vorteil von Variablen Fonts ist die Flexibilität. Durch die neue Technologie entsteht ein hoher Individualisierungrad der Schrift. Einen Schritt weiter gedacht kommt nach der Individualisierung die Erstellung der eigenen Schrift. Um diesen Gedanken auszureizen, soll im Rahmen des ersten Hauptversuches ein modularer VF entstehen, welcher als Tool zur Schriftentwicklung dienen kann.
Die Schriftdatei wird zu einem Schriftentwicklungs- Tool umfunktioniert. Durch die Bedienung der Schieberegler kann sich der Nutzer der Schrift seine eigenen Buchstaben gestalten.
Basierend auf einer Analyse von Grundmerkmalen von Schrift soll ein modulares Muster entwickelt werden, welches zur Buchstabengestaltung verwendet werden kann. Das Muster wird auf einen VF übertragen. Es entstand die [Modulip].

Die [Modulip] ist eine modulare parametrische Displayschrift. Ihre Funktion besteht darin, aus der Kombination verschiedener Module Buchstaben zu formen. Sie besitzt sechs Achsen. Jede steuert die Länge eines Rechtecks. Die Kombination dieser Achsen und somit der Rechtecke ergibt wiederum neue Buchstabenformen. Dabei ist es möglich, jedes Rechteck mit einer Abstufung von 200 Segmenten zu bewegen. Dies ermöglicht feinere Details und Abstufungen.
Anschließend sollten ausgewählte Designer mit diesem Tool, Schriften und Plakate gestalten, was zu sehr unterschiedlichen Ergebnissen führte.

Im Designraum der [Modulip] entstehen einige Zeichen. Es ist jedoch nicht möglich, mit diesem Muster alle Zeichen abzubilden. Die Zeichen können deshalb gedreht, gespiegelt oder ergänzt werden, um daraus andere Zeichen zu bilden. Das ”M“ ist z.B das Ergebnis einer Interpolation. Das ”W“ ist aus der Drehung um 180° des ”M“ entstanden. Es entstand mit jeder Kuration, trotz derselben Grundbedingungen, eine eigenständige Schrift. Dies liegt zum einen an der Grundvarianz durch die drei Versionen der [Modulip] und zum anderen durch den Personalisierungsprozess des Gestalters. Auffällig ist, dass die Gestalter es geschafft haben, Stilmerkmale zu entwickeln, welche sich durch das jeweilige Alphabet ziehen.

Neues entsteht durch Mischung! Kann die Font-Variations-Technologie und der Designraum eines VF zur experimentellen Schriftmischung genutzt werden?
Um diese unkonventionelle These zu prüfen habe ich vier Schriften – Neutral, Bello, Bodoni und Rockwell – in einem Variablen Font vereint. Dadurch entstand die Möglichkeit die Schriften durch die Interpolation miteinander zu mischen. Vorab – es entstanden interessante visuelle Ergebnisse.

Zunächst muss die Frage geklärt werden, wie diese Schriften überhaupt miteinander gemischt werden können. Um vier Schriften in einem VF zu vereinen, gibt es eine wichtige Regel. Die Anzahl der Ankerpunkte muss über dieselben Glyphen hinweg identisch sein (Siehe obenstehende Grafik). Das »A« der [Neutral] muss also gleichviele Ankerpunkte haben wie das »A« der Bello. Da ihr Schriftskelett aber unterschiedlich ist, ist die Form mit den meisten Ankerpunkten maßgebend für die Anzahl der Punkte. In diesem Fall ist das nicht wie erwartet die Bello, sondern die Bodoni. Die mikrotypografischen Details der Bodoni fordern einige Ankerpunkte.

Durch einen Vorversuch entstand die Erkenntnis, dass die Verteilung der Ankerpunkte, systematisch erfolgen muss. Eine willkürliche Verteilung erzeugt willkürliche Ergebnisse. Deshalb wurde sich für die Umsetzung des zweiten Versuches folgende Systematik überlegt:

• Die Ankerpunktverteilung wird vom anatomischen Aufbau der Buchstaben abgeleitet.
• Jeder Ankerpunkt hat buchstabenübergreifend denselben Bereich.
• Wenn ein Bereich des einen Buchstabens mehr Ankerpunkte hat als der Bereich des anderen Buchstabens, werden die überschüssigen Ankerpunkte übereinandergelegt.

Die modulare Kombinationen der Achsen in Illustrator CC ergeben ganz neue Buchstabenformen. Diese können wiederum durch einen Reinzeichnungsprozess zu neuen Entwurfsideen in der Schriftgestaltung führen. Es entstand ein Inspirationstool für neue Schriftformen.

Anschließend werden die entstandenen Formen untersucht und analysiert. Entstehen dadurch neue Mischformen? Für welchen Zweck können diese Formen verwendet werden? Eine Typisierung soll aufzeigen, welche Klassifikationen sich in der Mischschrift verbergen.

Durch die vielen Kombinationsmöglichkeiten der [Transform], entsteht ein großes Potenzial für die Entwicklung neuer Schriften.
Eine Schriftdatei wird zum Inspirationstool für neue Formen und Mischformen. Durch die Mischung der Achsen entstehen Unvorhersehbare Ergebnisse. Die dadurch entstandenen Formen bilden eine Grundlage für eine anschließend manuelle Ausarbeitung. Durch die Interpolatin entstehen insbesondere bei Schriftformen schnell Ungenauigkeiten. Deshalb müssen die Formen einen Weiterverarbeitungs- und Finalisierungsprozess durchlaufen.

Entwicklung
Ein Programm zur Erstellung von VF ist das Schriftentwicklungs-Tool Glyphs2. Hierfür gibt es von den Entwicklern ein Umfangreiches Tutorial. Siehe: https://glyphsapp.com/tutorials/creating-a-variable-font

Ich möchte hier kurz auf die Stärken und Schwächen der Erstellung eines VF mit Glyphs2 eingehen. Glyphs ist sehr einfach zu handhaben und übernimmt diemeisten Rechen-/Programmierleistungen automatisch im Hintergrund. Die Schriftentwicklung wird einem Laien damit sehr einfach gemacht. Es sollte jedoch nicht außer acht gelassen werden, dass es ein großes Wissen benötigt eine ordentliche Schrift zu entwickeln.

Variable Fonts zu entwickeln funktioniert ähnlich der Entwicklung von Multiple-Master Fonts. Nur braucht es bei einem VF einen Master weniger. Gezeichnet werden nur die Eckpunkte des Designraumes, alles was sich innerhalb des Raumes abspielt, sind mathematische Interpolationsergebnisse.
Zu beachten ist lediglich, dass die selben Buchstaben der unterschiedlichen Master die selbe Anzahl an Ankerpunkten haben. Ansonsten funktioniert die Interpolation nicht.

Export
Der Export unterscheidet sich ebenfalls kaum dem einer normalen Schrift. Es muss nur „Gx Variation-Fonts“ als Export-Format ausgewählt werden.

Test
Der Test hat mich bei meinen Versuchen manchmal an den Rand der Verzweiflung gebracht. In den gängigen Adobe-Anwendungen ist die Implementation bisher nur bei Adobe Photoshop CC und Illustrator CC erfolgt. Es gibt schon einige variable Systemschriften welche mit dem letzten Update von Photoshop und Illustrator mitgelifert wurden. Tippt hierfür einfach „var“ in das Schriftensuchfeld. Dieser Befehl zeigt euch alle installierten variablen Schriften. Die Slider der Schrift findet ihr in Illustrator in der rechten oberen Ecke der Zeichenpalette. Beim Klick auf das T-Symbol mit dem Schieberegler, öffnet sich die Schieberegler-Palette. Allerdings wird die Nutzung der Schriften von häufigen Programmabstürzen begleitet. Es ist jedoch zu hoffen, dass die Implementierung und Verbesserung der Applikationen rasch vorangeht. Schließlich investieren Adobe, Apple, Microsoft und Google eine Menge Zeit und Geld in die Entwicklung und Implementierung von VF.

Bisher ist es in Glyphs leider nur möglich ein VF mit maximal sechs Achsen zu erstellen. Aus einem Interview mit Rainer-Erich Scheichelbauer, einer der Entwickler von Glyphs, geht jedoch hervor, dass es bald möglich sein wird mehr als sechs Achsen zu hinterlegen. Einen genauen Zeitpunkt für dieses Update hat er nicht genannt.

Tipps & Tricks
Grundsätzlich empfiehlt sich die Seite glyphsapp.com. Dort gibt es umfangreiche Tutorials zur Schriftentwicklung und ein sehr aktives Forum. Dort findet ein regelmäßiger Austausch zwischen dem Entwicklerteam und den Nutzern von Glyphs.
Falls du mehr über das Thema Variable Fonts erfahren willst, sind folgende Links interessant:

• v-fonts.com
• axis-praxis.org
• variablefutures.com
• Alle Talks von den TYPOLaps 2018 auf youtube.com
• #variablefonts auf Instagram
• https://www.zeichenschatz.net/typografie/how-to-start-with-variablefonts-on-the-web.html

Tipp: Ein hilfreiches Plugin bzw. Script für Glyphs ist der Instance Slider. Es kann auf github.com heruntergeladen werden. Dieses Script ermöglicht es, den VF direkt in Glyphs zu testen.

Glyphs2 benutzt eine lineare Interpolation. Diese stößt schnell an ihre Grenzen.
Die Interpolationstechnik ist noch nicht ganz ausgereift und könnte mit der High-Order-Interpolation deutlich verbessert werden.

High-Order-Interpolation (HOI)
Die HOI ist eine erweiterte Interpolationsart. Vorgestellt wurde sie von der niederländischen Type Foundry „Underware.“ VF basieren bisher auf der linearen Interpolation. Die Ankerpunkte der Schrift folgen einer Geraden. Dies wird vor allem für Rundungen und Bögen ein Problem. Sie werden durch die lineare Interpolation verformt. Um dies zu verhindern, schlägt Underware vor, die Interpolation durch „Offcurves“ zu erweitern. Durch diese Hilfspfade werden die Endpunkte der eigentlichen Outline berechnet. Die erste Abb. rechts zeigt die bisherige Interpolation. Die zweite Abb. zeigt die Möglichkeiten der HOI. Die orangen Punkte sind die Offcurve-Points. Für die Zukunft der Schriftgestaltung würde dies bedeuten, dass der Schriftgestalter nicht mehr die Konturlinien, sondern die Interpolationskurven der Schrift zeichnet.
Siehe: https://www.underware.nl/blog/2018/04/say-hi-to-hoi//

Um herauszufinden, welche Kraft hinter der Open-Type- Spezifikation 1.8 liegt, muss die technische Integration weiterentwickelt werden. Nur wenn die technische Umgebung an VF angepasst wird, können sie in ihrem ganzen Umfang getestet werden. Layoutprogramme wie InDesign sollten sich der neuen Technologie annehmen. Glyphs muss mehr Achsen zulassen und auch die Art der Interpolation muss durch die HOI noch einmal überdacht werden. Aus dem Interview mit Rainer-Erich Scheichelbauer geht allerdings hervor, dass es für die Integration der HOI noch keine zufriedenstellende Lösung gibt.

Schriftgestalter müssen VF entwickeln, mit den Gestaltungsmöglichkeiten spielen und die Achsenvielfalt untersuchen, um herauszufinden, in welchen Bereichen sie sinnvoll eingesetzt werden können.

Mehr Wissen, Interviews, Experimente mit VF und ein Howto gibt es in meinem Buch „Very able fonts“.

Diese Arbeit und der Blog-Artikel ist im Rahmen des Bachelorstudiengangs Mediendesign von Philip Walch an der DHBW in Ravensburg und den zeroseven design studios entstanden.
Philip Walch hat für unseren Blog eine Zusammenfassung seiner Bachelorarbeit erstellt. Vielen Dank für diesen tollen und interessanten Beitrag.