Variable Fonts

Variable Fonts ermöglichen es, verschiedene Breiten, Schriftgewichte und Stile in einer einzigen Schriftdatei abzubilden. Bei statischen Fonts wird dafür jeweils eine eigene Datei benötigt.

Statische und variable Fonts

  • Statische Fonts Jeder Schriftschnitt liegt in einer eigenen Schriftdatei vor
  • Variabler Font Eine Schriftdatei enthält einen einstellbaren Bereich verschiedener Schriftschnitte

Ein variabler Font ist grösser als eine einzelne statische Schriftdatei. Werden jedoch mehrere Schriftschnitte benötigt, kann eine variable Datei kleiner sein als die Summe der einzelnen Dateien und gleichzeitig mehr Zwischenwerte bereitstellen.

Vorteile variabler Fonts

  • Feine Zwischenwerte statt nur Regular/Bold, zum Beispiel Gewicht 550
  • Fliessende Übergänge bei Hover, Scroll oder responsiven Headlines
  • Eine Datei kann mehrere einzeln geladene statische Schnitte ersetzen
  • Optical Sizing: automatische Feinjustierung je nach Textgrösse
  • Markentypografie mit exakten, individuellen Werten

Variablen Font einbinden

Bei Google Fonts wird der gewünschte Wertebereich direkt in der URL angegeben. wght@300..900 lädt die Gewichtsachse mit Werten zwischen 300 und 900.

Der Zusatz display=swap steuert das Ladeverhalten der Schrift.

<link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..900&display=swap" rel="stylesheet">

Selbst gehostete variable Fonts werden mit @font-face eingebunden. Dabei werden die Wertebereiche angegeben, welche die Schriftdatei tatsächlich unterstützt. Die Angaben erzeugen keine neuen Varianten, sondern beschreiben die vorhandenen Achsen.

@font-face {
    font-family: "MeinFont";
    src: url("meinfont-variable.woff2") format("woff2");
    font-weight: 100 900;   /* Wertebereich */
    font-stretch: 75% 125%;
}

Variationsachsen

Variationsachsen sind das Fundament variabler Fonts. Sie legen fest, in welchen gestalterischen Dimensionen und innerhalb welcher Wertebereiche sich eine Schrift verändern lässt. Es gibt zwei Arten: registrierte Achsen und Custom-Achsen.

  • Registrierte AchseStandardisierte Achse, für die eine passende CSS-Eigenschaft existiert
  • Custom-AchseZusätzliche, vom Schriftdesigner definierte Achse ohne eigene CSS-Eigenschaft

Registrierte Achsen

Es gibt fünf registrierte Variationsachsen: Gewicht, Breite, Schräglage, Kursivform und optische Grösse. Die zugehörigen 4-Buchstaben-Tags werden immer kleingeschrieben und unterscheiden zwischen Gross- und Kleinschreibung. Für diese Achsen gibt es passende CSS-Eigenschaften. Das W3C empfiehlt, die passenden CSS-Eigenschaften anstelle von font-variation-settings zu verwenden.

  • wghtGewicht – entspricht font-weight
  • wdthBreite – entspricht font-stretch, neu font-width
  • slntSchräglage – entspricht font-style: oblique Ndeg
  • italKursiv an/aus – entspricht font-style: italic
  • opszOptische Grösse – entspricht font-optical-sizing

Nicht jede Variable Font unterstützt alle Achsen. Welche Achsen und Werte verfügbar sind, bestimmt die jeweilige Schrift.

1. wght – Gewicht

wght ist die Gewichtsachse und bestimmt, wie leicht oder fett die Buchstaben erscheinen. Gesteuert wird sie mit font-weight. Bekannte Werte sind 400 für Regular und 700 für Bold. Ein variabler Font ermöglicht innerhalb seines unterstützten Bereichs auch Zwischenwerte wie 550.

CSS akzeptiert für font-weight Werte von 1 bis 1000. Entscheidend ist jedoch der Wertebereich der geladenen Schrift. Werte ausserhalb dieses Bereichs werden auf den nächstmöglichen unterstützten Wert begrenzt.

Variable Weight

Beim Hover verändert sich das Schriftgewicht stufenlos von 300 auf 900.

