Einführung in variable Schriftarten im Web

Eine neue Spezifikation für Schriftarten, mit der die Schriftgröße erheblich reduziert werden kann

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

In diesem Artikel schauen wir uns an, was variable Schriftarten sind, welche Vorteile sie bieten und wie wir sie in unserer Arbeit verwenden können. Sehen wir uns zunächst an, wie die Typografie im Web funktioniert und welche Innovationen Variable Schriftarten mit sich bringen.

Browserkompatibilität

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

Einleitung

Die Begriffe Schriftart und Schriftart werden von Entwicklern häufig synonym verwendet. Es gibt jedoch einen Unterschied: Ein Schriftbild ist das zugrunde liegende visuelle Design, das in vielen verschiedenen Satztechnologien vorhanden sein kann. Eine Schriftart in einem digitalen Dateiformat ist eine dieser Implementierungen. 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 der Unterschied zwischen einem Stil und einer Familie. Ein Stil ist ein einzelnes, spezifisches Schriftbild, z. B. „Fett-kursiv“, und eine Familie umfasst alle Stile.

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

Herausforderungen für Designschaffende und Entwickelnde

Wenn Designer ein Druckprojekt erstellen, müssen sie mit einigen Einschränkungen konfrontiert werden, z. B. hinsichtlich der physischen Größe des Seitenlayouts, der Anzahl der Farben, die sie verwenden können (die von der Art der Druckpresse bestimmt wird, die verwendet wird) usw. Sie können jedoch so viele Schriftbilder verwenden, wie sie möchten. Das bedeutet, dass die Typografie von Printmedien oft aufwendig und ausgefeilt ist, was das Lesen wirklich angenehm macht. Denken Sie an das letzte Mal, als Sie eine hervorragende Zeitschrift gelesen haben.

Webdesignschaffende und -entwickler haben andere Einschränkungen als Druckdesignschaffende, und von entscheidender Bedeutung sind die damit verbundenen Bandbreitenkosten unserer Designs. Dies ist bisher ein Stolperstein für umfassendere typografische Inhalte, da sie ihren Preis haben. Bei herkömmlichen Webschriftarten müssen Nutzer für jeden in unseren Designs verwendeten Stil eine separate Schriftartdatei herunterladen, was die Latenz und die Seitenrenderingzeit erhöht. Nur die Stile „Regular“ und „Fett“ sowie ihre kursiven Entsprechungen können Schriftdaten von mindestens 500 KB umfassen. Dies geschieht, bevor wir uns damit befasst haben, wie die Schriftarten gerendert werden, welche Fallback-Muster wir verwenden müssen oder unerwünschte Nebeneffekte wie FOIT und FOUT.

Viele Schriftfamilien bieten eine viel breitere Palette von Stilen, von dünnen bis schwarzen Schriftgrößen, schmalen und breiten Breiten, 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 Stilkombination) eine neue Schriftartdatei laden müssten, verwenden viele Webentwickler diese Funktionen nicht, was die Leseerfahrung für ihre Nutzer verringert.

Anatomie einer variablen Schriftart

Variable Schriftarten begegnen diesen Herausforderungen, indem sie Stile in einer einzigen Datei bündeln.

Dies funktioniert mit einem zentralen oder „Standard“-Stil, in der Regel „Regular“ – einem aufrechten römischen Design mit der typischen Gewichtung und Breite, die sich am besten für Klartext eignet. Diese wird dann mit anderen Stilen in einem kontinuierlichen Bereich verbunden, der als „Achse“ bezeichnet wird. Die am häufigsten verwendete Achse ist Weight (Gewichtung). Hier kann der Standardstil mit einem fett formatierten Stil verbunden werden. Jeder einzelne Stil kann sich entlang einer Achse befinden und wird als „Instanz“ der Variablenschrift bezeichnet. Einige Instanzen werden vom Schriftartentwickler benannt, z. B. wird der Ort 600 der Gewichtsachse als SemiBold bezeichnet.

Die Schriftart Roboto Flex der Variablen hat drei Stile für die Weight-Achse. Der Stil „Regular“ befindet sich in der Mitte und es gibt zwei Stile an den gegenüberliegenden Enden der Achse, einen leichteren und einen schwerer. Dazwischen können Sie aus 900 Instanzen auswählen:

