Jump to content
Postkarten-ABC zum Sammeln oder Verschenken …

Was sind variable Fonts?

Ralf Herrmann

Variable Fonts sind OpenType-Fonts, bei denen bestimmte gestalterische Eigenschaften (wie zum Beispiel Strichstärke, Weite, Neigung) auf Seiten der Schriftnutzer (zum Beispiel über Schieberegler) gesteuert werden können. Damit ist man nicht mehr zwingend auf bestimmte vorgefertigte Schriftschnitte wie normal, kursiv, fett usw. beschränkt. Da mittlerweile immer mehr entsprechende Fonts verfügbar sind und Browser und viele Designanwendungen variable Fonts unterstützen, wird die Technologie zunehmend für professionelle Designer interessant. Dieser Artikel gibt daher einen Überblick über die 2016 eingeführte Technik.

interpolation-basic.png

Die technische Grundlage der variablen Fonts bildet die automatische Interpolation von Buchstabenformen. Schriftgestalter entwerfen mindestens zwei unterschiedliche, aber in Bezug auf die Elemente (Ankerpunkte, Linien/Kurven) kompatible Buchstabenversionen und beliebige Zwischenschritte (»Instanzen«) lassen sich dann dynamisch errechnen. Entsprechende Anwendungen im Bereich der digitalen Schriften gab es bereits in den 1990er-Jahren. Apple stattete einige seiner TrueType-Schriften mit dieser Technik aus und Adobe vermarktete seine Version für PostScript-Schriften unter dem Namen Multiple Master. Beide Formate setzen sich jedoch nicht auf breiter Front durch.

Aller guten Dinge sind drei

Warum also ein neuer Anlauf im 21. Jahrhundert? Tatsächlich gibt es im Vergleich zu den Umsetzungen der 1990er-Jahre zwei wesentliche Unterschiede. Erstens haben wir es bei variablen Fonts nun nicht mehr mit einer Insellösung zu tun. In seltener Einigkeit wurde das Fontformat von Apple, Microsoft, Google und Adobe gemeinsam entwickelt und im Anschluss direkt in die OpenType-Spezifikation übernommen. Dies macht eine breite Software-Unterstützung viel wahrscheinlicher.

Zweitens entstand seit den 1990er-Jahren ein neues Einsatzgebiet, auf welches variable Fonts perfekt abgestimmt sind: Webfont-Anwendungen. Bei der Nutzung von Schriften über das Internet zählt jedes Kilobyte. Statt alle Fonts einer Familie einzeln zu laden, können bei variablen Fonts interpolierte Instanzen aus einer einzigen Fontdatei erzeugt werden. Dies kann die Ladezeiten deutlich verkürzen. Außerdem können variable Fonts so auf Websites eingebunden werden, dass sie dynamisch auf den jeweiligen Einsatz reagieren. So können zum Beispiel Überschriften auf einem Breitbildmonitor auch breit dargestellt werden, während sie beim Betrachter der gleichen Website auf einem hochkant gehaltenen Mobiltelefon automatisch eher schmal laufen.

squeeze.gif

Web-Demo von Mandy Michael. Je nach Bildschirmbreite wird dynamisch eine andere Schriftweite gewählt. Sämtliche Weiten entspringen einer einzige Fontdatei. 

Gestaltungsachsen

Die Variation der Buchstabenformen erfolgt entlang sogenannter Gestaltungsachsen. Fünf typische Achsen sind direkt im OpenType-Standard festgeschrieben:

  • Strichstärke (weight)
  • Weite (width)
  • Optische Größe (optical size)
  • Kursivformen (italic)
  • Neigung (slant)

 

emberly.gif

Klassisches Beispiel einer variablen Schrift mit zwei Gestaltungsachsen für Strichstärke und Schriftweite. 

 