.text {
    font-family: "Roboto Flex", sans-serif;
    font-weight: 300;
    transition: font-weight 0.6s ease;
}

.text:hover {
    font-weight: 900;
}

2. wdth – Breite

wdth ist die Breitenachse und bestimmt, wie schmal oder breit die Buchstaben erscheinen. Gesteuert wird sie mit font-stretch. 100% entspricht der normalen Breite, kleinere Werte machen die Schrift schmaler und grössere Werte breiter.

CSS akzeptiert alle positiven Prozentwerte. Entscheidend ist jedoch der Wertebereich der geladenen Schrift. Werte ausserhalb dieses Bereichs werden auf den nächstmöglichen unterstützten Wert begrenzt.

In der aktuellen Spezifikation heisst die Eigenschaft font-width. font-stretch ist der ältere Name und wird derzeit breiter unterstützt.

Variable Width

.vf-wdth {
  font-family: "Roboto Flex", sans-serif;
  font-stretch: 50%;
  transition: font-stretch 0.6s ease;
}

.vf-demo:hover .vf-wdth {
  font-stretch: 150%;
}

3. slnt – Schräglage

slnt verändert den Winkel der Buchstaben, ohne ihre Formen auszutauschen. In CSS wird die Schräglage mit font-style: oblique und einem Winkel gesteuert.

CSS erlaubt Winkel von -90deg bis 90deg. Entscheidend ist jedoch der Bereich, den der verwendete Font tatsächlich unterstützt.

0deg – aufrecht

10deg – schräg

.text-normal {
  font-style: oblique 0deg;
}

.text-oblique {
  font-style: oblique 10deg;
}

Safari überträgt den Winkel derzeit nicht zuverlässig auf die slnt-Achse. Deshalb wird die Achse in dieser Demo direkt mit font-variation-settings gesteuert. Eine Neigung nach rechts erhält dabei einen negativen Wert; die Einheit deg entfällt. 

.text-normal {
  font-variation-settings: "slnt" 0;
}

.text-oblique {
    font-variation-settings: "slnt" -10;
}

4. ital – Kursivform

ital verwendet eigens entworfene kursive Buchstabenformen. Dabei können sich einzelne Zeichen deutlich verändern, zum Beispiel die Kleinbuchstaben a oder g. Die Achse reicht von 0 für aufrecht bis 1 für vollständig kursiv. Zwischenwerte wie 0.5 können eine Zwischenform darstellen, sofern der verwendete Font diese unterstützt.

Kursiv und Schräglage sind nicht dasselbe: ital verwendet andere Buchstabenformen, während slnt die vorhandenen Formen lediglich neigt. Ein Font besitzt typischerweise entweder eine ital- oder eine slnt-Achse.

Normal – aufrecht

Italic – kursiv

In CSS werden die aufrechte und die kursive Form mit font-style gewählt. Besitzt eine Schrift keine eigene Kursivform, kann der Browser eine künstlich geneigte Variante erzeugen. font-synthesis: none verhindert diese automatische Nachbildung.

.text-normal {
  font-style: normal;
  font-synthesis: none;
}

.text-italic {
  font-style: italic;
  font-synthesis: none;
}

5. opsz – Optische Grösse

opsz ist die Achse für die optische Grösse. Sie passt die Buchstabenformen an die dargestellte Schriftgrösse an. Kleine Schrift kann kräftigere Linien und offenere Formen erhalten, während grosse Schrift feinere Details zeigen kann.

Das Prinzip stammt aus dem Druck mit Metalllettern: Für kleine und grosse Schriftgrössen wurden unterschiedliche Buchstabenformen geschnitten, damit die Schrift in jeder Grösse gut lesbar und gestalterisch ausgewogen blieb.

Mit font-optical-sizing: auto passt der Browser die optische Grösse automatisch an die verwendete font-size an. Voraussetzung ist, dass der Font eine opsz-Achse besitzt. 

.text {
  font-optical-sizing: auto;
}

font-optical-sizing erlaubt nur auto oder none. Ein genauer Wert kann direkt über die Achse gesetzt werden. Der opsz-Wert bestimmt nicht die Schriftgrösse, sondern wählt die Buchstabenformen, die für diese Grösse optimiert wurden. Der unterstützte Wertebereich hängt vom verwendeten Font ab.