Der Schriftartentwickler kann eine Reihe verschiedener Achsen anbieten. Diese lassen sich kombinieren, da sie alle dieselben Standardstile haben. Roboto hat drei Stile auf einer Breitenachse: Die „Regular“-Achse befindet sich in der Mitte der Achse und zwei Stile, schmaler und breiter, befinden sich an jedem Ende. Sie entsprechen den Breiten des Regular-Stils und in Kombination mit der Gewichtachse, um alle Breiten für jede Gewichtung bereitzustellen.

Das heißt, es gibt Tausende von Stilen! Das mag nach einem großen Overkill erscheinen, aber die Qualität des Leseerlebnisses kann durch diese Vielfalt der Schriftstile noch bemerkenswert verbessert werden. Und wenn es keine Leistungseinbußen gibt, können Webentwickler einige oder so viele Stile verwenden, wie sie möchten. Es liegt in ihrem Design.

Kursiv

Die kursive Darstellung in variablen Schriftarten ist interessant, da es zwei unterschiedliche Ansätze gibt. Schriftbilder wie Helvetica oder Roboto haben interpolationskompatible Konturen. Daher können ihre römischen und kursiven Stile zwischen ihnen interpoliert werden und die Slant-Achse kann verwendet werden, um von römisch in kursiv zu wechseln.

Andere Schriftbilder (z. B. Garamond, Baskerville oder Bodoni) haben römische und kursive Glyphenkonturen, die nicht interpoliert werden können. Die Konturen, für die normalerweise ein kleiner römischer „n“ definiert wird, stimmen beispielsweise nicht mit den Konturen überein, die zum Definieren eines kursiven kleingeschriebenen „n“ verwendet wurden. Anstatt eine Kontur in eine andere zu interpolieren, wechselt die kursiv Achse von römischen zu kursiven Konturen.

Nach der Umstellung auf Kursiv sollten die für den Nutzer verfügbaren Achsen mit denen für Roman übereinstimmen, ebenso wie der Zeichensatz.

Eine Möglichkeit zum Ersetzen von Glyphen kann auch für einzelne Glyphen gefunden und überall im Designbereich mit variabler Schriftart verwendet werden. Ein Dollarzeichendesign mit zwei vertikalen Balken funktioniert beispielsweise bei größeren Punktgrößen am besten. Bei kleineren Punktgrößen ist ein Design mit nur einem Balken besser. Wenn wir weniger Pixel zum Rendern der Glyphe haben, kann ein Design mit zwei Balken unlesbar werden. Um dies zu vermeiden, kann ähnlich wie bei der kursiven Achse entlang der optischen Größe an einem vom Schriftsteller festgelegten Punkt ein Glyphen durch ein anderes ersetzt werden.

Kurz gesagt: Wenn die Konturen es zulassen, können Schriftdesigner Schriftarten erstellen, die sich zwischen verschiedenen Stilen in einem mehrdimensionalen Designraum interpolieren. Dies gibt Ihnen eine detaillierte Kontrolle über die Typografie und viel Kontrolle.

Achsendefinitionen

Es gibt fünf registrierte Achsen, über die bekannte, vorhersehbare Merkmale der Schriftart gesteuert werden: Gewicht, Breite, optische Größe, Neigung und Kursivschrift. Darüber hinaus kann eine Schriftart benutzerdefinierte Achsen enthalten. Damit lassen sich alle Designaspekte der Schriftart steuern, die sich der Schriftdesigner wünscht: die Größe der Serifen, die Länge der Scheiben, die Höhe der Oberlängen oder die Größe des Punkts auf dem i.

Obwohl Achsen zwar dasselbe Element steuern können, können sie unterschiedliche Werte verwenden. In den Variablenschriften Oswald und Hepta Slab ist beispielsweise nur eine Achse verfügbar, Gewicht, aber die Bereiche sind unterschiedlich. Oswald hat den gleichen Bereich wie vor der Aktualisierung, von 200 bis 700, aber Hepta Slab hat eine extreme Haarlinienstärke von 1, die bis zu 900 reicht.

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