Schriftgestalter können darüber hinaus jedoch beliebig viele andere Gestaltungsachsen definieren. Der Phantasie sind hier kaum Grenzen gesetzt. Die Änderungen entlang der Achsen müssen sich auch nicht zwingend auf alle Buchstaben gleichermaßen auswirken. Eine Achse kann zum Beispiel lediglich die Höhe der mittleren Querstriche von Großbuchstaben kontrollieren und kommt dann nur bei den passenden Großbuchstaben zur Anwendung. Auch kann sich das Design über eine Achse hinweg sprunghaft ändern, etwa wenn von aufrechten zu kursiven Buchstabenformen umgeschaltet wird oder wenn die Schrift zum Beispiel so fett wird, dass bestimmte Buchstabengestaltungen nicht mehr möglich sind und ein völlig anderes Skelett bekommen. 

shards.gif

Variabler Font Format Shards

 

Unter die Haube geschaut

Obgleich das Prinzip der Interpolation recht einfach ist – die Umsetzung innerhalb des Variable-Fonts-System ist äußert ausgefeilt.

Technisch ist jeder Buchstabe in einem variablen Font nur ein einziges Mal vollständig abgelegt, wie man es von einem herkömmlichen Font auch kennt. Die anderen, zum interpolieren genutzten Entwürfe werden lediglich in ihrer mathematischen Abweichung vom Grundbuchstaben definiert. Schriftgestaltern steht es aber frei, beliebige Zwischenschritte als eigenen Entwurf einzubinden. Dies vermeidet ein typisches Problem bei interpolierten Schriften zwischen lediglich zwei Extrempunkten (zum Beispiel light und black): die in der Regel meistbenutzten Instanzen in der Mitte der Interpolation (zum Beispiel regular) entstehen dann nur indirekt und können vom Schriftgestalter also auch nicht direkt gestaltet werden. Variable Fonts haben dieses Problem jedoch nicht, da die Schriftgestalter gegebenenfalls nötige Zwischenschritte in die Fonts einbauen können.  

inter.png

Die Schrift Inter kann die Strichstärke zwischen Light und Black interpolieren. Ein vom Schriftgestalter kontrollierter Regular-Schnitt befindet sich jedoch in der Mitte der Gestaltungsachse. https://rsms.me/inter/

 

Außerdem enthalten variable Fonts benannte Instanzen, die vom Schriftnutzer direkt angesprochen werden können. So kann der Schriftnutzer in einem variablen Font mit einer Gestaltungsachse für die Strichstärke weiterhin »regular«, »bold« usw. im Schriftmenü auswählen – wie er es bei herkömmlichen Fonts auch getan hätte. Diese Punkte entlang der Designachse werden vom Schriftgestalter vorausgewählt. Dies vermeidet, dass Schriftnutzer von der Fülle der Optionen erschlagen werden oder von den wie früher bei Multiple Master nur mit Nummern benannten Instanzen wie [000-535-123] verwirrt werden. Die unzähligen Zwischenschritte können vom Schriftanwender benutzt werden, müssen aber nicht.

indesign.png

Variable Fonts können in InDesign wie herkömmliche Schriftfamilien benutzt werden und tauchen mit Familienname und einzelnen »Schriftschnitten« auf. Die Schriftschnitte sind jedoch dynamisch generierte Instanzen. Das O-VAR-Logo im Fontmenü verrät, dass es sich um einen variablen Font handelt. 

 

Bei der Interpolierung von OpenType-Fonts kommt erschwerend hinzu, dass die Technik bereits über zahlreiche Funktionen (»OpenType features«) verfügt, die die Buchstabenformen und Metriken dynamisch beeinflussen. Auch diese müssen bei variablen Fonts natürlich in die Interpolationen mit einbezogen werden. So müssen etwa Unterschneidungswerte ebenfalls dynamisch berechnet werden. Auch kann zum Beispiel eine OpenType-Ligatur dynamisch zu- und abgeschaltet werden, je nach dem, an welchen Punkten der Gestaltungsachse sie Sinn macht und an welchen nicht. Die Komplexität der zusammenwirkenden Funktionen macht die technische Umsetzung natürlich nicht gerade einfach. Es verwundert daher nicht, wenn die Anwendungsprogramme, die variable Fonts bereits unterstützen, noch mit Kinderkrankheiten zu kämpfen haben oder wenn die Umsetzung in unterschiedlichen Anwendung noch nicht identisch ist. 

Software-Unterstützung von variablen Fonts

