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 zuerst an, wie Typografie im Web funktioniert und welche Innovationen variable Schriftarten mit sich bringen.

Browserkompatibilität

Seit Mai 2020 werden variable Schriftarten von 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 oft übersehen wird, ist der Unterschied zwischen einem Stil und einer Familie. Ein Stil ist eine einzelne und spezifische Schriftart, z. B. „Fett kursiv“, und eine Familie ist die vollständige Sammlung von Stilen.

Vor variablen Schriftarten wurde jeder Stil als separate Schriftdatei implementiert. Bei 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 reichhaltig und ausgefeilt ist, sodass das Lesen 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 Webschriften müssen Nutzer für jeden in unseren Designs verwendeten Stil eine separate Schriftdatei herunterladen, was die Latenz und die Seiten-Renderingzeit erhöht. Wenn Sie nur die Schriftschnitte „Normal“ und „Fett“ sowie ihre kursiven Varianten einschließen, können die Schriftdaten 500 KB oder mehr betragen. Und das, bevor wir uns mit der Darstellung der Schriftarten, den erforderlichen Fallback-Mustern oder unerwünschten Nebenwirkungen 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 „Standard“-Stil, in der Regel „Normal“. Das ist ein aufrechtes römisches Design mit dem gängigsten Gewicht und der gängigsten Breite, das sich am besten für einfachen Text eignet. Dieser wird dann mit anderen Stilen in einem kontinuierlichen Bereich verbunden, der als „Achse“ bezeichnet wird. Die am häufigsten verwendete Achse ist Gewicht, mit der der Standardstil mit einem fetten Stil verbunden werden kann. 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 Gewichtsachse als „SemiBold“ bezeichnet.

Die variable Schriftart Roboto Flex hat drei Stile für die Achse Weight (Gewicht). Der Stil „Normal“ befindet sich in der Mitte und an den gegenüberliegenden Enden der Achse gibt es zwei Stile, einen helleren und einen dunkleren. 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 bereitzustellen.

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. Und wenn es keine Leistungseinbußen gibt, können Webentwickler so viele oder so wenige Stile verwenden, wie sie möchten – das hängt vom Design ab.

Kursiv

Die Verwendung von Kursivschrift in variablen Schriftarten ist interessant, 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 an einem vom Schriftdesigner festgelegten Punkt entlang der optischen Größe eine Glyphensubstitution erfolgen, ähnlich wie bei der Italic-Achse.

Zusammenfassend lässt sich sagen, dass Schriftdesigner, sofern die Konturen dies zulassen, Schriftarten erstellen können, die in einem mehrdimensionalen Designbereich zwischen verschiedenen Stilen 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. Diese Informationen sollten in der Dokumentation der Schriftart enthalten sein. Sie können die Schriftart auch mit einem Tool wie Wakamai Fondue prüfen.

Anwendungsfälle und Vorteile

Die Festlegung der Achsenwerte hängt vom persönlichen Geschmack und der Anwendung typografischer Best Practices ab. 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, die Aufregung ausdrücken

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 der Schriftart Zycon verwendet werden. Sehen Sie sich das Live-Animationbeispiel auf Axis Praxis an.

Anicons ist die weltweit erste animierte Farbsymbolschrift, 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 Schriftdatei.

2. Stilbereiche:Sie sehen, dass wir für font-weight und font-stretch zwei Werte 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.

Gewichte und Breiten 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%;
}

Kursivschrift und Schrägstriche verwenden

Die Achse ital ist für Schriftarten gedacht, die sowohl einen normalen als auch einen kursiven Schriftschnitt 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 Kursivschrift dadurch, dass es sich nicht um einen neuen Stil handelt, sondern nur um eine Schrägstellung des normalen Stils. Der Standardwert ist 0, was für die Standardbuchstabenform steht. Roboto Flex hat eine maximale Neigung von -10 Grad. Das bedeutet, dass die Buchstaben von 0 auf -10 Grad nach rechts geneigt werden.

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

Eine Schriftart kann sehr klein (Fußnote mit 12 px) oder sehr groß (Überschrift mit 80 px) dargestellt 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 er 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 bewusst eine optische Größe wünschen, 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 ist „Grade“ (GRAD). Eine Grade-Achse ist interessant, da sie das Gewicht der Schrift ändert, ohne die Breite zu verändern. Daher ändern sich auch die Zeilenumbrüche nicht. 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.

GRAD ist eine benutzerdefinierte Achse mit einem Bereich von -200 bis 150 in Roboto Flex. 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 bei Google Fonts

Google Fonts hat seinen Katalog um variable Schriftarten erweitert und fügt 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 von Schriftvarianteneinstellungen

Alle registrierten Achsen werden bald über vorhandene CSS-Eigenschaften unterstützt. Vorläufig müssen Sie möglicherweise font-variation-settings als Fallback verwenden. Wenn Ihre Schriftart benutzerdefinierte Achsen hat, benötigen Sie auch font-variation-settings.

Bei font-variation-settings gibt es jedoch ein kleines Problem. Alle Properties, die Sie nicht explizit festlegen, werden automatisch auf die Standardeinstellungen zurückgesetzt. Bisher festgelegte Werte werden nicht übernommen. Das bedeutet, dass die folgenden Funktionen nicht wie erwartet funktionieren:

<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 die Standardeinstellung „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 Stilen „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 Ihre Schriftart auf Nutzerinteraktionen reagiert, sollten Sie Eingabeereignisse drosseln oder schleifen. So wird verhindert, dass der Browser Instanzen der variablen Schriftart rendert, die sich so wenig von der vorherigen Instanz unterscheiden, dass das menschliche Auge den Unterschied nicht 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. So weiß der Browser schon früh, wo er die Schriftarten finden kann, wenn er sie im CSS-Code findet:

<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

Alle modernen Browser unterstützen variable Schriftarten. Wenn 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 Schriftstä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 unterstützen, erhalten die variable Schriftart und haben alle Schriftstärken 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.