Da der Schriftartentwickler definiert, welche Achsen in einer variablen Schriftart verfügbar sind und welche Werte sie haben können, müssen Sie unbedingt herausfinden, was jede Schriftart zu bieten hat. Die Dokumentation der Schriftart sollte dies enthalten. Alternativ können Sie die Schriftart mit einem Tool wie Wakamai Fondue überprüfen.

Anwendungsfälle und Vorteile

Das Festlegen der Werte für die Achsen hängt vom persönlichen Geschmack und von Best Practices für die Typografie ab. Die Gefahr bei jeder neuen Technologie ist ein möglicher Missbrauch. Außerdem können Einstellungen, die übermäßig künstlerisch oder erforschend sind, die Lesbarkeit des eigentlichen Textes beeinträchtigen. Bei Titeln ist es spannend, verschiedene Achsen zu erkunden, um tolle künstlerische Designs zu erstellen. Für den Haupttext besteht jedoch die Gefahr, dass der Text unlesbar wird.

Spannender Gesichtsausdruck

Ein tolles Beispiel für künstlerischen Ausdruck ist oben zu sehen: eine Erkundung des Schriftbilds Decovar von Mandy Michael.

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

Animation

Außerdem können Sie Animationen mit variablen Schriftarten ausprobieren. Oben sehen Sie ein Beispiel für verschiedene Achsen, die mit der Schriftart Zycon verwendet werden. Beispiel für eine Live-Animation auf Axis Priaxis

Anicons ist die weltweit erste animierte Schriftart für Farbsymbole, die auf Material Design-Symbolen basiert. Anicons ist ein Experiment, das zwei hochmoderne Schriftarttechnologien kombiniert: variable Schriftarten und Farbschriften.

Logo: Finesse

Roboto Flex und Amstelvar bieten eine Reihe von "parametrischen Achsen" an. Auf 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 jeder anderen Farbe gemischt werden können, um sie anzupassen, lassen sich diese vier Aspekte auch zur Feinabstimmung jeder anderen Achse verwenden.

Mit der XTRA-Achse in Amstelvar können Sie den Wert für "Weiß" pro 1.000 Millisekunden anpassen, wie oben dargestellt. Werden kleine Teile von XTRA in entgegengesetzte Richtungen verwendet, werden die Breiten der Wörter ausgeglichen.

Variable Schriftarten in CSS

Variablenschriftdateien werden geladen

Variable Schriftarten werden über den gleichen @font-face-Mechanismus wie traditionelle statische Webschriftarten geladen, jedoch 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: Der Browser soll die Schriftart nicht herunterladen, wenn er keine Variablenschriften unterstützt. Daher fügen wir format- und tech-Beschreibungen hinzu: einmal in der zukünftigen Syntax (format('woff2') tech('variations')), einmal in der eingestellten, aber von Browsern unterstützten Syntax (format('woff2-variations')). Wenn der Browser variable Schriftarten und die kommende Syntax unterstützt, wird die erste Deklaration verwendet. Wenn sie variable Schriftarten und die aktuelle Syntax unterstützt, wird die zweite Deklaration verwendet. Beide verweisen auf dieselbe Schriftartdatei.

2. Stilbereiche:Sie werden feststellen, dass wir zwei Werte für font-weight und font-stretch bereitstellen. Anstatt dem Browser die spezifische Gewichtung dieser Schriftart anzugeben (z. B. font-weight: 500;), geben wir jetzt den Bereich der von der Schriftart unterstützten Gewichtungen an. Bei Roboto Flex reicht die Gewichtsachse von 100 bis 1.000 und CSS ordnet den Achsenbereich direkt der Stileigenschaft font-weight zu. Wenn Sie den Bereich in @font-face angeben, wird jeder Wert außerhalb dieses Bereichs auf den nächsten gültigen Wert begrenzt. Der Achsenbereich „Breite“ wird auf dieselbe Weise der Eigenschaft font-stretch zugeordnet.

Wenn Sie die Google Fonts API verwenden, wird diese Aufgabe ebenfalls erledigt. Der CSS-Code enthält nicht nur die richtigen Quellformate und -bereiche, Google Fonts sendet auch statische Fallback-Schriftarten für den Fall, dass variable Schriftarten nicht unterstützt werden.

Gewichtungen und Breiten verwenden

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

