Variable Fonts, für Designer erklärt

Variable Fonts sind Schriftdateien, die einen stufenlosen Bereich von Stilen statt eines festen Satzes enthalten. Statt eigener Dateien für Regular, Medium, Semibold und Bold enthält eine variable Datei jede Stärke zwischen ihrer leichtesten und schwersten, oft auch weitere Bereiche wie Breite oder optische Größe. Du wählst jeden beliebigen Punkt entlang eines Bereichs, einer sogenannten Achse, sodass eine Überschrift bei Stärke 680 und eine Bildunterschrift bei 430 stehen kann, wenn das am besten lesbar ist.

Das Format kam 2016 als Teil der OpenType-Spezifikation und wird heute von allen aktuellen großen Browsern und den wichtigsten Designprogrammen unterstützt. Dieser Leitfaden erklärt, was die Achsen tun, wann sich Variable Fonts lohnen und wie du sie in CSS einrichtest. Für das große Ganze der Schriftwahl siehe Typografie Grundlagen und Markenschriften.

Die Achsen eines Variable Fonts und was jede tut

Eine Achse ist eine Gestaltungsdimension, die der Schriftgestalter an ihren Extremen gezeichnet hat; die Schrift interpoliert alles dazwischen. Fünf Achsen sind in der OpenType-Spezifikation registriert und haben feste Kürzel aus vier Buchstaben. Schriftgestalter können eigene Achsen hinzufügen, die in Großbuchstaben geschrieben werden.

Eigene Achsen geben Schriften Persönlichkeit. Roboto Flex hat eine Grade-Achse (GRAD), die die Strichstärke ändert, ohne die Buchstabenbreite zu ändern. Fraunces hat SOFT für rundere Enden und WONK für seine eigenwilligeren Buchstabenformen. Recursive hat die Achsen MONO und CASL, die sie von proportional zu Monospace und von sachlich zu locker bewegen. Du kannst alle bei Google Fonts erkunden, wo du nach variablen Familien filtern kannst.

Warum die optische Größe am meisten zählt

Die Stärke bekommt die Aufmerksamkeit, aber die optische Größe ist oft die nützlichste Achse. Bleisatzschrift wurde für jede Größe eigens geschnitten: Kleine Größen hatten kräftigere Striche, größere x-Höhen und weitere Abstände; große Größen waren feiner, mit mehr Kontrast und engeren Abständen. Digitale Schriften verloren das, als eine einzige Kontur auf jede Größe skaliert wurde. Eine opsz-Achse bringt es zurück.

Mit font-optical-sizing: auto (der Standard in Browsern) passt sich eine Schrift mit opsz-Achse an die eingestellte Schriftgröße an. Du musst nichts tun, außer eine Schrift mit dieser Achse zu wählen. Das hilft besonders bei Designs mit großer Überschrift und kleinem Begleittext aus einer Familie, also bei den meisten Social-Media-Beiträgen und Landingpages.

Wann sich Variable Fonts lohnen

Die Dateigröße ist der ehrliche Kompromiss. Eine variable Datei trägt die Daten für jeden Stil, also ist sie meist größer als eine einzelne statische Stärke, aber kleiner als mehrere. Lädt eine Website nur Regular und Bold, sind zwei statische Dateien gut möglich leichter. Lädt sie vier Stärken und eine Kursive, gewinnt meist eine variable Datei, und du bekommst jede Stärke dazwischen gratis dazu.

Zwischenstärken sind nützlicher, als es klingt. Helle Schrift auf dunklem oder farbigem Grund wirkt schwerer als dieselbe Stärke auf Weiß, also setzt du weißen Text auf einem Farbverlauf vielleicht mit 460 statt 500, damit er optisch zu einer dunklen Version auf Hell passt. Der Effekt ist subtil, aber er lässt ein Schriftsystem abgestimmt wirken. Text auf einem Farbverlauf erklärt das größere Lesbarkeitsproblem.

So nutzt du Variable Fonts in CSS

Deklariere die Schrift einmal mit einem Bereich für jede Achse und nutze dann normale Eigenschaften wie font-weight und font-stretch. Greif nur für eigene Achsen zu font-variation-settings, weil es alle Achsen auf einmal überschreibt und nicht freundlich vererbt wird. Der Leitfaden zu Variable Fonts von MDN erklärt die Details.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Ein variables Schriftsystem einrichten

1. 1

   Die Achsen prüfen

   Öffne die Musterseite der Schrift und notiere jede Achse und ihren Bereich. Stelle sicher, dass die Sprachen und Zeichen, die du brauchst, in der variablen Version enthalten sind.

2. 2

   Rollen festlegen, nicht Stärken

   Lege Stärken pro Rolle fest: Fließtext, Betonung, Zwischenüberschrift, Überschrift, Label. Ein System aus fünf abgestimmten Werten schlägt neun Standardwerte, die wahllos genutzt werden.

3. 3

   Auf Untergründe abstimmen

   Lege eine etwas leichtere Stärke für helle Schrift auf Dunkel an und vergleiche beide in echter Größe miteinander.

4. 4

   Die optische Größe arbeiten lassen

   Lass font-optical-sizing: auto stehen, wenn du keinen Grund hast, es festzulegen, und prüfe Überschriften und Bildunterschriften nebeneinander.

5. 5

   Es aufschreiben

   Halte Schriftdatei, Achsenbereiche und die Werte jeder Rolle in deinem Markenstyleguide fest, damit niemand sie aus dem Gedächtnis nachbaut.

Variable Fonts belohnen Zurückhaltung. Es geht nicht darum, jeden Wert zu nutzen, sondern genau die wenigen zu wählen, mit denen deine Schrift überall gut lesbar ist, vom Absatz in 16 px bis zur Display-Überschrift in 200 px.