opsz 8 – kleine optische Grösse

opsz 144 – grosse optische Grösse

.vf-opsz-small {
  font-size: 1rem;
  font-variation-settings: "opsz" 8;
}

.vf-opsz-large {
  font-size: 4rem;
  font-variation-settings: "opsz" 144;
}

font-variation-settings

Mit font-variation-settings lassen sich die Achsen eines variablen Fonts direkt über ihre vierstelligen Tags steuern.

.text {
  font-variation-settings:
    "wght" 650,
    "wdth" 110,
    "SERF" 45,
    "ROTA" 15;
}

Das Tag bezeichnet die Achse, die Zahl legt den Wert innerhalb des unterstützten Bereichs fest. Mehrere Achsen werden durch Kommas getrennt.

Registrierte Achsen werden klein, Custom-Achsen gross geschrieben. Für registrierte Achsen sollten die passenden CSS-Eigenschaften wie font-weight, font-stretch oder font-style verwendet werden. font-variation-settings wird vor allem für Custom-Achsen eingesetzt.

Custom-Achsen

Custom-Achsen werden vom Schriftdesigner definiert und besitzen keine eigene CSS-Eigenschaft. Welche Achsen und Wertebereiche verfügbar sind, hängt von der verwendeten Schrift ab.

Die Schrift Recursive besitzt unter anderem die Custom-Achsen CASL und MONO.

Bei Recursive verändert CASL die Formensprache der Buchstaben: 0 wirkt sachlich und geometrisch, 1 verspielter und handgezeichneter.

Casual Axis

.text {
  font-variation-settings: "CASL" 0;
  transition: font-variation-settings 0.6s ease;
}

.text:hover {
  font-variation-settings: "CASL" 1;
}

Bei MONO steht 0 für proportionale Buchstabenbreiten. Mit 1 erhält jedes Zeichen denselben horizontalen Platz.

Monospace Axis

.text {
  font-variation-settings: "MONO" 0;
}

.text:hover {
  font-variation-settings: "MONO" 1;
}

Mehrere Achsen kombinieren

Registrierte und Custom-Achsen lassen sich kombinieren. Registrierte Achsen werden weiterhin mit ihren CSS-Eigenschaften gesteuert, Custom-Achsen mit font-variation-settings.

Combined Axes

.text {
    font-weight: 400;
    font-variation-settings: "CASL" 0;
    transition: font-weight 0.6s ease,
                font-variation-settings 0.6s ease;
}

.text:hover {
    font-weight: 900;
    font-variation-settings: "CASL" 1;
}

Wichtig: Verwende für dieselbe Achse nicht gleichzeitig eine normale CSS-Eigenschaft und font-variation-settings. Eine Angabe wie "wght" kann font-weight übersteuern, "wdth" entsprechend font-stretch.

Werden mehrere Custom-Achsen mit font-variation-settings animiert, müssen im Ausgangs- und Hoverzustand dieselben Achsen in derselben Reihenfolge stehen. Fehlt eine Achse in einem Zustand, kann die Veränderung springen.

Achsen einer Schrift herausfinden

Nicht jede Schrift bietet dieselben Achsen. Vor dem Einsatz lohnt sich ein Blick, welche Achsen und Wertebereiche tatsächlich zur Verfügung stehen.

Kurz gesagt

  • Ein Variable Font kann mehrere statische Schriftdateien durch eine Datei mit einstellbaren Achsen ersetzen.
  • Fünf Achsen sind registriert: wght, wdth, slnt, ital und opsz.
  • Registrierte Achsen werden mit den passenden CSS-Eigenschaften gesteuert.
  • Custom-Achsen wie CASL und MONO werden mit font-variation-settings gesteuert.
  • Verwende für dieselbe Achse nicht gleichzeitig eine passende CSS-Eigenschaft und font-variation-settings.
  • Bei mehreren Custom-Achsen müssen im Ausgangs- und Hoverzustand dieselben Achsen in derselben Reihenfolge stehen.
  • Wakamai Fondue oder die Firefox DevTools zeigen, welche Achsen eine Schrift mitbringt.

NurseVerwandte Themen