Traditionell würden Sie font-weight als Keyword (light, bold) oder als numerischen Wert zwischen 100 und 900 in Schritten von 100 festlegen. Mit variabler Schrift können Sie einen beliebigen Wert innerhalb des Breitenbereichs der Schriftart festlegen:

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

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

Ebenso kann font-stretch mit Keywords (condensed, ultra-expanded) oder mit Prozentwerten festgelegt werden:

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

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

Kursiv- und Schrägschrift

Die ital-Achse ist für Schriftarten vorgesehen, die sowohl einen normalen als auch einen Kursivstil enthalten. Die Achse ist als An-/Aus-Schalter gedacht: Der Wert 0 ist ausgeschaltet und der reguläre Stil wird angezeigt, der Wert 1 kursiv. Im Gegensatz zu anderen Achsen gibt es keinen Übergang. Der Wert 0.5 gibt nicht "halb Kursiv" an.

Die slnt-Achse unterscheidet sich von Kursivschrift darin, dass es sich nicht um einen neuen Stil handelt, sondern nur um den regulären Stil erweitert wird. Der Wert ist standardmäßig 0. Das bedeutet, dass die aufrechten Buchstaben verwendet werden. Roboto Flex hat eine maximale Neigung von -10 Grad, d. h., die Buchstaben werden von 0 bis -10 nach rechts geneigt.

Es wäre intuitiv, diese Achsen mit dem Attribut font-style festzulegen, aber seit April 2020 wird die genaue Vorgehensweise noch nicht ausgereift. Fürs Erste sollten Sie diese als benutzerdefinierte Achsen behandeln und über font-variation-settings festlegen:

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 Pixel) oder sehr groß (Überschrift mit 80 Pixeln) gerendert werden. Schriftarten können auf diese Größenänderungen reagieren, indem sie die Buchstabenformen an ihre Größe anpassen. Eine kleine Größe ist ohne feine Details möglicherweise besser, während eine große von mehr Details und dünneren Strichen profitieren kann.

Für diese Achse wurde eine neue CSS-Eigenschaft eingeführt: font-optical-sizing. Die Standardeinstellung ist auto, wodurch der Browser den Achsenwert anhand von font-size festlegt. Das bedeutet, dass der Browser automatisch die beste optische Größe auswählt. Wenn Sie diese Funktion deaktivieren möchten, können Sie für font-optical-sizing den Wert none festlegen.

Sie können auch einen benutzerdefinierten Wert für die opsz-Achse festlegen, wenn die optische Größe nicht mit der Schriftgröße übereinstimmt. Der folgende CSS-Code würde dazu führen, dass Text in großer, aber in optischer Größe angezeigt wird, 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 keiner vorhandenen CSS-Eigenschaft zugeordnet, sodass Sie sie immer über font-variation-settings festlegen müssen. 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 die Grade-Achse (GRAD). Eine Grade-Achse ist interessant, da sie die Stärke der Schriftart ändert, ohne die Breite zu ändern, sodass sich Zeilenumbrüche nicht ändern. Wenn Sie mit einer Notenachse spielen, vermeiden Sie, dass Sie an der Gewichtsachse, die sich auf die Gesamtbreite auswirken, und anschließend an der Breitenachse, die sich auf das Gesamtgewicht auswirken, ständig verändern muss.

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

.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 regelmäßig neue hinzugefügt. Über die Benutzeroberfläche werden derzeit einzelne Instanzen aus der Schriftart ausgewählt: Sie wählen die gewünschte Variante aus und klicken auf „Diesen Stil auswählen“. Die Schriftart wird dann dem <link>-Element hinzugefügt, das den CSS-Code und die Schriftarten von 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 Fonts“ sind alle Achsen und Werte aufgeführt.

Mit dem Tool Google Variable Fonts-Links erhalten Sie auch die aktuellen URLs für die vollständigen Variablenschriftarten.

Übernahme von Einstellungen für Schriftartvariationen

Alle registrierten Achsen werden bald über vorhandene CSS-Eigenschaften unterstützt. Bis auf Weiteres müssen Sie möglicherweise font-variation-settings als Fallback verwenden. Und wenn Ihre Schriftart benutzerdefinierte Achsen hat, benötigen Sie auch font-variation-settings.

