Einführung in variable Schriftarten im Web

Eine neue Schriftspezifikation, mit der sich die Größe von Schriftdateien erheblich reduzieren lässt

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

In diesem Artikel erfahren Sie, was variable Schriftarten sind, welche Vorteile sie bieten und wie Sie sie in Ihrer Arbeit einsetzen können. Sehen wir uns zunächst an, wie Typografie im Web funktioniert und welche Innovationen

Browserkompatibilität

Seit Mai 2020 werden variable Schriftarten in den meisten Browsern unterstützt. Weitere Informationen finden Sie unter Kann ich variable Schriftarten verwenden? und Fallbacks.

Einführung

Die Begriffe „Schrift“ und „Schriftschnitt“ werden von Entwicklern oft synonym verwendet. Es gibt jedoch einen Unterschied: Eine Schriftart ist das zugrunde liegende visuelle Design, das in vielen verschiedenen Schriftsatztechnologien vorhanden sein kann. Eine Schrift ist eine dieser Implementierungen in einem digitalen Dateiformat. Mit anderen Worten: Ein Schriftbild ist das, was Sie sehen, und die Schriftart ist das, was Sie verwenden.

Ein weiteres Konzept, das häufig übersehen wird, ist die Unterscheidung zwischen einem Stil und einer Familie. Ein Stil ist ein einzelnes und spezifisches Schriftbild, z. B. fett-kursiv, und eine Familie ist der vollständige Satz von Stilen.

Vor variablen Schriftarten wurde jeder Stil als separate Schriftdatei implementiert. Mit variablen Schriftarten können alle Stile in einer einzigen Datei enthalten sein.

Herausforderungen für Designer und Entwickler

Wenn ein Designer ein Druckprojekt erstellt, stehen ihm einige Einschränkungen zur Verfügung, z. B. die physische Größe des Seitenlayouts oder die Anzahl der Farben, die er verwenden kann (dies wird von der Art der Druckmaschine bestimmt, die verwendet wird). Sie können jedoch beliebig viele Schriftarten verwenden. Das bedeutet, dass die Typografie von Printmedien oft detailreich und ausgefeilt ist, sodass der Lesespaß wirklich angenehm ist. Denken Sie an das letzte Mal, als Sie sich ein gutes Magazin angesehen haben.

Webdesigner und Entwickler haben andere Einschränkungen als Printdesigner. Eine wichtige davon sind die damit verbundenen Bandbreitenkosten unserer Designs. Dies war ein Stolperstein für eine bessere Typografie, da sie mit Kosten verbunden ist. Bei herkömmlichen Webschriftarten müssen Nutzer für jeden in unseren Designs verwendeten Stil eine separate Schriftartdatei herunterladen. Dadurch erhöht sich die Latenz und die Renderingzeit der Seite. Wenn Sie nur die Stile „Normal“ und „Fett“ sowie ihre kursiven Varianten einschließen, können die Schriftdaten 500 KB oder mehr betragen. Dies geschieht noch bevor wir uns mit der Darstellung der Schriftarten, den zu verwendenden Fallback-Mustern oder unerwünschten Nebeneffekten wie FOIT und FOUT befasst haben.

Viele Schriftfamilien bieten eine viel größere Auswahl an Stilen, von „Schmal“ bis „Schwarz“, schmale und breite Schriftschnitte, eine Vielzahl von stilistischen Details und sogar größenspezifische Designs (optimiert für große oder kleine Textgrößen). Da Sie für jeden Stil (oder jede Kombination von Stilen) eine neue Schriftdatei laden müssten, verwenden viele Webentwickler diese Funktionen nicht, was die Lesbarkeit für die Nutzer beeinträchtigt.

Anatomie einer variablen Schriftart

Variable Schriftarten lösen diese Probleme, indem sie Stile in einer einzigen Datei verpacken.

