Was sind variable Schriften?

Eine variable Schrift ist eine einzige Schriftdatei, die einen kontinuierlichen Design-Raum enthält statt einer Reihe fester Schnitte. Wo eine statische Familie Regular, Medium und Bold als separate Dateien ausliefert, speichert eine variable Schrift die Extreme des Designs und kann jeden Punkt dazwischen darstellen — Gewicht 400, 457 oder 610 — aus derselben Datei.

Die benannten Gewichte bleiben als Orientierungspunkte erhalten: 400 bedeutet weiterhin Regular, 700 weiterhin Bold, und beide werden genau so gerendert, wie sie es aus statischen Dateien täten. Was sich ändert, ist, dass sich der Raum zwischen den Orientierungspunkten öffnet — die festen Stufen sind nicht länger die einzigen Optionen. Dieser Artikel ist Teil unseres Typografie-Leitfadens.

Worin unterscheidet sich eine variable Schrift von statischen Gewichten?

Eine statische Familie ist eine Reihe diskreter Zeichnungen: Jedes Gewicht wurde als eigene Datei exportiert, und alles zwischen zwei Gewichten existiert nicht. Bitte einen Browser um Gewicht 500, wenn nur 400 und 700 installiert sind, und er springt entweder zum nächsten Nachbarn oder synthetisiert eine Fälschung — er verdickt die Konturen, um Fett zu simulieren, mit Ergebnissen, bei denen Schriftgestalter zusammenzucken.

Eine variable Schrift verlagert die Interpolation in die Datei. Das ist weniger eine neue Idee als eine verlagerte: Schriftgestalter zeichnen seit Langem die Extreme einer Familie und interpolieren die mittleren Gewichte dazwischen — so wurden große Familien produziert. Eine variable Schrift liefert die Extreme (die Master) aus und lässt die Rendering-Engine live interpolieren, sodass Gewicht 457 keine Fälschung ist, sondern ein legitimer Punkt im gestalteten Raum.

Welche Achsen kann eine variable Schrift haben?

Gewicht ist die Achse, der du überall begegnest, aber das Format ist allgemein. Eine Konvention registrierter Achsen benennt die gängigen mit vierstelligen Tags: wght (Gewicht), wdth (Breite), slnt (Neigung) und opsz (optische Größe — das Design passt sich an die Größe an, in der es gesetzt wird). Schriften können auch eigene Achsen definieren: Grade, Weichheit, was auch immer der Gestalter parametrisiert hat. web.devs Einführung in variable Schriften geht die Achsen im Detail durch.

Die meisten variablen Schriften stellen in der Praxis ein oder zwei Achsen bereit — Gewicht allein ist üblich — und das ist kein Mangel. Eine gut gezeichnete Achse deckt den Großteil dessen ab, was Interfaces brauchen.

Laden variable Schriften schneller?

Manchmal, und es lohnt sich, genau zu sein, wann. Eine variable Datei ist größer als jedes einzelne ihrer statischen Gewichte — sie trägt den gesamten Design-Raum. Der ehrliche Vergleich: Ein statisches Textgewicht mit Latin-Subset landet in WOFF2 üblicherweise bei rund 15–40 KB, während das variable Äquivalent oft das Zwei- bis Vierfache eines einzelnen Schnitts wiegt. Also:

• Ein Gewicht im Einsatz → die statische Datei gewinnt bei den Bytes.
• Zwei Gewichte → ungefähr ein Unentschieden, je nach Familie.
• Drei oder mehr Gewichte → die variable Datei gewinnt meist bei den Bytes und immer bei den Requests: Eine Datei ersetzt das ganze Set.

Ein Team, das 400, 500, 600 und 700 derselben Familie nutzt, ist der Lehrbuchfall — vier Requests kollabieren zu einem, die Gesamt-Bytes sinken typischerweise, und jeder Zwischenwert kommt gratis mit. Die genauen Zahlen variieren mit der Glyphenabdeckung und dem Subsetting, also miss deine eigenen Dateien, statt irgendjemandes Tabelle zu zitieren, auch nicht diese.

