PAGE online

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

Variable Font Roboto Next in der Anwendung
Die Headline und das Zitat unten sind im Variable Font der Roboto Next gesetzt

Auch rund fünf Jahre nach Erscheinen der ersten variablen Schriften sind sie in Gestaltungsprojek­ten noch eher die Ausnahme als die Regel. Warum, das lässt sich nur vermuten: Kreative denken vielleicht, die Technik nicht richtig im Griff zu haben und bei der Arbeit mit ihnen Fehler zu machen, Brands könnten befürchten, die Darstellung auf ihrer Website nicht hun­dertprozentig kontrollieren zu können. Thierry Blanc­pain, Mitgründer der Foundry Grilli Type, sieht das allerdings entspannt: »Im Vergleich zu frü­heren neuen Schrifttechnologien sind wir mit Va­riable Fonts schon ziemlich weit. Das OpenType-Format wurde 1996 vorgestellt, der erste OpenType-Retail-Font kam aber erst 2001 heraus, und es dauerte noch einmal vier Jah­re, bis sich OT-Fonts unproblematisch einset­zen ließen. Wir sind heute nur einfach ein anderes Tempo gewohnt.«

Variable Font Roboto Next in der Anwendung in Form eines Zitates von Luke Prowse: »Variable Fonts sind kein Hexenwerk, sondern normale Schriften, nur leistungsfähiger und lustiger.«
Luke Prowse, Gründer von NaN, Berlin

Als denkwerk vor Kurzem für einen Kunden eine White-Label-Plattform entwickelte und dabei dessen Corporate Font ersetzen musste, kam der Digitalagentur der Variable Font der Roboto Flex gerade recht. »Wir konnten diesen sehr weit an die Hausschrift des Kunden anpassen, sodass es keine Probleme mit Laufweiten von Texten oder Grauwerten von Headlines gab«, erklärt Design Director Chris­tian Leuenhagen. Die zwölf Achsen des von Font Bureau entwickel­ten Google Fonts fand er beeindruckend, aber auch ein bisschen einschüchternd: »Die Fette, die Lauf­wei­te oder den Grad der Kursiven anzupassen ist hän­del­­bar. Aber die Verlängerung der Ober- und Unterlängen etwa führt zu einer deutlichen Charakterveränderung der Buchstaben. So etwas gehört eher in die Hände erfahrener Schriftg­estal­te­r:innen.«

 

Typografie: Variable Font Unbounded von NaN und Koto
Für die Web3 Foundation entwickelte NaN aus Berlin zusammen mit der Agentur Koto für die Blockchain-Plattform Polkadot den Open-Source-Font Unbounded in sechs Schnitten und als Variable Font. Auf https://unbounded.polkadot.network  gelangt man zur Animation auf der linken Seite und dem zugehörigen Code

Dieses leichte Unwohlsein teilen nicht wenige Kre­a­tive, 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 Typedesi­g­ne­r:in­nen 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 Prakti­ken spielten aber eine große Rolle für Designbewegun­gen von Punk über Grunge bis hin zu Acid – vielleicht sollten wir in diesem Fall nicht auf die Schriftge­stal­ter: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 Typedesi­gne­r:innen Anfang, Ende und alles dazwischen mit viel Überlegung gestaltet.«

Typografie: Variable Font Unbounded von NaN und Koto

Dynamik fürs Web

Im Web spielen Variable Fonts ihre Stärken besonders gut aus: Weil sie die Ladezeiten einer Website verkür­zen und fein abgestimmte Typografie ermöglichen, beispielsweise indem man Überschriften schmaler ge­staltet, optische Größen für die verschiedenen Text­­größen wählt und die gesamte Typo proportional an­­legt, so­dass 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 Schrif­ten 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 in­­newohnende 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.«

