# Variable Fonts, für Designer erklärt

[Canonical HTML page](https://gradiently.design/de/guide/variable-fonts)

Eine Datei, jede Stärke dazwischen und Schrift, die sich an die Größe anpasst, in der du sie setzt. Variable Fonts verändern, was ein Schriftsystem kann, wenn du weißt, zu welchen Achsen du greifst.

## The short version

- Ein Variable Font ist eine einzige Schriftdatei, die einen stufenlosen Bereich von Stilen enthält, etwa jede Stärke von Thin bis Black, statt einer Datei pro Stil.
- Jeder Bereich heißt Achse; die fünf Standardachsen sind Stärke, Breite, Kursiv, Neigung und optische Größe.
- Mit Variable Fonts wählst du Zwischenwerte wie eine Stärke von 450 oder 650 und stimmst Schrift genau auf jede Größe und jeden Hintergrund ab.
- Alle aktuellen großen Browser unterstützen Variable Fonts, und viele Familien bei Google Fonts gibt es als variable Dateien.
- Eine variable Datei kann größer sein als ein einzelner statischer Schnitt, die Ersparnis entsteht also erst, wenn du mehrere Stärken oder Breiten derselben Familie nutzt.

**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](https://gradiently.design/de/guide/typography-basics) und [Markenschriften](https://gradiently.design/de/guide/brand-fonts).

## 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.

| Achse | Kürzel | Was sie ändert | CSS-Eigenschaft |
| --- | --- | --- | --- |
| Stärke | `wght` | Strichdicke, von Thin bis Black | `font-weight` |
| Breite | `wdth` | Schmale bis breite Buchstaben | `font-stretch` |
| Optische Größe | `opsz` | Details, Kontrast und Abstände passend zur Größe | `font-optical-sizing` |
| Neigung | `slnt` | Ein schräger Winkel, ohne die Buchstabenformen zu ändern | `font-style: oblique` |
| Kursiv | `ital` | Wechselt zu echten kursiven Buchstabenformen | `font-style: italic` |
| Eigene Achse | z. B. `GRAD`, `SOFT` | Alles, was der Gestalter festlegt | `font-variation-settings` |

Die fünf registrierten Achsen plus eigene. Nicht jeder Variable Font hat jede Achse: Prüfe, was deiner enthält.

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](https://fonts.google.com/variablefonts) 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.

Ein Hochformat-Design mit einem einzelnen, sehr groß gesetzten Wort auf einem Farbverlaufshintergrund

Displaygrößen: Eine Achse für optische Größe schärft den Kontrast und zieht die Abstände zusammen, wenn Schrift wächst.

Ein Hochformat-Design mit Überschrift und kleinem Begleittext aus derselben Schriftfamilie

Textgrößen: Dieselbe Familie öffnet und stärkt kleine Schrift, damit sie auf einem Smartphone-Bildschirm besteht.

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

### Lohnt sich

- Du nutzt drei oder mehr Stärken oder Breiten aus einer Familie
- Du willst Zwischenstärken, um Schrift auf verschiedenen Hintergründen auszugleichen
- Überschriften und kleiner Text teilen eine Familie mit Achse für optische Größe
- Du willst Stärke oder Breite in Motion-Arbeiten animieren

### Eher nicht

- Du nutzt immer nur ein oder zwei Stärken
- Der statische Schnitt ist kleiner und du brauchst nie andere Stile
- Dein Werkzeug oder deine Plattform kann keine Achsenwerte wählen
- Der variablen Version fehlt ein Stil oder eine Sprache, die du brauchst

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](https://gradiently.design/de/guide/text-on-gradient) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) erklärt die Details.

```css
@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;
}
```

Standardachsen über Standardeigenschaften, eigene Achsen über `font-variation-settings`. Die Bereiche in `@font-face` müssen zu dem passen, was die Datei enthält.

> **Animierte Stärke verschiebt Text** In den meisten Schriften sind schwerere Buchstaben auch breiter, also verschiebt eine animierte Stärke beim Hover den umgebenden Text. Nutze eine Schrift mit Grade-Achse oder animiere die Stärke nur bei einzeln stehenden Wörtern und Überschriften.

## Ein variables Schriftsystem einrichten

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. **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. **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. **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. **Es aufschreiben** Halte Schriftdatei, Achsenbereiche und die Werte jeder Rolle in deinem [Markenstyleguide](https://gradiently.design/de/guide/brand-style-guide) 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](https://gradiently.design/de/guide/display-fonts) in 200 px.

## FAQ

### Was ist ein Variable Font?

Ein Variable Font ist eine Schriftdatei mit einem stufenlosen Bereich von Stilen entlang einer oder mehrerer Achsen, etwa Stärke oder Breite, sodass du jeden Wert dazwischen wählen kannst statt weniger fester Stile.

### Unterstützen alle Browser Variable Fonts?

Alle aktuellen großen Browser unterstützen sie. Prüfe [caniuse](https://caniuse.com/variable-fonts), wenn du sehr alte Browser unterstützen musst, und gib einen Fallback-Schriftstapel an.

### Sind Variable Fonts kleiner als statische Schriften?

Nicht immer. Eine variable Datei ist meist größer als ein einzelner statischer Stil, aber kleiner als mehrere. Die Ersparnis entsteht, wenn du sonst drei oder mehr Stile laden würdest.

### Was ist die optische Größe einer Schrift?

Die optische Größe ist eine Achse, die Details, Kontrast und Abstände an die Größe anpasst, in der Text gesetzt ist, sodass kleiner Text kräftiger und großer Text feiner wird. Browser wenden sie mit `font-optical-sizing: auto` automatisch an.