
So funktionieren Variable Fonts in der Praxis!
Kreative sollten ihren Respekt vor Variable Fonts ablegen. Ob für Web oder Print, dynamisch oder statisch, sie können den Designprozess vereinfachen und das Ergebnis spannender machen

Dieses leichte Unwohlsein teilen nicht wenige Kreative, wenn sie das Aussehen einer nicht von ihnen selbst gestalteten Schrift mehr oder minder stark verändern – kam so etwas doch über Jahrzehnte einem Sakrileg gleich. »Tatsächlich sehen viele Typedesigner:innen es nicht gerne, wenn ihre Schrift verformt oder künstlich schräg gestellt wird«, so Luke Prowse, Gründer von NaN in Berlin. »Genau solche Praktiken spielten aber eine große Rolle für Designbewegungen von Punk über Grunge bis hin zu Acid – vielleicht sollten wir in diesem Fall nicht auf die Schriftgestalter:innen hören.« Bei Variable Fonts sieht die Sache aber etwas anders aus. »Hier haben sie ja selbst die ›Verformungen‹ gezeichnet, denen die Buchstaben ausgesetzt sind. Erstreckt sich ein Variable Font von ganz schmal bis ganz breit, haben die Typedesigner:innen Anfang, Ende und alles dazwischen mit viel Überlegung gestaltet.«
Dynamik fürs Web
Im Web spielen Variable Fonts ihre Stärken besonders gut aus: Weil sie die Ladezeiten einer Website verkürzen und fein abgestimmte Typografie ermöglichen, beispielsweise indem man Überschriften schmaler gestaltet, optische Größen für die verschiedenen Textgrößen wählt und die gesamte Typo proportional anlegt, sodass sie sich auf jedem Monitor in der entsprechend besten Größe präsentiert. Für NaN ist vor allem das große Animationspotenzial, das in variablen Schriften steckt, wichtig.
Dieses zeigt sich zum einen in mit Variable Fonts in After Effects erstellten Animationen, die dann auf der Website laufen. Wobei das Adobe-Tool sie noch immer nicht unterstützt und man Umwege über ein Plug-in gehen muss. Zum anderen ist es die ihnen innewohnende Dynamik, die ihre Anwendung spannend und dabei einfach macht. »Variable Fonts lassen sich in Websites mit Standard-CSS nutzen und animieren – zum Glück, denn ich kann nur HTML und CSS«, sagt Thierry Blancpain. »Man beschreibt den Anfangszustand, etwa Weight: 100, Width: 50, den Endzustand, zum Beispiel Weight: 900, Width: 150, sowie die Dauer, und dann animiert der Browser das automatisch.«

Christian Leuenhagen findet Variable Fonts vor allem für Interaktionen interessant. »Mit der Slant-Achse kann man mittels Hover-Effekt den Grad der Kursiven verändern oder mit der Grade-Achse die Strichbreite (Stroke Width), ohne dass sich die Breite des Texts ändert.« So etwas schaffe schöne, überraschende Momente in der User Experience und ließe sich mit Variable Fonts in CSS leicht bewerkstelligen.

Leichteres Arbeiten in Figma und InDesign
Denkwerk nutzt Variable Fonts gerne bei der Arbeit mit den UI-Design-Tools Sketch und Figma. »Gerade in Letzterem gibt es gewisse Voreinstellungen, an denen man sich orientieren kann, das bietet einen guten ersten Aufschlag«, sagt Christian Leuenhagen. »Man kann ja trotzdem seine eigenen Zwischengrößen wählen. Gleichzeitig Freiheit und eine gewisse Führung durch die Software zu haben ist praktisch und bequem.« So kann man bei Kundenpräsentationen oder in der Zusammenarbeit mit Developer:innen in Figma mit Variable Fonts direkt zeigen, was möglich ist oder welche Strichstärke die richtige ist, ohne mit statischen Fonts tricksen zu müssen.