Sieh dir eine vollständige Gewichtshierarchie in einer Familie an — Gewichte pro Stil von Caption bis Display, in der Vorschau bei den Größen einer echten Skala. Mit statischen Dateien sind das vier Requests; eine variable Schrift liefert denselben Bereich in einer einzigen.

Wie verwendest du eine variable Schrift in CSS?

Deklariere den Bereich, den die Datei abdeckt, und nutze dann ganz normale Eigenschaften:

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;   /* der Bereich, nicht ein einzelner Wert */
}

h1 { font-weight: 650; }
p  { font-weight: 440; }

font-weight: 457 funktioniert einfach, wenn die Schrift variabel ist — keine spezielle Syntax. Die registrierten Achsen bilden sich auf ganz normales CSS ab: Gewicht auf font-weight, Breite auf font-stretch, Neigung auf font-style, optische Größe auf font-optical-sizing. Die Low-Level-Notlösung, font-variation-settings: "XXXX" value, existiert für eigene Achsen; bevorzuge die High-Level-Eigenschaften, wo immer sie greifen, da sie sich besser mit dem Rest der Kaskade komponieren lassen.

Warum ist Gewichtspräzision in einer echten Hierarchie wichtig?

Weil 400 und 600 nicht immer richtig sitzen, und mit statischen Schriften bestand dein einziger Zug darin, damit zu leben. Zwei Situationen tauchen ständig auf. Heller Text auf dunklem Hintergrund wirkt tendenziell dünner als dasselbe Gewicht auf Weiß — ein Fließtext in 400 kann ins Zerbrechliche kippen, und 440 korrigiert das unauffällig. Und ein Display-Stil in 700 kann bei großen Größen schwerer wirken als beabsichtigt, wo 640 die Präsenz behält, ohne zu schreien. Eine plausible Abstimmung:

Dass die Caption schwerer wird als der Fließtext, ist Absicht — kleine Größen wirken optisch dünner, und ein wenig zusätzliches Gewicht gleicht das aus. Variable Schriften erlauben außerdem animiertes oder responsives Gewicht; das ist eine echte Fähigkeit, aber selten eine tragende.

Welche Schriften sind variabel — und wie passt das in einen Token-Workflow?

Viele der wichtigen UI-Schriften liefern variable Versionen aus — Inter, Roboto Flex, Source Sans 3 und Fraunces sind Beispiele —, aber die meisten Schriftfamilien tun es noch nicht, also ist variable Unterstützung eine Eigenschaft, die du pro Familie prüfen musst, keine Selbstverständlichkeit. Jede aktuelle Browser-Engine kommt damit zurecht.

In einem Token-Workflow ist die Arbeitsteilung sauber: Das Schriftsystem definiert die Gewichte pro Stil, und das Dateiformat bestimmt, welche Werte darstellbar sind. Die Gewichtssteuerung pro Stil in Scale Composer legt diese Hierarchie fest, und die exportierten Tokens — DTCG, CSS, Tailwind, Figma Variables — tragen genau die Werte, auf denen du landest: benannte Stufen, wenn deine Familie statisch ist, jeden beliebigen Wert, wenn sie variabel ist. Die Rolle des Tools ist das System, nicht die Datei; die Schrift, die du lizenzierst, entscheidet, wie fein du sie abstimmen kannst.

Stimme die Gewichte ab, statt die festen Stufen zu akzeptieren

Der praktische Weg, variables Gewicht zu verstehen, besteht darin, es zu bewegen und zuzusehen, wie sich die Hierarchie neu ausbalanciert. Passe das Gewicht jedes Stils live an — schiebe den Fließtext von 400 Richtung 440, ziehe das Display von 700 auf 650 zurück, und beurteile das Ergebnis in laufendem Mustertext statt in den Zahlen eines Gewichts-Sliders. Wenn ein Wert zwischen den festen Stufen besser liest, dann ist das genau die Fähigkeit, für die es das Format gibt — und die exportierten Tokens werden ihn tragen.