Dazu beginnen Sie mit einem zentralen oder „default“-Stil, in der Regel „Regular“. Dabei handelt es sich um ein aufrechtes römisches Design mit der typischen Gewichtung und Breite, die sich am besten für Nur-Text eignet. Dieser wird dann mit anderen Stilen in einem kontinuierlichen Bereich verbunden, der als „Achse“ bezeichnet wird. Die häufigste Achse ist die Gewichtung. Damit kann der Standardstil mit einem fett formatierten Stil verbunden werden. Jeder einzelne Stil kann entlang einer Achse platziert werden und wird als „Instanz“ der variablen Schriftart bezeichnet. Einige Instanzen werden vom Schriftentwickler benannt, z. B. wird die Position 600 der Gewichtungsachse als SemiBold bezeichnet.

Die variable Schriftart Roboto Flex hat drei Stile für die Achse Weight (Schriftstärke). Der Stil „Normal“ befindet sich in der Mitte und an den gegenüberliegenden Enden der Achse befinden sich zwei Stile, einer heller und der andere dunkler. Sie haben die Wahl zwischen 900 Instanzen:

Der Schriftentwickler kann mehrere Achsen anbieten. Sie können sie kombinieren, da sie alle dieselben Standardstile haben. Roboto hat drei Stile in einer Breiteachse: „Regular“ befindet sich in der Mitte der Achse und zwei Stile, schmaler und breiter, befinden sich an den Enden. Sie enthalten alle Breiten des Stils „Normal“ und werden mit der Gewichtsachse kombiniert, um alle Breiten für jedes Gewicht anzugeben.

Das bedeutet, dass es Tausende von Stilen gibt. Das mag auf den ersten Blick übertrieben erscheinen, aber die Lesequalität kann durch diese Vielfalt der Schriftstile erheblich verbessert werden. Ohne Leistungseinbußen können Webentwickler einige oder beliebig viele Designs verwenden.

Kursiv

Es ist interessant, wie kursiv in variablen Schriftarten gehandhabt wird, da es zwei unterschiedliche Ansätze gibt. Schriftarten wie Helvetica oder Roboto haben mit Interpolation kompatible Konturen, sodass zwischen den Schriftschnitten „Normal“ und „Kursiv“ interpoliert werden kann. Die Achse Schrägstellung kann verwendet werden, um von normaler Schrift zu Kursivschrift zu wechseln.

Andere Schriftarten wie Garamond, Baskerville oder Bodoni haben Schriftkonturen in Normal- und Kursivschrift, die nicht mit Interpolation kompatibel sind. Die Konturen, die normalerweise ein lateinisches Kleinbuchstaben-„n“ definieren, stimmen beispielsweise nicht mit den Konturen überein, die zum Definieren eines kursiven Kleinbuchstaben-„n“ verwendet werden. Anstatt eine Kontur in die andere zu interpolieren, wechselt die Achse Schräg zwischen geraden und schrägen Konturen.

Nach der Umstellung auf die Kursivschrift sollten die für den Nutzer verfügbaren Achsen mit denen für die lateinische Schrift identisch sein, ebenso wie der Zeichensatz.

Eine Glyphensubstitution kann auch für einzelne Glyphen verwendet werden und kann überall im Designbereich einer variablen Schriftart verwendet werden. Ein Dollarzeichen-Design mit zwei vertikalen Balken eignet sich beispielsweise am besten für größere Schriftgrößen, bei kleineren Schriftgrößen ist jedoch ein Design mit nur einem Balken besser geeignet. Wenn wir weniger Pixel zum Rendern des Glyphs haben, kann ein Design mit zwei Balken unlesbar werden. Um dies zu vermeiden, kann ähnlich wie bei der Italic-Achse an einem vom Schriftdesigner festgelegten Punkt entlang der optischen Größe eine Glyphe durch eine andere ersetzt werden.

Zusammenfassend lässt sich sagen, wo die Konturen dies zulassen, Schriftdesigner können Schriftarten erstellen, die zwischen verschiedenen Stilen in einem mehrdimensionalen Designbereich interpolieren. So haben Sie eine detaillierte Kontrolle über Ihre Typografie und viele Möglichkeiten.

Achsendefinitionen

Es gibt fünf registrierte Achsen, die bekannte, vorhersehbare Merkmale der Schrift steuern: Stärke, Breite, optische Größe, Schrägstellung und Kursivschrift. Außerdem kann eine Schriftart benutzerdefinierte Achsen enthalten. Damit können alle Designaspekte der Schrift nach Belieben des Schriftdesigners gesteuert werden: die Größe der Serifen, die Länge der Schnörkel, die Höhe der Aufstrichen oder die Größe des Punktes auf dem i.