Typografie: Microsite für Variable Fonts / Figma
Seit etwa sechs Monaten unterstützt Figma Variable Fonts. Um dies bekannt zu machen, gestaltete die New Yorker Agentur Twenty Nine eine Microsite, die nicht nur informativ ist, sondern durch ihre spielerischen Animationen – fährt man mit der Maus über die Zeilen, verändern sich Größe oder Gewicht – Lust aufs Thema macht. Wer will, kann sich eine Playground-Datei herunter­laden und in Figma selbst Verschiedenes ausprobieren

Christian Leuenhagen findet Variable Fonts vor al­lem 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.

Typografie: Figma Voreinstellungen für Variable Fonts
Figma bietet Voreinstellungen für die genutzten Variable Fonts: So hat man gewisse Leitplanken, was viele Kreative als angenehm empfinden

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äsentatio­nen oder in der Zusammenarbeit mit Develo­pe­r:in­nen 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.

Typografie: Auf der Figma Microsite kann man verschiedene Variable Fonts ausprobieren
Auf der Figma-Microsite kann man gleich verschiedene Variable Fonts ausprobieren, wie zum Beispiel die WT Zaft von WiseType

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 komprimier­ten Containerformat woff2 laden. Müssten allerdings äl­tere 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 Tei­le eines Variable Fonts auswählen und nur diese laden.

Typografie: Erscheinungsbild für die Hamburger atonale, dessen Keyvisual ein Variable Font A ist.
Die Agentur Bräutigam & Rotermund entwickelte das Erscheinungsbild für die altonale, viele andere Kreative führten es aus. So wurde es ebenso heterogen und lebendig wie das Hamburger Kulturfestival. Das Keyvisual, ein A als Variable Font, hält die Identity zusammen. Dank der Möglichkeit, Weight und Width extrem zu verändern, tritt es ganz unterschiedlich auf – passt aber immer exakt ins Raster

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 Ra­jewski 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 Fens­ter 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 Ras­ter. 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.

Variable Font A in der Anwendung für die altonale Hamburg
Als dann noch das Keyvisual für das internationale Festival der Straßenkünste STAMP dazukam – ein S als Variable Font –, legte Christine Krawinkel beide Buchstaben dünner an – und zack: Sie passten bequem nebeneinander

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 wer­den. 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 zu­ge­schnit­te­ne 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 kos­tenloser va­ria­b­ler Google Fonts, die beim Einstieg helfen und Kunden von den Vorteilen der Techno­lo­gie überzeugen können. Entscheidet sich ein Un­ter­­nehmen für einen Cus­tom Font, sollte man diesen – mit Blick auf die zunehmende Dynami­sierung von Brands – auch gleich in einer variablen Variante gestalten lassen.

Mehr als ein schönes Topping

Noch sei es nur eine kleine Gruppe von Designe­r:in­nen, 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 Se­rif 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 leis­tungsfä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 Font GT Maru für die Lernplattform Struggly
Durch die Verwendung der GT Maru als Variable Font ließen sich Schrift und UI Design detailliert und stufenlos aufeinander abstimmen. Hier passt die Strichstärke von Typo und Kontur

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.

  @font-face {
  font-family: “GT Maru”;
  src: url(“GT-Maru-VF.woff2”) format(“woff2”) tech(“variations”),
  url(“GT-Maru-VF.woff2”) format(“woff2-variations”);
  font-weight: 200 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 Wer­te 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 perfek­te 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 Buch­stabenkombination angesprochen (beispielsweise wght für Weight), gefolgt vom Wert, der für die­se Achse ge­setzt 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) */
}

Variable Font GT Maru für die Lernplattform Struggly. Font auf dunklem Hintergrund
Bei der Verwendung auf dunklen Hinter­gründen wird die Schrift fetter dargestellt, sodass sie optisch genauso groß wirkt wie auf hellen Hintergründen

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

PDF-Download: PAGE 01.2023

Excel Yourself! Design & Beratung ++ Making-of: Innovative Mathe-Lernplattform ++ Botanical Branding ++ ENGLISH SPECIAL Studio Safar ++ Trend: Übersinnliches ++ Corporate Font BMWTypeNext ++ Zoom-Illustrationen: Tools & Tipps ++ Variable Fonts in der Praxis

9,90 €
AGB

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren