Variable Fonts: Starter Guide

Variable Fonts sprechen für einen variantenreichen Umgang mit Schrift. Der Start mit den interpolierbaren OpenType-Fonts kann jedoch mit Hürden versehen sein. Daher kommen hier einige hilfreiche Tipps, Downloads sowie Hinweise auf Tutorials und Beiträge, die sich intensiver mit Variable Fonts auseinandersetzen.

Variable Fonts
(Im Bild: Schriftart Recursive von Arrow Type, Zeichen-Fenster mit Einstellungen in InDesign sowie die Schriftart Noto Serif Display im „Type tester“ auf Google Fonts.)

Vor- und Nachteile von Variable Fonts

Das Praktische an Variable Fonts ist, dass lediglich eine einzige Font-Datei benötigt wird. Diese verhält sich wie viele Fonts, denn alle Varianten der Schrift sind bereits enthalten. Neben unterschiedlichen Strichstärken lässt sich durch Interpolation beispielsweise die Breite und ggf. auch die Neigung individuell einstellen.

Diese „große Freiheit“ will jedoch richtig genutzt werden. Wenn mehrere hundert Varianten einer Schrift zur Verfügung stehen, ist typografisches Fingerspitzengefühl gefragt. Schriftmischungen können sich erheblich aufwändiger gestalten. Zudem benötigen Webfonts in der Regel nicht den vollen Umfang mit allen Varianten der Schrift. Die Dateigröße spielt schließlich auch eine entscheidende Rolle.

Beispiel Variable Font Roboto Flex
Beispiel mit Roboto Flex (im Mai 2022 im Material Design Blog vorgestellt).

Außerdem wird oft nicht sofort ersichtlich, wo sich Strichstärken und Co. in Software-Programmen einstellen lassen und welche Apps das Fontformat und die OpenType-Technik überhaupt unterstützen. Daher kommt hier ein kleiner Starter Guide mit nützlichen Tipps und Ressourcen rund um Variable Fonts.

Variable Fonts in InDesign nutzen

Variable Fonts sind in InDesign – wie andere Schriften auch – über das Zeichen-Fenster erreichbar (Fenster -> Schrift und Tabellen -> Zeichen). Dieses lässt sich alternativ auch mit dem Tastaturkürzel „Strg+t“ (Windows) bzw. „Cmd+t“ (Mac) aufrufen.

Variable Fonts in InDesign erkennen

Erkennbar sind die Variable Fonts über das kleine Icon (großes „O“ mit „VAR“ davor) ganz rechts im Fenster. Je nach Font sind bereits einige Varianten direkt anwählbar. Möchte man jedoch individuelle Einstellungen vornehmen, dann klickt man einfach den kleinen Button neben dem Schriftmenü an.

Variable Fonts in InDesign einstellen

Daraufhin öffnet sich ein Fenster, in dem sich per Schieberegler eigene Einstellungen vornehmen lassen. Wie viele Anpassungen möglich sind, hängt vom jeweiligen Variable Font ab. Einige erlauben lediglich die Änderung der Strichstärke, andere hingegen bieten beispielsweise zusätzlichen Zugriff auf die Interpolation der Breiten-Achse oder der Schrägstellung.

Variable Fonts in Photoshop einstellen

Wie schon in InDesign, lassen sich Variable Fonts ebenfalls in Photoshop am entsprechenden Icon im Fenster „Zeichen“ ausmachen (siehe Abbildung). Das Fenster kann über das Menü „Fenster -> Zeichen“ aufgerufen werden.

Photoshop Variable Fonts erkennen

Um die Achsen eines Variable Fonts einzustellen, ist jedoch noch ein weiteres Fenster erforderlich. Über „Fenster -> Eigenschaften“ lassen sich im Abschnitt „Zeichen“ individuelle Einstellungen vornehmen. Je nach Umfang des Variable Fonts kann beispielsweise per Schieberegler oder im entsprechenden Eingabefeld Einfluss auf die Strichstärke, Breite oder Schrägstellung genommen werden.

Variable Fonts in Photoshop einstellen

Variable Fonts in Illustrator verwenden

Variable Font Icon Adobe hält auch in Illustrator an der Kennzeichnung von Variable Fonts fest. Im Fenster „Zeichen“ sind Variable Fonts an ihrem Icon zu erkennen.

Die Handhabung der Achsen ist praktisch identisch wie in InDesign: Über den kleinen Button neben dem Schriftmenü lässt sich ein Fenster öffnen, in dem sich Strichstärke und Co. per Schieberegler individuell anpassen lassen. In der entsprechenden Fontdatei ist hinterlegt, welche Achsen zum Variieren freigegeben sind. Das können bei dem einen oder anderen Variable Font mal mehr oder weniger sein.

Illustrator Variable Fonts

Detaillierte Einführungen

Um ein möglichst großes Spektrum abzudecken, kommen hier einige Verweise auf Beiträge, die sich detaillierter mit variablen Schriften auseinandersetzen und die eine oder andere Zusatzinfo enthalten:

Beitrag über Variable Fonts im Typolexikon