Auch wenn Achsen dasselbe Merkmal steuern können, werden möglicherweise unterschiedliche Werte verwendet. In den variablen Schriftarten Oswald und Hepta Slab ist beispielsweise nur eine Achse verfügbar, „Schriftschnitt“. Die Bereiche sind jedoch unterschiedlich: Oswald hat denselben Bereich wie vor der Umstellung auf eine variable Schrift, 200 bis 700, Hepta Slab hat eine extrem dünne Schriftschnittstärke von 1, die bis zu 900 reicht.

Die fünf registrierten Achsen haben vierstellige Kleinbuchstaben-Tags, mit denen ihre Werte in CSS festgelegt werden:

Da der Schriftartenentwickler festlegt, welche Achsen in einer variablen Schriftart verfügbar sind und welche Werte sie haben können, ist es wichtig, herauszufinden, was jede Schriftart bietet. Dies sollte in der Dokumentation der Schriftart angegeben werden. Alternativ kannst du die Schriftart mit einem Tool wie Wakamai Fondue überprüfen.

Anwendungsfälle und Vorteile

Das Festlegen der Achsenwerte hängt vom persönlichen Geschmack ab und die Anwendung typografischer Best Practices. Die Gefahr bei jeder neuen Technologie ist der mögliche Missbrauch. Außerdem können Einstellungen, die zu künstlerisch oder experimentell sind, die Lesbarkeit des eigentlichen Textes beeinträchtigen. Bei Titeln ist es spannend, verschiedene Achsen zu erkunden, um ansprechende künstlerische Designs zu erstellen. Bei Textkörpern besteht jedoch die Gefahr, dass der Text unlesbar wird.

Ausdrücken von Begeisterung

Ein gutes Beispiel für künstlerischen Ausdruck ist oben zu sehen: eine Untersuchung der Schriftart Decovar von Mandy Michael.

Das funktionierende Beispiel und den Quellcode für das Beispiel oben finden Sie hier.

Animation

Außerdem können Sie die Animation von Zeichen mit variablen Schriftarten ausprobieren. Oben sehen Sie ein Beispiel für verschiedene Achsen, die mit dem Schriftbild Zycon verwendet werden. Sehen Sie sich das Live-Animationbeispiel auf Axis Praxis an.

Anicons ist die weltweit erste animierte Farbsymbol-Schriftart, die auf Material Design-Symbolen basiert. Anicons ist ein Test, bei dem zwei innovative Schrifttechnologien kombiniert werden: variable Schriftarten und Farbschriften.

Finesse

Roboto Flex und Amstelvar bieten eine Reihe von „parametrischen Achsen“. In diesen Achsen werden die Buchstaben in vier grundlegende Aspekte der Form zerlegt: schwarze oder positive Formen, weiße oder negative Formen sowie die X- und Y-Dimensionen. So wie Primärfarben mit einer beliebigen anderen Farbe gemischt werden können, um sie anzupassen, können diese vier Aspekte verwendet werden, um jede andere Achse zu optimieren.

Mit der XTRA-Achse in Amstelvar können Sie den Wert „Weiß“ pro Tausend anpassen, wie oben gezeigt. Mit kleinen XTRA-Elementen in entgegengesetzten Richtungen werden die Breiten der Wörter ausgeglichen.

Variable Schriftarten in CSS

Dateien mit variablen Schriftarten laden

Variable Schriftarten werden über denselben @font-face-Mechanismus wie herkömmliche statische Webschriften geladen, aber mit zwei neuen Verbesserungen:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. Quellformate: Wir möchten nicht, dass der Browser die Schriftart herunterlädt, wenn er keine variablen Schriftarten unterstützt. Daher fügen wir format- und tech-Beschreibungen hinzu: einmal in der zukünftigen Syntax (format('woff2') tech('variations')) und einmal in der veralteten, aber von Browsern unterstützten Syntax (format('woff2-variations')). Wenn der Browser variable Schriftarten und die neue Syntax unterstützt, wird die erste Deklaration verwendet. Wenn das Programm variable Schriftarten und die aktuelle Syntax unterstützt, wird die zweite Deklaration verwendet. Beide verweisen auf dieselbe Schriftartdatei.