Björn Münker ist Senior Software Developer bei Struggly. Er erinnert daran, auch bei variable Schriften die Dateigrößen im Kopf zu behalten: »Variable Fonts ermöglichen es, alle benötigten Schnitte einer Schriftfamilie mit einer einzigen Anfrage vom Server zu laden – das ist gut für die Performance, da der Browser nicht wie bei statischen Fonts eine Datei pro Schnitt laden muss –, führt aber zu einer einzelnen, vergleichsweise größeren Datei.« Moderne Browser könnten Variable Fonts in dem stark komprimierten Containerformat woff2 laden. Müssten allerdings ältere Browser unterstützt werden, kämen nur weniger komprimierte Formate wie woff und ttf infrage. »Ein komplexer Font wie die Roboto Flex wird da schnell mehrere Megabyte groß – der Performancevorteil geht dann eventuell verloren. Je nach Anzahl der tatsächlich genutzten Schnitte kann die statische Version dann doch die bessere Wahl sein.« Ideal fände Björn Münker einen Custom Variable Font, der nur die benötigten Varianten enthält. Die Google-Fonts-Library lässt Entwickler:innen bereits heute über ihre API Teile eines Variable Fonts auswählen und nur diese laden.

Auch in Printanwendungen können variable Fonts die Arbeit erleichtern. Wie unkompliziert sie sich in InDesign nutzen lassen, erfuhr PAGE-Artdirektorin Christine Krawinkel, als sie die Designerin Katja Rajewski bei der Gestaltung des Programmhefts für die altonale unterstützte, deren Keyvisual – ein versales A – als Variable Font angelegt war: »Ich hatte vorher noch nie mit Variable Fonts gestaltet und dachte insgeheim: Oje. Und dann war es verblüffend einfach und machte richtig Spaß.« Man braucht in InDesign nur neben dem Auswahlfenster für den Schriftschnitt auf »tT« zu klicken, um im dann erscheinenden Fenster per Regler die Achsen des Fonts, in diesem Fall Weight und Width, zu verstellen. »Ich konnte das A extrem verzerren, und es passte immer genau ins Raster. Mit drei statischen Schnitten hätte ich viel mehr schieben und fummeln müssen, mit dem Variable Font war es immer ganz exakt. Das erleichtert das Layouten natürlich enorm«, so Christine Krawinkel.

Fehlender Support und schwierige Lizenzen
Das eine oder andere Problem gibt es dennoch. »Nicht alle Designprogramme unterstützen Variable Fonts, vor allem der fehlende Support von After Effects ist schmerzhaft und mühsam«, sagt Thierry Blancpain. Auch das Lizenzmodell mag ihren Einsatz bremsen. In der Regel gibt es sie beim Kauf einer ganzen Schriftfamilie dazu – das kann je nach Größe teuer werden. Aus Sicht der Foundries ist es nachvollziehbar, dass man den Variable Font, der ja alle anderen Schnitte enthält, nicht einfach herschenken will.
»Zum Glück entwickeln sich unsere Tools weiter und ebenso das Wissen der Kreativen im Umgang mit Variable Fonts«, sagt Luke Prowse von NaN. »Das wird künftig verschiedene Modelle ermöglichen, wie zum Beispiel speziell auf Kundenwünsche zugeschnittene Variable Fonts oder solche mit einem reduzierten Designspace.« Normalerweise bietet NaN zu jeder Unterfamilie den jeweiligen Variable Font, sodass man nicht die ganze Großfamilie kaufen muss. Mittlerweile gibt es auch jede Menge kostenloser variabler Google Fonts, die beim Einstieg helfen und Kunden von den Vorteilen der Technologie überzeugen können. Entscheidet sich ein Unternehmen für einen Custom Font, sollte man diesen – mit Blick auf die zunehmende Dynamisierung von Brands – auch gleich in einer variablen Variante gestalten lassen.
Mehr als ein schönes Topping
Noch sei es nur eine kleine Gruppe von Designer:innen, die Variable Fonts für ihre Gestaltungen nutzen, meint Jacob Heftmann. In seinem Studio Twenty Nine in New York, das die Variable-Font-Site für Figma entwickelte, seien es nur 10 bis 15 Prozent der Projekte, die solche Schriften verwendeten. »Viele Kreative und Kunden haben neben den offensichtlichen Effekten – toll, man kann von Sans zu Serif wechseln – noch nicht den wirklichen Benefit von Variable Fonts verstanden. Sie werden nicht als fundamentaler Aspekt der Designexperience gesehen, sondern mehr als nettes Topping.«
Thierry Blancpain ist überzeugt, dass in fünf bis zehn Jahren die Mehrheit aller Designer:innen und Developer:innen variable Schriften verwenden wird. »Dabei werden nicht alle die spezifischen Features voll nutzen: Typografieaffine Kreative, die in dieser Hinsicht up to date sind, können dann das Format ausreizen und tolle Anwendungen entwickeln.« Wir alle sollten uns die Empfehlung von NaN zu Herzen nehmen: »Seid nicht schüchtern! Variable Fonts sind kein Hexenwerk, sondern normale Schriften, nur leistungsfähiger und lustiger.«
Konturen anpassen
Björn Münker, Senior Software Developer bei Struggly, erklärt den Umgang mit Variable Fonts in CSS und warum die Verwendung der variablen GT Maru von Grilli Type bei der Entwicklung der Lernplattform Struggly so praktisch war.