Aber hier ist ein kleiner Fehler mit font-variation-settings. Alle Attribute, die Sie nicht explizit festlegen, werden automatisch auf ihre Standardeinstellung 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. Dann 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 leichtem Schriftgrad, aber nicht schräg.

Dies lässt sich jedoch 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 für ein Element (oder eines seiner übergeordneten Elemente) slnt auf 10 gesetzt wurde, wird dieser Wert beibehalten, auch wenn Sie GRAD auf etwas anderes setzen. Eine ausführliche Erläuterung dieses Verfahrens finden Sie unter Korrektur der Schriftübernahme von Variablen.

Die Animation von CSS-Variablen funktioniert nicht (grundsätzlich), sodass etwas Ähnliches nicht funktioniert:

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

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

Leistungsstark

Mit OpenType-Variablenschriftarten können mehrere Varianten einer Schriftfamilie in einer einzigen Schriftartdatei gespeichert werden. Monotype führte einen Test durch, bei dem 12 Eingabeschriftarten kombiniert wurden, um im kursiven und römischen Stil acht Schriftstärken in drei Breiten zu generieren. Durch das Speichern von 48 einzelnen Schriftarten in einer einzigen variablen Schriftartdatei konnte die Dateigröße um 88% reduziert werden.

Wenn Sie jedoch eine einzelne Schriftart wie Roboto Regular und nichts anderes verwenden, erzielen Sie möglicherweise keinen Nettozuwachs bei der Schriftgröße, wenn Sie zu einer variablen Schriftart mit vielen Achsen wechseln. Das hängt wie immer von Ihrem Anwendungsfall ab.

Andererseits kann das Animieren der Schriftart zwischen den Einstellungen zu Leistungsproblemen führen. Das wird sich zwar verbessern, sobald die Unterstützung für unterschiedliche Schriftarten in Browsern ausgereift ist, das Problem lässt sich jedoch etwas verringern, wenn nur noch animierte Schriftarten verwendet werden, die derzeit auf dem Bildschirm zu sehen sind. Dieses praktische Snippet von Dinamo pausiert Animationen in Elementen der Klasse vf-animation, wenn sie nicht auf dem Bildschirm angezeigt werden:

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. Dadurch wird verhindert, dass der Browser Instanzen der Variablen „font“ rendert, die sich im Vergleich zur vorherigen Instanz so wenig geändert haben, dass das menschliche Auge den Unterschied nicht sehen würde.

Wenn Sie Google Fonts verwenden, empfiehlt es sich, eine Vorabverbindung mit https://fonts.gstatic.com herzustellen, der Domain, in der die Schriftarten von Google gehostet werden. Dadurch weiß der Browser frühzeitig, wo er die Schriftarten findet, wenn er im CSS darauf stößt:

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

Dieser Tipp funktioniert auch für andere CDNs: Je früher Sie den Browser eine Netzwerkverbindung einrichten lassen, desto früher kann er Ihre Schriftarten herunterladen.

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. Für den Fall, dass ältere Browser unterstützt werden müssen, kannst du deine Website mit statischen Schriftarten erstellen und schrittweise verbesserte Schriftarten 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 standardmäßig fett formatiert, da dies die einzige verfügbare fette Schriftart 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 zeigt dieser Browser keine Stile an. Sollte dies ein Problem darstellen, können Sie einen der Oldschool-Hacks verwenden, um Ihre Anzeigen auf relevante ältere Browser auszurichten.

Wenn Sie die Google Fonts API verwenden, lädt diese die richtigen Schriftarten für die Browser Ihrer Besucher. Angenommen, Sie fordern die Schriftart Oswald mit einer Schriftstärke 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 „font“ und bieten jede Gewichtung zwischen 200 und 700. Ältere Browser erhalten individuelle statische Schriftarten für jede Schriftstärke. In diesem Fall bedeutet dies, dass sie 6 Schriftartdateien herunterladen: eine für die Schriftstärke 200, eine für die Schriftstärke 300 und so weiter.

Viele Grüße

Dieser Artikel wäre nur mithilfe der folgenden Personen möglich gewesen:

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

Hero-Image von Bruno Martins auf Unsplash