2. Stilbereiche: Sie sehen, dass wir zwei Werte für font-weight und font-stretch angeben. Anstatt dem Browser mitzuteilen, welche bestimmte Schriftschnittstärke diese Schriftart bietet (z. B. font-weight: 500;), geben wir ihm jetzt den Bereich der Schriftschnittstärken an, die von der Schriftart unterstützt werden. Bei Roboto Flex reicht die Gewichtsachse von 100 bis 1.000 und in CSS wird der Achsenbereich direkt der Stileigenschaft font-weight zugeordnet. Wenn Sie den Bereich in @font-face angeben, wird jeder Wert außerhalb dieses Bereichs auf den nächstgelegenen gültigen Wert begrenzt. Der Bereich der Breitenachse wird auf die gleiche Weise der font-stretch-Property zugeordnet.

Wenn Sie die Google Fonts API verwenden, wird das alles für Sie erledigt. Das CSS enthält nicht nur die richtigen Quellformate und ‑bereiche, sondern Google Fonts sendet auch statische Fallback-Schriftarten, falls variable Schriftarten nicht unterstützt werden.

Gewichts- und Breitenangaben verwenden

Derzeit können Sie die Achsen wght bis font-weight und wdth bis font-stretch zuverlässig über CSS festlegen.

Bisher wurde font-weight als Keyword (light, bold) oder als numerischer Wert zwischen 100 und 900 in Schritten von 100 festgelegt. Bei variablen Schriftarten können Sie einen beliebigen Wert innerhalb des Bereichs „Breite“ der Schriftart festlegen:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Ebenso können wir font-stretch mithilfe von Keywords (condensed, ultra-expanded) oder mithilfe von Prozentwerten festlegen:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

Kursiv- und Schrägstriche verwenden

Die Achse ital ist für Schriftarten gedacht, die sowohl einen normalen als auch einen kursiven Stil enthalten. Die Achse dient als Ein-/Aus-Schalter: Der Wert 0 ist deaktiviert und der normale Stil wird angezeigt, der Wert 1 aktiviert die Kursivschrift. Im Gegensatz zu anderen Achsen gibt es keinen Übergang. Ein Wert von 0.5 führt nicht zu „halb kursiv“.

Die slnt-Achse unterscheidet sich von der Kursivschrift dadurch, dass es sich nicht um einen neuen Stil handelt, sondern einfach zum normalen Stil. Der Standardwert ist 0, d. h. die standardmäßigen aufrechten Buchstabenformen. Roboto Flex hat eine maximale Neigung von -10 Grad, d. h. die Buchstaben geneigt sich nach rechts, wenn sie von 0 auf -10 verlaufen.

Es wäre intuitiv, diese Achsen über die Property font-style festzulegen. Wie genau das funktioniert, wird aber derzeit noch erarbeitet. Behandeln Sie sie daher vorerst als benutzerdefinierte Achsen und legen Sie sie über font-variation-settings fest:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

Optische Größen verwenden

Ein Schriftbild kann sehr klein (Fußnote mit 12 px) oder sehr groß (eine Überschrift mit 80 px) gerendert werden. Schriftarten können auf diese Größenänderungen reagieren, indem sie die Buchstabenformen ändern, um sie besser an die Größe anzupassen. Bei einer kleinen Größe sind möglicherweise keine feinen Details erforderlich, während bei einer großen Größe mehr Details und dünnere Striche von Vorteil sein können.

Für diese Achse wurde eine neue CSS-Property eingeführt: font-optical-sizing. Standardmäßig ist der Wert auf auto festgelegt. In diesem Fall legt der Browser den Achsenwert basierend auf font-size fest. Das bedeutet, dass der Browser die beste optische Größe automatisch auswählt. Wenn Sie diese Funktion deaktivieren möchten, können Sie font-optical-sizing auf none setzen.

Sie können auch einen benutzerdefinierten Wert für die opsz-Achse festlegen, wenn Sie absichtlich eine optische Größe auswählen möchten, die nicht mit der Schriftgröße übereinstimmt. Mit dem folgenden CSS-Code wird Text zwar in einer großen, aber optisch so angezeigt, als wäre er in 8pt gedruckt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

