Variable Fonts sind Schriftdateien, die mehrere Schriftstile (Gewichte, Breiten, Neigungen) in einer einzigen Datei vereinen und CSS-gesteuerte, stufenlose Übergänge zwischen diesen Stilen ermöglichen.
Was sind Variable Fonts?
Variable Fonts (offiziell: OpenType Font Variations) wurden 2016 von Adobe, Apple, Google und Microsoft gemeinsam als OpenType-Standard vorgestellt. Traditionelle Web-Fonts benötigen für jedes Gewicht eine separate Datei (Regular: 80 KB, Bold: 80 KB, Light: 80 KB...). Ein Variable Font fasst alle Variationen in einer Datei zusammen – oft bei insgesamt geringerer Dateigröße.
Das eigentlich Revolutionäre für Web Animation: Alle Achsen sind nummerisch und damit animierbar. Man kann einen Font von Regular zu ExtraBold fließend animieren, die Breite stufenlos steuern, und herstellerspezifische Achsen wie optische Größe oder Serifenbreite verändern.
Erklärung
Grundlegende CSS-Syntax
Variable Fonts werden über font-variation-settings gesteuert:
``css /* Standard-Achsen (vierbuchstabige Tag-Namen) */ .text { font-family: 'Inter Variable', sans-serif; font-variation-settings: 'wght' 400, /* font-weight: 100–900 */ 'wdth' 100, /* font-width: 75–125 */ 'ital' 0, /* italic: 0–1 */ 'slnt' 0, /* slant (Neigung): -90 bis 90 Grad */ 'opsz' 16; /* optical-size: relativer Textwert */ } ``
Empfohlen für Standard-Achsen: CSS-Eigenschaften wie font-weight und font-style werden automatisch auf die entsprechenden Variations-Achsen gemappt. font-variation-settings wird für nicht-standardisierte Achsen benötigt.
``css /* Besser: Standard-CSS-Eigenschaften nutzen */ h1 { font-weight: 700; /* Steuert 'wght' automatisch */ font-stretch: 75%; /* Steuert 'wdth' automatisch */ } ``
Animation mit Transitions
```css .nav-link { font-weight: 400; transition: font-weight 0.3s ease; }
.nav-link:hover { font-weight: 700; } ```
Da Variable Fonts stufenlose Werte erlauben, ist der Übergang von 400 auf 700 nicht ein Sprung, sondern eine Animation durch alle Zwischenwerte (401, 402... 699, 700).
Animation mit @keyframes
```css @keyframes gewichtPulsieren { 0%, 100% { font-weight: 300; } 50% { font-weight: 800; } }
.pulsierender-titel { font-family: 'Inter Variable', sans-serif; animation: gewichtPulsieren 3s ease-in-out infinite; } ```
Herstellerspezifische Achsen (Custom Axes)
Viele Variable Fonts bieten eigene Achsen jenseits der Standards. Diese werden mit Großbuchstaben-Tags identifiziert:
```css / Recursive Font: 'CASL' = Casual (0=Linear, 1=Casual) / .recursive-text { font-variation-settings: 'CASL' 0.5; transition: font-variation-settings 0.4s ease; }
.recursive-text:hover { font-variation-settings: 'CASL' 1; }
/ Decovar Font: dramatische dekorative Achsen / .decovar { font-variation-settings: 'BLDA' 0, / Inline dekorativ / 'TRSB' 1, / Serif-Variante / 'WMX2' 0; / Gewicht-Variation / } ```
Text-Splitting für Buchstabenanimationen
Für dramatische Typografie-Animationen werden Texte aufgeteilt:
```javascript // GSAP SplitText (Club GSAP) import { SplitText } from 'gsap/SplitText';
const split = new SplitText('.titel', { type: 'chars, words' });
gsap.from(split.chars, { fontVariationSettings: "'wght' 100", opacity: 0, duration: 0.6, stagger: 0.03, ease: 'power3.out' }); ```
``javascript // Vanilla Split-Text Alternative function splitzeInZeichen(element) { const text = element.textContent; element.innerHTML = text .split('') .map(char => <span class="buchstabe">${char === ' ' ? ' ' : char}</span>`) .join(''); }
splitzeInZeichen(document.querySelector('.titel'));
document.querySelectorAll('.buchstabe').forEach((buchstabe, i) => { buchstabe.style.animationDelay = ${i * 0.04}s; buchstabe.classList.add('einblenden'); }); ```
CSS Scroll-gesteuerte Typografie
```css @keyframes weightMitScroll { from { font-weight: 100; } to { font-weight: 900; } }
.scroll-titel { animation: weightMitScroll linear; animation-timeline: scroll(root); animation-range: 0vh 50vh; } ```
Beispiele
Kinetic Typography: Headline-Effekt
```css .kinetic-headline { font-family: 'Inter Variable', sans-serif; font-weight: 100; font-size: clamp(2rem, 8vw, 6rem); transition: font-weight 1.5s cubic-bezier(0.33, 1, 0.68, 1); }
.kinetic-headline.sichtbar { font-weight: 900; } ```
```javascript const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('sichtbar'); } }); }, { threshold: 0.5 });
observer.observe(document.querySelector('.kinetic-headline')); ```
Hover-Effekt auf Navigation
```css .nav-wort { font-weight: 300; font-variation-settings: 'wdth' 75; / Schmal / transition: font-weight 0.3s ease, font-variation-settings 0.3s ease; display: inline-block; }
.nav-wort:hover { font-weight: 800; font-variation-settings: 'wdth' 100; / Normale Breite / } ```
Achtung: Wenn sich font-weight ändert, kann dies die Textbreite verändern und umliegende Elemente verschieben (Layout Shift). Lösung: Container mit fester Breite oder font-variant-numeric: tabular-nums (für Zahlen).
In der Praxis
Empfehlenswerte Variable Fonts (Google Fonts, 2024):
- Inter – Sehr vielseitig, 100–900 Gewicht, ausgezeichnete Lesbarkeit
- Roboto Flex – Googles Basis-Font mit vielen Achsen
- Recursive – Monospace/Slab mit herstellerspez. Achsen
- Source Serif 4 – Serifenschrift mit Gewicht-Achse
- Fraunces – Optische Größe, Ghost-Achse für dramatische Effekte
Ladezeiten: Ein Variable Font ist größer als ein einzelner statischer Font, aber kleiner als 3–4 separate Gewichte. font-display: swap und preload-Link im <head> empfehlen sich.
``html <link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin> ``
Vergleich & Abgrenzung
| Variable Font | Statischer Font | |
|---|---|---|
| Dateianzahl | 1 | 1 pro Gewicht/Stil |
| Animierbar | Ja, stufenlos | Nein |
| Dateigröße | 50–200 KB | 30–80 KB je Datei |
| Browserunterstützung | >97 % | Universal |
Häufige Fragen (FAQ)
Wie finde ich heraus, welche Achsen ein Font hat? Mit der Font-Achsen-Inspektion in Chrome DevTools (Einstellungen → Fonts) oder auf wakamaifondue.com (Roel Nieskens, 2018).
Kann ich `font-weight` zwischen 100 und 999 setzen? Nur wenn der Font diese Achse unterstützt. Prüfe die wght-Range in der Font-Spezifikation.
Was passiert in Browsern ohne Variable Font Support? Fallback auf reguläre font-weight-Werte. Variable Fonts haben sehr gute Browser-Unterstützung (>97 % nach Can I Use, 2024).
Verwandte Einträge
- CSS Animationen (@keyframes) – @keyframes für Typografie-Animationen
- CSS Transitions – Transitions für hover-getriggerte Font-Änderungen
- GSAP (GreenSock) – Grundlagen – GSAP SplitText für Buchstabenanimationen
- Motion Design Prinzipien für Web – Wann Typografie-Animation sinnvoll ist
Weiterführend
- MDN: Variable fonts guide (2024) – developer.mozilla.org
- Google Fonts: Variable Fonts – fonts.google.com/variablefonts
- Roel Nieskens: Wakamai Fondue (2018) – wakamaifondue.com
- Nick Sherman et al.: v-fonts.com – Variable Font Sammlung und Tests
- Nick Shermann: Introducing OpenType Variable Fonts (2016) – medium.com
- Mandy Michael: Variable Fonts and the Future of Web Design (2020) – variablefonts.io