Variable Fonts definieren wir zunächst wie herkömmliche Fonts in CSS per @font-face – teilen dem Browser aber mit, dass es sich um einen variablen Font handelt. In unserem Fall wird eine mögliche Range für die Schriftstärke definiert: alle Werte zwischen 200 und 900.
Mit einer Abfrage kann man herausfinden, ob ein Browser Variable Fonts unterstützt. Abgesehen von Internet Explorer lässt sich eine solche Abfrage ebenfalls direkt in CSS umsetzen:
@supports (font-variation-settings: normal) {
/* Der Browser unterstützt Variable Fonts */
}
Je nachdem, welche Achsen im Font definiert sind, etwa Stärke (Weight), Breite (Width), Neigung (Slant) oder auch Farbe (Color), kann man diese nun ansprechen und frei kombinieren. In unserem Fall – der GT Maru – sind für die CSS Property font-weight nun nicht nur wie bei herkömmlichen Schriften fixe Werte wie 500 oder Light möglich, sondern alle Werte zwischen 200 und 900. Beispiel:
.text {
font-weight: 540; /* setzt die Schriftstärke exakt auf den Wert 540, also irgendwo zwischen dem herkömmlichen Medium und Bold */
}
So können wir die Schriftstärke stufenlos definieren und in unserem Fall die Outlines der Buttons perfekt auf die Zahlen und Rechenzeichen anpassen, die alle aus der variablen Version der GT Maru gesetzt sind. Bei Verwendung von statischen Fonts hätten wir uns hier vermutlich zwischen Medium und Bold entscheiden müssen, auch wenn die für uns perfekte Stärke irgendwo dazwischen liegt.
Da variable Fonts eine Vielzahl von Achsen enthalten und Typedesigner:innen diese teils frei benennen können, ist es nicht möglich, jede Achse mit einer bestehenden CSS Property anzusprechen. In solchen Fällen kann man stattdessen die Property font-variation-settings nutzen, mit der sich dann auf alle vorhandenen Achsen zugreifen lässt. Eine Achse wird dabei immer mit einer vierstelligen Buchstabenkombination angesprochen (beispielsweise wght für Weight), gefolgt vom Wert, der für diese Achse gesetzt werden soll.
.text {
font-variation-settings: “wght” 540; /*entspricht font-weight: 540, nutzt aber font-variation-settings für den Zugriff */
}
.special-text {
font-variation-settings: “wght” 540, “slnt” 10; /* spricht zwei Achsen an, die Schriftstärke und die Neigung (in Grad) */
}

Dieser Artikel ist in PAGE 01.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.