Benutzerdefinierte Achsen verwenden

Im Gegensatz zu registrierten Achsen werden benutzerdefinierte Achsen nicht einer vorhandenen CSS-Eigenschaft zugeordnet. Sie müssen sie daher immer über font-variation-settings festlegen. Tags für benutzerdefinierte Achsen werden immer in Großbuchstaben geschrieben, um sie von registrierten Achsen zu unterscheiden.

Roboto Flex bietet einige benutzerdefinierte Achsen. Die wichtigste Achse ist die Note (GRAD). Eine Notenachse ist interessant, da sie die Schriftstärke ändert, ohne die Breite zu ändern, sodass sich keine Zeilenumbrüche ändern. Wenn Sie mit einer Neigungsachse experimentieren, müssen Sie nicht an der Gewichtsachse herumfummeln, was sich auf die Gesamtbreite auswirkt, und dann an der Breite, was sich auf das Gesamtgewicht auswirkt.

Da GRAD eine benutzerdefinierte Achse mit einem Bereich von -200 bis 150 in Roboto Flex ist. Wir müssen das Problem mit font-variation-settings beheben:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Variable Schriftarten in Google Fonts

Google Fonts hat seinen Katalog um variable Schriftarten erweitert und fügen regelmäßig neue hinzu. Die Benutzeroberfläche ist derzeit auf die Auswahl einzelner Instanzen aus der Schriftart ausgerichtet: Wählen Sie die gewünschte Variante aus, klicken Sie auf „Diesen Stil auswählen“ und sie wird dem <link>-Element hinzugefügt, das das CSS und die Schriftarten aus Google Fonts abruft.

Wenn Sie alle verfügbaren Achsen oder Wertebereiche verwenden möchten, müssen Sie die URL zur Google Fonts API manuell erstellen. In der Übersicht über variable Schriftarten sind alle Achsen und Werte aufgeführt.

Im Tool Google Variable Fonts Links finden Sie auch die neuesten URLs für die vollständigen variablen Schriftarten.

Übernahme der Einstellungen für die Schriftartvariation

Alle registrierten Achsen werden bald durch vorhandene CSS-Attribute unterstützt. Derzeit müssen Sie sich jedoch möglicherweise auf font-variation-settings als Fallback verlassen. Wenn Ihre Schriftart benutzerdefinierte Achsen hat, benötigen Sie auch font-variation-settings.

Hier gibt es aber ein bisschen Haken bei font-variation-settings. Alle Properties, die Sie nicht explizit festlegen, werden automatisch auf die Standardeinstellungen zurückgesetzt. Zuvor festgelegte Werte werden nicht übernommen. Das bedeutet, dass Folgendes nicht wie erwartet funktioniert:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

Zuerst wendet der Browser font-variation-settings: 'slnt' 10 aus der Klasse .slanted an. Anschließend wird font-variation-settings: 'GRAD' -200 aus der Klasse .grade-light angewendet. Dadurch wird slnt jedoch auf den Standardwert 0 zurückgesetzt. Das Ergebnis ist Text in einer hellen Schriftart, der aber nicht geneigt ist.

Glücklicherweise können wir das Problem mithilfe von CSS-Variablen umgehen:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

CSS-Variablen werden kaskadiert. Wenn also ein Element (oder eines seiner übergeordneten Elemente) slnt auf 10 festgelegt hat, bleibt dieser Wert erhalten, auch wenn Sie GRAD auf einen anderen Wert festlegen. Eine ausführliche Erklärung dieser Methode finden Sie unter Übernahme von variablen Schriftarten korrigieren.

Das Animieren von CSS-Variablen funktioniert nicht (so war es vorgesehen). Das folgende Beispiel funktioniert also nicht:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Diese Animationen müssen direkt auf font-variation-settings erfolgen.

Leistungsstark

Mit OpenType-Variable-Fonts können wir mehrere Varianten einer Schriftfamilie in einer einzigen Schriftdatei speichern. Monotype führte einen Test durch, bei dem 12 Eingabeschriften kombiniert wurden, um acht Schriftschnitte in drei verschiedenen Breiten und in den Schriftstilen „Kursiv“ und „Latein“ zu generieren. Durch das Speichern von 48 einzelnen Schriftarten in einer einzigen Datei mit variablen Schriftarten konnte die Dateigröße um 88 % reduziert werden.