Im Webbereich werden variable Schriften bereits in allen gängigen Browsern (Chrome, Safari, Firefox, Edge, Opera) auf aktuellen Betriebssystemen unterstützt. Ihrem Einsatz steht also kaum etwas im Wege. Die CSS-Einbindung kann zudem so erfolgen, dass bei fehlender Unterstützung auf herkömmliche Fonts zurückgegriffen wird.  

 

Die klassischen Desktop-Designanwendungen von Adobe unterstützten variable Fonts ebenfalls:

  • Adobe Photoshop und Illustrator (seit CC 2018), InDesign (seit CC 2020).
  • CorelDRAW unterstützt variable Schriften ebenfalls seit der 2020er-Version.
  • Sketch unterstützt variable Fonts seit Version 59.

photoshop.png

In Photoshop sind die Schieberegler für variable Fonts etwas versteckt und finden sich in der Eigenschaften-Palette. In InDesign und Illustrator sind sie dagegen über einen Button in der Zeichenpalette erreichbar. 

 

Bei Office-Apps und andere Software-Bereichen (wie zum Beispiel Video-Bearbeitung) gibt es jedoch bislang kaum eine Unterstützung für variable Fonts.

Variable Fonts finden und installieren

Die Lizenzierung und Installation unterscheidet sich kaum von herkömmlichen Fonts – schließlich handelt es sich ja um reguläre OpenType-Fonts, die nur einfach mehr können. Hersteller kommerzieller Schriften werden den Nutzern sicherlich aus Gründen der Kompatibilität noch eine ganze Weile Einzelfonts und variable Fonts parallel anbieten. Denn variable Schriften sind nicht abwärtskompatibel. Der Einsatz des neuen Formats setzt also eine vollständige Softwareunterstützung voraus und für alle anderen Anwendungen werden die herkömmlichen Fonts zunächst weiterhin benötigt. Außerdem bleiben natürlich zehntausende bestehende Fonts weiterhin in Anwendung. Bestehende Schriftfamilien lassen sich theoretisch in Variable Fonts umarbeiten, aber der Aufwand dürfte immer nur dann überschaubar sein, wenn bei der Erstellung der Familie schon Interpolationstechniken zum Einsatz kamen und die unterschiedlichen Schnitte deshalb die nötige mathematische Kompatibilität mitbringen. Für viele, besonders ältere Schriften dürfte sich die Umarbeitung kaum lohnen und so manche Schrift existiert ja auch nur als Einzelfont und bietet daher gar keine Interpolationsmöglichkeiten. 

Auch ist zu bedenken, dass es variable Fonts unmöglich machen, durch den gezielten Kauf einzelner Schnitte aus einer großen Familie Geld zu sparen. Mit einer Lizenz für einen einzelnen variablen Font kauft man in der Regel die ganze Familie.

Bei den großen Reseller-Shops lassen sich variable Fonts leicht über die Suchfunktion finden. Hier zwei Beispiele:

 

googlefonts.png

Für die kostenlosen Schriften im Google-Fonts-Verzeichnis gibt es einen eigenen Filter und bereits eine stattliche Anzahl von Schriften:

Die Einbindung in eigenen Websites erfolgt genauso unkompliziert wie bei herkömmlichen Schriften. Man muss sich natürlich nun nicht mehr auf bestimmte Schriftschnitte festlegen. Über CSS-Deklarationen können beliebige Instanzen eines variablen Fonts generiert werden ohne dadurch die Ladezeit zu erhöhen. 

 

Wer die neuen Möglichkeiten einmal ausprobieren will, kann sich auf Websites wie Axis Praxis und V-Fonts umschauen. Dort werden jeweils eine große Anzahl variabler Fonts präsentiert und die Instanzen können in Echtzeit über Schieberegler generiert werden.

Wenn Schriftanwender das neue Format gut annehmen und die Software-Unterstützung ausgeweitet wird, ist es gut möglich, dass zumindest Schriftfamilien irgendwann ausschließlich als variable Fonts erscheinen werden.

  • Gefällt 4
  • sehr interessant! 2


Überschrift: Ein Versalalphabet mit 200 ausdrucksstarken Ligaturen
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.