Variable Fonts im Web finden

In aller Kürze: Variable Fonts sind Schriften, bei denen für unterschiedliche Breiten keine unterschiedlichen Schriftschnitte mehr benötigt werden. Alle Schriftinformationen sind in einer Datei, die mit verschiedenen Parametern variiert werden können. Genauere Details gibt es in diesem Typolexikon-Eintrag von meinem geschätzten Kollegen Wolfgang Beinert. Besonders empfehlenswert sind hier auch seine kritischen Thesen zum Thema, die sich in den 1,5 Jahren zwischen Artikelerstellung (März 2018) und heute (Ende 2019) noch nicht im Detail prüfen lassen.

Update Juni 2020: Google Fonts listet 39 Variable Fonts! Informationen zum Einsatz gibt es auf Web.dev.

Ein Stein wird mit Hammer und Meißel graviert — Noch weiter weg als von Hammer und Meißel geht es nicht: Variable Fonts stehen exakt am anderen Ende der Skala hinsichtlich Varianz und Skalierbarkeit. Dennoch erfordert der Umgang mit Schrift nach wie vor handwerkliches Können.

Einen eher technischen Artikel zum Einsatz von variablen Schriften im Webdesign findet sich bei developers.google.com. Besonders beeindruckend ist das Beispiel des „wachsenden Grases“ von Mandy Michael¹ bei dem ein Hintergrundbild eingebunden ist das in den Buchstabenkonturen sichtbar wird. Die Animation der Schrift besteht im Öffnen und Schließen der Konturen. Besonders spannend sind auch die Animationen, die dadurch innerhalb einer Schrift möglich werden, wie David Berlow mit seiner Schrift Zycon zeigt.

Variable Fonts im Netz

V-Fonts zeigt variable Fonts und welche Änderungsmöglichkeiten sie bieten. Besonders spannend finde ich hier das Beispiel der Recursive, die es nicht nur ermöglicht Buchstaben schräg zu stellen (Schieberegler „Slant“), sondern zusätzlich die Form der Minuskeln (Kleinbuchstaben) in die korrekte Kursiv-Version umzuwandeln, oder nicht.
Auch die Seite Axispraxis ermöglicht es einem mit verschiedenen Fonts und Einstellungen zu spielen (leider ist die Seite nicht responsive, großen Bildschirm nutzen!). Besonders interessant: ähnlich wie bei fonts.google.com kann man dort eigenen Text eingeben und das Ergebnis anschauen. Wichtig sind hier auch die Informationen zur Lizenz, die für alle Schriften unterschiedlich sind!
Mir gefallen spontan (ich suche aktuell eine serifenlose Schrift):
- AR UDJingXiHeiVF von Arphic Technology Co., Ltd.
- Avenir Next Variable von Monotype
- Compressa Pro Variable Font von Ingo Preuss (speziell wie die „/“ in Italic hoch wandern)
- DIN 2014 Stencil VF Demo von ParaType Ltd
- Dunbar Series AP von CJ Type (die Minuskelhöhe kann geändert werden)
- Venn VF von Dalton Maag Ltd.
- Tablet Gothic Regular von TypeTogether
- Normschrift von Jens Kutilek (primär weil | und {} gerade bleiben wenn die Buchstaben italic werden)
- Außerdem spannend:
  Cheee Variable hat einen Halloween-Slime-Stil
  Decovar Alpha hat unglaublich viele Möglichkeiten, ebenso GRADUATE
  Gnomon* Simple kann als Sonnenuhr genutzt werden
  Noboto Flex kann z.B. i-Punkte versetzen und hat auch sonst sehr viele Spielmöglichkeiten
Für asiatische Fonts kann man die iFontCloud nutzen.

Variable Fonts haben viele unterschiedliche Aspekte:

(Typo-) Grafisches Können wird benötigt, um die Schrift in einer gut lesbaren, ausgewogenen Variante einzusetzen
Lizenzmodelle und Auswirkungen auf Preise von statischen Fonts (mehr dazu bei Wolfgan Beinert, siehe oben)
Manipulative Möglichkeiten vs. Sinnhaftigkeit
Einbindungsmöglichkeiten im Web
Unterstützung in verschiedenen Layoutprogrammen
Unterstützung in diversen Betriebssystemen (z.B. macOS High Sierra – Version 10.13), Browsern, App-Technologien…

Fußnoten

hier ein Talk auf Youtube von Mandy Michael – bei Minute 15 ist zu sehen, wie die Änderungen einer Schrift an die Lautstärke im Raum gebunden werden kann!▲