Wenn Sie jedoch nur eine Schriftart wie Roboto Regular verwenden, ist der Nettogewinn bei der Schriftgröße möglicherweise nicht so groß, wenn Sie zu einer variablen Schriftart mit vielen Achsen wechseln. Wie immer hängt es von Ihrem Anwendungsfall ab.

Andererseits kann die Animation der Schriftart zwischen den Einstellungen zu Leistungsproblemen führen. Das wird sich verbessern, sobald die Unterstützung variabler Schriftarten in Browsern ausgereifter ist. Das Problem lässt sich jedoch etwas reduzieren, indem nur Schriftarten animiert werden, die sich gerade auf dem Bildschirm befinden. Mit diesem praktischen Snippet von Dinamo werden Animationen in Elementen mit der Klasse vf-animation pausiert, wenn sie nicht auf dem Bildschirm sind:

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

Wenn die Schriftart auf Nutzerinteraktionen reagiert, sollten Sie Eingabeereignisse drosseln oder entprellen. So wird verhindert, dass der Browser Instanzen der variablen Schriftart rendert, die sich so wenig von der vorherigen Instanz unterscheiden, dass das menschliche Auge keinen Unterschied erkennen kann.

Wenn Sie Google Fonts verwenden, sollten Sie eine Vorabverbindung mit https://fonts.gstatic.com herstellen, der Domain, auf der die Google-Schriftarten gehostet werden. Dadurch weiß der Browser schon früh, wo er die Schriftarten finden kann, wenn er im CSS auf sie stößt:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Dieser Tipp gilt auch für andere CDNs: Je früher der Browser eine Netzwerkverbindung herstellen kann, desto schneller können Ihre Schriftarten heruntergeladen werden.

Weitere Leistungstipps zum Laden von Google Fonts finden Sie unter Die schnellsten Google Fonts.

Fallbacks und Browserunterstützung

Variable Schriftarten werden von allen modernen Browsern unterstützt. Falls Sie ältere Browser unterstützen müssen, können Sie Ihre Website mit statischen Schriftarten erstellen und variable Schriftarten als progressive Verbesserung verwenden:

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

In älteren Browsern wird Text mit der Klasse .super-bold in normaler Fettdruckschrift dargestellt, da dies die einzige verfügbare Fettdruckschrift ist. Wenn variable Schriftarten unterstützt werden, können wir die höchste Stärke von 1.000 verwenden.

Die Regel @supports wird von Internet Explorer nicht unterstützt. Daher wird in diesem Browser kein Styling angezeigt. Wenn das ein Problem darstellt, können Sie jederzeit einen der Oldschool-Hacks verwenden, um Ihre Anzeigen auf relevante ältere Browser auszurichten.

Wenn Sie die Google Fonts API verwenden, werden die richtigen Schriftarten für die Browser Ihrer Besucher geladen. Angenommen, Sie fordern die Schriftart „Oswald“ im Bereich von 200 bis 700 an:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Moderne Browser, die variable Schriftarten verarbeiten können, erhalten die variable Schriftart und stellen jede Schriftstärke zwischen 200 und 700 zur Verfügung. Ältere Browser erhalten für jede Schriftstärke separate statische Schriftarten. In diesem Fall werden also sechs Schriftdateien heruntergeladen: eine für die Schriftstärke 200, eine für die Schriftstärke 300 usw.

Vielen Dank

Dieser Artikel wäre ohne die Unterstützung der folgenden Personen nicht möglich gewesen:

• Mustafa Kurtuldu, UX-Designer und Design-Anwalt bei Google
• Roel Nieskens, UX-Designer/Entwickler und Typografieexperte bei Kabisa
• Dave Crossland, Program Manager, Google Fonts
• David Berlow, Schriftdesigner und Typograf bei Font Bureau
• Laurence Penney, Entwickler von axis-praxis.org
• Mandy Michael, Entwickler von variablefonts.dev

Hero-Image von Bruno Martins auf Unsplash.