Das Typolexikon ist eine Fachenzyklopädie zur Typografie. Der deutschsprachige Beitrag von Wolfgang Beinert geht ausführlich auf Variable Fonts ein und liefert zudem auch einige Thesen.
zum Beitrag

Monotype-Beitrag

Die Evolution der Typografie

Jason Pamental schreibt über die Evolution der Typografie und beleuchtet in seinem Beitrag die Vorzüge der neuen Font-Technologie:
zum Beitrag

Die neuen Möglichkeiten mit Variable Fonts

Ralf Herrmann gibt auf Typografie.info einen Überblick über die 2016 eingeführte Technik und geht zudem auf Software-Unterstützung sowie Installation von variablen Schriften ein.
zum Beitrag

Very Able Fonts!

Eine visuelle Untersuchung des gestalterischen und kreativen Potenzials von Variablen Fonts liefert Philip Walch in seinem Beitrag, der im Blog von zeroseven.de erschienen ist.
zum Beitrag

Beispiele und detaillierte Infos von TypeNetwork

Mit Beispielen und englischsprachigen Erklärungen wartet TypeNetwork auf. Auf mehreren Seiten bzw. Kapiteln wird sich ausführlich den variablen Schriften gewidmet.
zum Beitrag

Mozilla Font Guide

Mozilla Variable Fonts Guide

Mozilla informiert ausführlich über die Verwendung von variablen Schriften.
zum Beitrag

Google Fonts Introduction to Variable Fonts

Was es mit variablen Schriften auf sich hat, erklärt Elliot Jay Stocks in seinem englischsprachigen Beitrag für Google Fonts.
zum Beitrag

Variablefonts.io

variablefonts.io

variablefonts.io informiert über die Nützlichkeit von variablen Schriften und hat dazu eine eigene Website gewidmet, die unter anderem auf Gestaltung sowie Einbindung eingeht.
zum Beitrag

Mit Variable Fonts experimentieren

Auf der Website Axis-Praxis lässt sich mit variablen Schriften experimentieren und Einstellungen über ein Panel vornehmen. zum Beitrag

Weiterführende Themen und Einsatzgebiete

Glyphs Variable Font Tutorial

Variable Fonts in Glyph erstellen

Wie sich variable Schriften erstellen lassen, erklärt der Hersteller des Font-Editors Glyphs in einem Beitrag. zum Beitrag

Optische Größen und variable Schriftarten

Robin Rendle informiert in seinem Beitrag über „Optical sizing“ von Schriften: zum Beitrag

Variable Fonts implementieren

Wie der Umgang mit Googles API oder das Selfhosting mit „@font-face“ funktioniert, beschreibt die Website variablefonts.io. zum Beitrag

CSS und Variable Fonts

CSS und Variable Fonts

CSS-Beispiele zur Integration von variablen Schriften auf Websites. zum Beitrag

variableFont.js

JavaScript-Library zum Umgang mit variablen Schriften mit opentype.js. zum Beitrag

Support in DirectWrite und Direct2D

Microsoft über die Unterstützung von Variable Fonts in DirectWrite und Direct2D. zum Beitrag

Download-Quellen für Variable Fonts

Hier einige Download-Verzeichnisse, die variable Schriften führen oder über neue Fonts berichten:

Variable Fonts auf MyFonts

MyFonts hat eine Liste mit kommerziellen Variable Fonts zusammengestellt. zur Website*

Google Fonts

Google Fonts

Alle kostenlos bei Google Fonts verfügbaren Variable Fonts gibt es hier in der Übersicht. zur Website

Early Access Google Fonts

Schriften vor Veröffentlichung ausprobieren und Feedback geben. zur Website

vfonts

v-fonts.com

Website zum Finden und Ausprobieren von variablen Schriften. zur Website

Variable Fonts auf Fontshare

Fontshare ist ein kostenloser Dienst für Schriftarten, der von der Indian Type Foundry (ITF) ins Leben gerufen wurde. zur Website

Variable-Font-Projekte

Eine Auswahl mit dokumentierten oder sehenswerten Projekten, bei denen auch Zusatzmaterial oder weitere Infos zur Gestaltung oder Entstehung bereitstehen:

Amstelvar

Eine parametrisch variable Schriftart von David Berlow. zum Projekt

Flexible

Flexible

Einer der vermutlich ersten »Variable Fonts«, bei dem sich die Breiten- und Höhenachse unabhängig voneinander anpassen lässt. zum Projekt

Decovar

Eine dekorative Variable-Fonts-Schriftart von David Berlow. zum Projekt

Roboto Flex Variable Font

Roboto Flex

Eine der beliebtesten Schriftarten auf Google Fonts hat ein umfangreiches Update von Font Bureau erhalten. zum Projekt

Recursive Font

Recursive

Die von Arrow Type gestaltete Schrift bietet vielfältige Möglichkeiten zum Anpassen und wird unter der SIL Open Font License 1.1 bereitgestellt. zum Projekt

 

Kommentieren

Ich akzeptiere die Datenschutzerklärung.