Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.
In den ersten zwei Jahrzehnten der Webtypografie war eine Schriftart ein Satz eingefrorener Instanzen: Regular, Kursiv, Fett, vielleicht ein Light und ein Black, wenn das Budget es erlaubte. Jede Wahl zwischen ihnen war eine Wahl zwischen festen Punkten. Variable Fonts — 2016 mit OpenType Font Variations eingeführt und inzwischen von allen großen Browsern unterstützt — ersetzen diese Punkte durch kontinuierliche Bereiche. Eine Datei enthält einen gesamten Designraum, und der Typograf, das Stylesheet oder die Leserin kann jede Position darin wählen.
Für die Barrierefreiheit ist das bedeutsam, weil so viele der Anpassungen, die diese Publikation empfohlen hat — etwas mehr Strichstärke bei kleinen Größen, eine leicht breitere Zurichtung für sehbehinderte Lesende, robustere Formen unter widrigen Bedingungen —, zuvor unmöglich waren, sofern die Foundry nicht zufällig genau diese Instanz geschnitten hatte. Jetzt sind sie Zahlen.
Die Achsen
Ein Variable Font stellt benannte Variationsachsen bereit. Fünf sind in der OpenType-Spezifikation registriert:
- wght (Strichstärke) — stufenlos von haarfein bis schwarz, statt in Hunderterschritten.
- wdth (Breite) — von schmal bis breit, ohne die Verzerrung mechanischer Skalierung.
- opsz (optische Größe) — Formen, die an die Größe angepasst sind, in der sie gelesen werden.
- slnt (Neigung) und ital (Kursive) — Schrägungswinkel und der Wechsel zu echten Kursivformen.
font-weight, font-stretch, font-style und font-optical-sizing —, die dem Low-Level-font-variation-settings vorzuziehen sind, damit Stile vorhersehbar kaskadieren und sich kombinieren lassen.
Optische Größen: ein altes Werkzeug kehrt zurück
Optische Größenanpassung ist nicht neu; sie ist sehr alt, und ihr Fehlen in der digitalen Schrift war die Anomalie. Im Bleisatz wurde jede Größe eigens geschnitten, und der Stempelschneider kompensierte: Kleine Größen bekamen kräftigere Striche, weitere Abstände, größere x-Höhen, offenere Punzen; Displaygrößen erhielten feineren Kontrast und engere Zurichtung. Der Fotosatz und dann die digitalen Fonts gaben dies auf und skalierten einen Master auf jede Größe — weshalb so viel kleiner digitaler Text dünn und verstopft gewirkt hat.
Die opsz-Achse stellt diese Praxis wieder her. Ein gut gemachter Variable Font mit einer Achse für optische Größe rendert Text in Bildunterschriftengröße mit robusten, offenen Formen und Schlagzeilentext mit Raffinesse — automatisch, wenn font-optical-sizing: auto in Kraft ist (der Standard). Für sehbehinderte Lesende, die am kleinen, angestrengten Ende des Spektrums leben, ist das ein direkter Leserlichkeitsgewinn, der den Designer nichts kostet außer der Wahl einer Schrift, die ihn unterstützt.
Grades: Strichstärke ohne Neuumbruch
Eine Grade-Achse verändert die Dunkelheit der Striche, ohne die Breite der Glyphen zu verändern. Diese Unterscheidung ist der ganze Punkt: Eine Anpassung von font-weight verändert die Buchstabenbreiten und bricht den Text daher neu um, eine Anpassung des Grade nicht. Text kann visuell schwerer oder leichter werden, und jeder Zeilenumbruch bleibt an seinem Platz.
Das vorige Kapitel merkte an, dass helle Schrift auf dunklen Flächen fetter wirkt als dieselbe Schrift auf Weiß. Grade ist das präzise Instrument für diese Korrektur: Senken Sie den Grade im Dark Mode leicht ab, und die beiden Themes stimmen in der scheinbaren Strichstärke überein — ohne Layoutverschiebung, wenn eine Leserin zwischen ihnen umschaltet. Grades sind ebenso nützlich für Hover- und Auswahlzustände und zur Kompensation über Displays hinweg, die Schrift schwerer oder leichter rendern als beabsichtigt.
Performance ist Barrierefreiheit
Eine Familie, die einst sechs oder acht Fontdateien erforderte, kann als eine oder zwei ausgeliefert werden (Roman und Kursiv). Auch wenn eine Variable-Datei größer ist als jede einzelne statische Instanz, ist sie fast immer kleiner als die Summe der Instanzen, die sie ersetzt, und sie kostet weniger Netzwerkanfragen. Für Lesende mit langsamen Verbindungen und bescheidenen Geräten — eine Population, die sich stark mit den Lesenden überschneidet, denen Barrierefreiheitsarbeit dient — bedeutet das weniger Zeit vor unsichtbarem oder Fallback-Text und weniger störende Wechsel, wenn der Webfont endlich eintrifft. Subsetting und moderne Kompressionsformate senken die Kosten weiter.
Es gibt auch einen Designvorteil mit einer Barrierefreiheitsdividende: Wenn jede Strichstärke verfügbar ist, hören Designer auf, Faux-Bold und Faux-Italic in Dienst zu pressen — und hören auf, einen zu leichten Schnitt nur deshalb zu wählen, weil er die einzige geladene Datei war.
Personalisierung: das größere Versprechen
Die tiefste Chance ist noch weitgehend unverwirklicht: Lesende die Schrift selbst abstimmen zu lassen. Eine Leseanwendung oder Longform-Website, die auf einem Variable Font aufbaut, kann einen Strichstärkenregler, eine Breitenanpassung, eine Abstandskontrolle anbieten — stufenlos, unmittelbar und umkehrbar. Eine sehbehinderte Leserin, der die Standardstärke zu dünn ist, kann sie nach Geschmack verdicken, statt zwischen „normal“ und „fett“ wählen zu müssen. Eine ältere Leserin kann die Formen leicht verbreitern. Das sind genau die Anpassungen, von denen die Forschung zu Sehbehinderung seit Langem annimmt, dass sie helfen, und Variable Fonts machen es billig, sie anzubieten.
Wenige Websites tun das bisher, und eine Standardschnittstelle dafür existiert nicht. Aber die technische Hürde ist gefallen, und die Position dieser Publikation ist, dass von Lesenden abstimmbare Schrift die Richtung ist, in die sich Bildschirmtypografie bewegen sollte: Der Designer setzt einen wohlüberlegten Standard, und die Leserin darf davon abweichen.
Warum dieses Kapitel neu ist
Als die erste Auflage erschien, konnten Webseiten Schriften überhaupt nicht zuverlässig einbetten — Typografie bedeutete, unter der Handvoll Schriften zu wählen, die auf dem Rechner der Leserin installiert waren. Die Einbettung von Webfonts kam um 2010; Variable Fonts wurden 2016 spezifiziert und erreichten in den Folgejahren breite Browserunterstützung. Die Idee, dass ein Stylesheet eine Strichstärke von 435 angeben könnte oder dass optische Größen aus der Bleisatzära über eine Achse in einer Datei zurückkehren könnten, existierte schlicht nicht, um beschrieben zu werden.
In CSS
body {
font-optical-sizing: auto; /* opsz: text forms at text sizes */
}
@media (prefers-color-scheme: dark) {
/* grade trims dark-mode weight bloom without reflow */
body { font-variation-settings: "GRAD" -20; }
}Empfehlungen
- Bevorzugen Sie Variable Fonts für neue Projekte; liefern Sie eine Roman- und eine Kursivdatei aus statt eines Stapels statischer Schnitte.
- Wählen Sie Schriften mit einer Achse für optische Größe für Interfaces, die Text in vielen Größen setzen, und lassen Sie
font-optical-sizing: autoin Kraft. - Nutzen Sie die Grade-Achse (wo verfügbar), um die scheinbare Strichstärke im Dark Mode zu korrigieren, ohne einen Neuumbruch auszulösen.
- Verwenden Sie nach Möglichkeit High-Level-CSS-Eigenschaften (
font-weight,font-stretch) statt rohemfont-variation-settings. - Verlassen Sie sich nie auf Faux-Bold oder Faux-Italic; die Variable-Datei stellt die echten Formen bereit.
- Wo Longform-Lesen das Produkt ist, erwägen Sie, Lesenden direkte Kontrolle über Strichstärke und Breite zu geben — und merken Sie sich ihre Wahl.