In diesem Artikel werden wir über variable Schriften sprechen und erklären, warum sie ein interessantes, nützliches, aber unterschätztes Werkzeug sind. Wir werden auch ihre Nachteile und die Feinheiten der Arbeit mit ihnen behandeln.
Der Artikel behandelt die folgenden Themen:
- Entstehungsgeschichte
- Technische Besonderheiten
- Vor- und Nachteile
- Nutzungsspezifika
- Beispiele für kreative Anwendungen
Entstehungsgeschichte
Beginnen wir mit der Geschichte der Entwicklung der Technologie variabler Schriften.
Ende der 1980er Jahre stellte Adobe das PostScript-Format vor, und Apple präsentierte das TrueType-Format für die Entwicklung von Schriftendateien. Beide verwendeten Bézier-Kurven zur Konstruktion von Zeichen. Diese Formate verwenden wir bis heute in aktualisierten Formen, wenn wir mit Schriftendateien arbeiten.
1991 stellte Adobe die Multiple-Master-Technologie als Erweiterung des PostScript-Formats vor. Sie ermöglichte es, mehrere Konturvarianten für eine Glyphe in derselben Schriftendatei zu speichern. Diese Varianten waren die Endpunkte auf einer Skala, zwischen denen man Zwischenwerte finden konnte, beispielsweise um das Gewicht oder die Breite zu ändern.
Um eine solche Schrift zu verwenden, musste zunächst ein statisches Schriftbild mit einem speziellen Programm (Adobe Type Manager) generiert und dann ins System hochgeladen werden, um es in einem Grafikeditor zu nutzen. Aufgrund der Komplexität der Nutzung wurde dieses Format nie populär, und Schriftendesigner setzten weiterhin auf statische Schriftbilder.
1997 stellten Adobe und Microsoft gemeinsam die OpenType-Technologie vor. Diese basierte auf dem TrueType-Format, erlaubte jedoch die Implementierung einer viel größeren Anzahl von Zeichen (65.000, zuvor war die Grenze 256). TrueType ermöglichte auch OpenType-Funktionen, ohne die wir uns moderne Schriften heute nicht mehr vorstellen können. Dazu gehören die Unterstützung von Kapitälchen, Tabellenziffern, Hochstellungen, stilistische Sets, kontextbezogene Alternativen und mehr. Das OpenType-Format ist bis heute das populärste.
Im Jahr 2016 kündigten Adobe, Apple, Google und Microsoft die neue Version des OpenType-Formats an — OpenType Font Variables. Seitdem können Schriftendesigner Informationen über mehrere Schriftbilder einer Schriftfamilie in einer einzigen Datei speichern. Der entscheidende Punkt dieses Formats ähnelt Multiple Master, hat jedoch einen wesentlichen Unterschied: Statische Schriftbilder müssen nicht mehr im Voraus generiert werden. Parameter können direkt im Grafikeditor eingestellt werden.
Technische Besonderheiten
Schauen wir uns genauer an, wie sich dieses Format vom klassischen OpenType unterscheidet.
Wenn ein Designer eine Schriftfamilie kauft, beispielsweise eine serifenlose Schrift mit neun Gewichten, erhält er oder sie neun separate Schriftendateien. Diese Schriftbilder wurden zuvor von einem Schriftendesigner vorbereitet, und die Gewichte wurden so berechnet, dass die Breiten schrittweise vom leichtesten zum fettesten angeordnet sind.
Eine variable Schrift hingegen besteht aus nur einer Datei, und der Bereich der Schriftbilder ist nur durch die dünnsten und fettesten Varianten begrenzt. Der Designer kann jede beliebige Variante dazwischen auswählen.
Wenn man in eine Schrift hineinschaut, sieht man, dass jedes Zeichen Ankerpunkte hat, auf denen es aufgebaut ist. Wenn die Anzahl dieser Punkte in den leichtesten und fettesten Schriftbildern gleich ist, kann das Programm sie verbinden und die Zwischenpositionen berechnen. Die Schriftenentwicklung ist natürlich nicht so einfach und direkt, und oft müssen mehr als zwei Master angegeben werden, aber dies beeinflusst die Benutzererfahrung nicht.
Der Bereich zwischen zwei End-Schriftbildern wird als Achse bezeichnet. In Grafikeditoren wie Adobe sieht dies wie ein Schieberegler aus, mit dem der gewünschte Wert eingestellt werden kann.
Variationsachsen-Optionen
Die erste Variante ist die Gewichtsachse, die bereits beschrieben wurde. In den meisten Schriftfamilien gibt es mehrere Schriftbilder mit unterschiedlichen Gewichten, und theoretisch können sie alle variabel sein.
Stellen Sie sich vor, Sie haben eine reguläre Schriftfamilie gekauft und planen, sie für ein Buch oder eine Website mit einem großen Textumfang zu verwenden. Sie wissen, welches optimale Gewicht der Haupttext haben sollte, damit er angenehm zu lesen ist. Aber Sie haben ein Problem: Das reguläre Schriftbild der Familie wirkt zu leicht, und das nächste, sagen wir Medium, wirkt zu fett. Ein Gewicht zwischen Regular und Medium wäre perfekt, existiert aber nicht. Mit einer variablen Schrift könnten Sie den Schieberegler im Editor bewegen oder einen benutzerdefinierten Wert in CSS angeben, um es zu erstellen.
Die nächste häufige Achse ist die Breite der Schrift. In statischen Familien gibt es mehrere Breitenoptionen, zum Beispiel Normal, Condensed oder Extended. In der variablen Schrift können Sie die benötigte Breite manuell zwischen der schmalsten und der breitesten Variante auswählen.
Diese Einstellung kann nützlich sein, wenn Sie Text in schmalen Spalten setzen, die so viel Text wie möglich aufnehmen müssen. Die normale Breite ist für diesen Zweck zu breit, und die schmale ist für das Lesen großer Texte unpraktisch. Eine variable Schrift würde es Ihnen ermöglichen, das Schriftbild etwas schmaler zu machen, ohne die Lesbarkeit zu beeinträchtigen.
Die dritte Achse ist die Neigung. Sie ist anwendbar, wenn die Zeichen im geneigten Schriftbild genauso konstruiert sind wie im aufrechten. Diese Variante findet sich meistens in serifenlosen Schriften.
Sie können den Neigungswinkel selbst wählen und so regulieren, wie stark sich dieses Schriftbild im Text abhebt. Diese Option ist nützlich, wenn Sie einen großen Textblock in einem geneigten Schriftbild setzen müssen, ohne den Leser zu stören.
Schließlich gibt es eine weniger verbreitete, aber ebenfalls in das OTF-Var-Format eingebettete Achse: die optische Größenachse.
Sie haben vielleicht Display- und Text-Unterfamilien in variablen Schriften gesehen. Die erste zeichnet sich in der Regel durch höheren Kontrast, mehr Details und engere Abstände aus. Display-Schriftbilder werden in Titeln, Plakaten und anderen Fällen verwendet, in denen große Textgrößen benötigt werden.
Die Text-Unterfamilie hat hingegen niedrigeren Kontrast und weniger Details. Insgesamt ist sie in kleineren Größen und bei großen Texten besser lesbar.
In einer variablen Schrift können Sie eine Zwischenstufe generieren, die in kleinen Größen immer noch gut lesbar ist, aber raffinierter als ein einfaches Text-Schriftbild. Diese Variante wäre beispielsweise ideal für kleinere Titel.
Wir haben nun die Achsen behandelt, die von den Formatentwicklern implementiert wurden. Für sie wurden spezifische Namen entwickelt:
- wght — Gewicht
- wdth — Breite
- slnt — Neigung
- ital — Kursiv
- opsz — optische Größe
Schriftendesigner können jedoch auch ihre eigenen Achsen erfinden und implementieren.
Es gibt fertige Beispiele, bei denen sich die folgenden Parameter ändern: Serifenlänge, Höhe von Klein- und Großbuchstaben, Höhe von Ober- und Unterlängen, Kontrast usw.
Eine Schrift kann natürlich auch dekorativ verändert werden. Hier ist nur die Vorstellungskraft des Autors die Grenze.
Stellen Sie sich vor, eine Achse bietet Ihnen tausend Optionen für Schriftbilder. Wenn Sie zwei Achsen haben, gibt es nun eine Million Optionen. Mit benutzerdefinierten Achsen werden die Schriftmöglichkeiten unendlich.
Zusammenfassend lässt sich sagen, dass mit variablen Schriften fast jede typografische Aufgabe gelöst werden kann.
Vor- und Nachteile variabler Schriften
Lassen Sie uns nun einige Probleme besprechen, die bei der Verwendung variabler Schriften auftreten, sowie interessante Anwendungsfälle.
Es sollte auch angemerkt werden, dass die Technologie variabler Schriften seit vielen Jahren existiert. Während die Technologie der Schrifteditoren erheblich vorangeschritten ist und variable Schriften viel einfacher zu erstellen sind, sind sie immer noch nicht sehr populär oder weit verbreitet. Dies bedeutet, dass entweder noch kein Bereich existiert, in dem sie genutzt werden können, oder dass das Produkt selbst nicht der Marktnachfrage entspricht, oder dass die Werkzeuge ihre Nutzung nicht ermöglichen. Derzeit unterstützen nicht alle Grafikeditoren und Browser variable Schriften — zum Beispiel unterstützen nicht alle Browser Design-Apps.
Der größte Nachteil variabler Schriften ist die geringe Qualität. Viele variable Schriften sind von mittelmäßiger Qualität und können daher in kritischen Momenten Probleme verursachen.
Ein weiteres Beispiel: Wenn Sie eine Website haben, die täglich eine Million Mal geladen wird und die gesamte Norms PRO-Familie verwendet, nimmt sie 5.306 KByte auf der Webseite ein. Wenn Sie die variable Version der Familie verwenden, benötigt sie nur 1.875 KByte. Schauen Sie sich die Tabelle unten an. Bei dieser enormen Anzahl an täglichen Aufrufen ergibt sich ein Gesamtunterschied von 3.272 GB, die vom Server geladen werden müssen. Für jeden einzelnen Ladevorgang ist dies zwar nicht besonders relevant, aber in der Summe macht es einen Unterschied.
Es ist auch zu beachten, dass die meisten variablen Schriften nicht gehinted sind. Dies ist ein schwieriger Prozess, der erlernt werden muss. Aus diesem Grund werden variable Schriften in kleinen Größen möglicherweise nicht immer korrekt dargestellt.
Wie man variable Schriften verwendet
Lassen Sie uns nun über die Verwendung variabler Schriften in der Praxis sprechen.
Schauen wir uns zunächst Adobe Illustrator an. Angenommen, Sie haben bereits einen Text eingegeben und möchten eine bereits installierte variable Schrift dafür auswählen. Solche Schriften haben ein „var“-Zeichen neben sich in der Liste. Übrigens hat Adobe in den neuesten Softwareversionen eigene variable Schriften installiert, sodass Sie sofort mit ihnen experimentieren können.
Sobald Sie eine variable Schrift ausgewählt haben, erscheint im Zeichenbedienfeld eine zusätzliche Schaltfläche „Variable Font“. Dahinter verbergen sich alle in der Schrift vorhandenen variablen Achsen, und Sie können die Parameter mit den Schiebereglern ändern. Die Ergebnisse sind sofort sichtbar. Andere Einstellungen in diesem Bedienfeld bleiben unverändert.
Sie können auch eines der Schriftbilder aus der Liste auswählen und diese Familie als statisch verwenden.
Der Prozess in Sketch ist absolut identisch, aber es gibt keine speziellen Markierungen neben variablen Schriften.
Variable Schriften können mit Hilfe von CSS im Web implementiert werden. Wir werden dies nicht im Detail behandeln, aber wir können uns ansehen, wie variable Schriften im Web integriert werden.
Hier sehen Sie, dass die Änderung der Eigenschaften variabler Schriften mit CSS Transitions möglich ist.
Diese Demo zeigt die Unterstützung für CSS Animation.
Und ein Beispiel, wie es möglich ist, jeden Buchstaben separat zu animieren.
Sie können mehr über die Verwendung variabler Schriften im Web in Richard Rutters Artikeln auf Medium lesen:
Get started with variable fonts — eine kurze, aber umfassende Einführung.
How to use variable fonts in the real world — Beschreibung der Probleme, die auftreten können, und wie man sie löst.
Beispiele für kreative Anwendungen
Schauen wir uns kreative Beispiele an — wie Sie variable Schriften mit etwas Fantasie verwenden können.
- Beispiel für das Strecken der Schrift in Abhängigkeit von der Größe des Containers.
- Beispiel für interessante Versuche, variable Schriften in AR (Augmented Reality) zu verwenden.
- Beispiel, wie sich eine Schrift in Abhängigkeit von der Betrachtungsentfernung verändern kann.
- Beispiel für die Anpassung der Schriftsättigung in Abhängigkeit von den Lesebedingungen, in diesem Fall der Beleuchtung.
Sie können einen Schritt weiter gehen und bewegte Bilder aus der Schrift erstellen, wie axis-praxis vorschlägt. Sie können sie sogar bunt machen, indem Sie mehrere Buchstaben übereinander legen, wie in Toshi Omagari Experimenten zu sehen ist. Dies geht jedoch natürlich über die ursprünglichen Zwecke der Schriftnutzung hinaus.
Nützliche Quellen
Wir möchten einige Ressourcen vorschlagen, wo Sie mit variablen Schriften arbeiten können.
Erstens, axis-praxis.org, das eine große Sammlung variabler Schriften bietet. Sie können dort auch Ihre eigene Schrift hochladen.
Zweitens gibt es v-fonts.com, wo Sie verschiedene Schriften in vereinfachter Form ausprobieren können.
Schließlich gibt es die großartige Website, die wir in unserer Arbeit aktiv nutzen, um variable Schriften zu testen: dinamodarkroom.com von Dinamo. Dort können Sie nicht nur variable Achsen, sondern auch OpenType-Funktionen testen und statische Schriften mit definierten Parametern hochladen.
Anstelle eines Fazits
Variable Schriften haben das Potenzial, ein integraler Bestandteil der Schriftwelt zu werden. In den letzten Jahren wurde viel über sie gesprochen, aber sie sind noch nicht weit verbreitet. Derzeit sind sie Werkzeuge zur Lösung spezifischer Aufgaben. Wir müssen auch feststellen, dass immer mehr variable Schriften erscheinen. Sie werden die Welt erobern! Es ist nur eine Frage der Zeit!
