Variable Fonts

Variable Fonts sind eine Evolution der OpenType-Schriftartenspezifikation, die es ermöglicht, viele verschiedene Variationen einer Schriftart in einer einzigen Datei zu integrieren, anstatt für jede Breite, jedes Gewicht oder jeden Stil eine separate Schriftartendatei zu haben. Sie erlauben es Ihnen, alle im Schriftartendatei enthaltenen Variationen über CSS und eine einzelne @font-face-Referenz zu nutzen. Dieser Artikel gibt Ihnen alles, was Sie benötigen, um mit der Nutzung von Variable Fonts zu beginnen.

Hinweis: Um Variable Fonts auf Ihrem Betriebssystem zu verwenden, müssen Sie sicherstellen, dass es auf dem neuesten Stand ist. Beispielsweise benötigen Linux-Betriebssysteme die neueste Linux FreeType-Version, und macOS vor High Sierra (10.13) unterstützt keine Variable Fonts. Wenn Ihr Betriebssystem nicht aktuell ist, können Sie Variable Fonts weder auf Webseiten noch in den Firefox Developer Tools verwenden.

Variable Fonts: was sie sind und wie sie sich unterscheiden

Um besser zu verstehen, was bei Variable Fonts anders ist, lohnt es sich, zu überprüfen, wie nicht-variabel Schriftarten aussehen und wie sie sich vergleichen lassen.

Standard- (oder statische) Schriftarten

Früher wurde eine Schriftart als mehrere einzelne Schriftarten produziert, und jede Schriftart repräsentierte eine spezifische Breite/Gewicht/Stilkombination. So hätten Sie separate Dateien für 'Roboto Regular', 'Roboto Bold' und 'Roboto Bold Italic' – was bedeutet, dass Sie am Ende 20 oder 30 verschiedene Schriftartendateien benötigen könnten, um eine vollständige Schriftart darzustellen (es könnte bei einer großen Schriftart mit unterschiedlichen Breiten auch um mehrere Male mehr gehen).

In einem solchen Szenario benötigten Sie mindestens vier Dateien, um eine Schriftart für typischen Einsatz auf einer Seite für Fließtext zu verwenden: regular, italic, bold und bold italic. Wenn Sie mehr Gewichte hinzufügen wollten, wie ein leichteres für Bildunterschriften oder ein schwereres für zusätzliche Betonung, bedeutete das mehrere weitere Dateien. Dies führt zu mehr HTTP-Anfragen und mehr herunterzuladenden Daten (normalerweise um die 20k oder mehr pro Datei).

Variable Fonts

Mit einem Variable Font können all diese Permutationen in einer einzelnen Datei enthalten sein. Diese Datei wäre größer als eine einzelne Schriftart, aber in den meisten Fällen kleiner oder ungefähr gleich groß wie die vier, die Sie möglicherweise für Fließtext laden. Der Vorteil bei der Wahl des Variable Fonts besteht darin, dass Sie Zugang zur gesamten Bandbreite von Gewichten, Breiten und Stilen haben, anstatt auf nur wenige beschränkt zu sein, die Sie zuvor separat geladen hätten.

Dies ermöglicht gängige typografische Techniken, wie das Setzen unterschiedlicher Größen mit unterschiedlichen Gewichten für bessere Lesbarkeit in jeder Größe oder die Verwendung einer etwas schmaleren Breite für datenintensive Displays. Im Vergleich dazu ist es üblich, in einem typografischen System für ein Magazin 10–15 oder mehr unterschiedliche Gewicht- und Breitenkombinationen in der gesamten Publikation zu verwenden – was ein viel breiteres Spektrum an Stilen bietet, als derzeit im Web üblich ist (oder tatsächlich allein aus Leistungsgründen praktisch).

Eine Anmerkung zu Schriftfamilien, Gewichten und Varianten

Vielleicht ist Ihnen aufgefallen, dass wir darüber gesprochen haben, für jedes Gewicht und jeden Stil (d.h. fett und kursiv und fett kursiv) eine spezifische Schriftartendatei zu haben, anstatt darauf zu vertrauen, dass der Browser sie synthetisiert. Der Grund dafür ist, dass die meisten Schriftarten sehr spezifische Designs für fettere Gewichte und Kursivschrift haben, die oft völlig unterschiedliche Zeichen enthalten (der Kleinbuchstabe „a“ und „g“ sind beispielsweise oft ganz anders in Kursivschrift). Um das Schriftartendesign genau wiederzugeben und Unterschiede zwischen Browsern und deren möglicher oder nicht möglicher Sinthetisierung der verschiedenen Stile zu vermeiden, ist es genauer, die spezifischen Schriftartendateien zu laden, wo nötig, wenn Sie eine nicht-variable Schriftart verwenden.

Es kann auch vorkommen, dass einige Variable Fonts in zwei Dateien aufgeteilt sind: eine für die aufrechten und ihre Variationen und eine, die die kursiven Variationen enthält. Dies wird manchmal gemacht, um die Gesamtgröße der Datei zu reduzieren, falls die Kursivschrift nicht benötigt oder verwendet wird. In allen Fällen ist es noch möglich, sie mit einem gemeinsamen font-family-Namen zu verlinken, sodass Sie sie mit demselben font-family und einem passenden font-style aufrufen können.

Einführung der 'Variationsachse'

Das Herzstück des neuen Variable Font-Formats ist das Konzept einer Achse der Variation, die den zulässigen Bereich dieses bestimmten Aspekts des Schriftartendesigns beschreibt. Die 'Gewichtsachse' beschreibt also, wie leicht oder wie fett die Buchstabenformen sein können; die 'Breitenachse' beschreibt, wie schmal oder wie breit sie sein können; die 'Kursivachse' beschreibt, ob kursiv Buchstabenformen vorhanden sind und entsprechend ein- oder ausgeschaltet werden können, usw. Beachten Sie, dass eine Achse ein Bereich oder eine binäre Auswahl sein kann. Gewicht könnte von 1–999 reichen, während Kursiv 0 oder 1 sein könnte (aus oder an).

In der Spezifikation sind zwei Arten von Achsen definiert: registrierte und benutzerdefinierte:

  • Registrierte Achsen sind diejenigen, die am häufigsten vorkommen und häufig genug sind, dass die Autoren der Spezifikation es für lohnenswert hielten, sie zu standardisieren. Die fünf derzeit registrierten Achsen sind Gewicht, Breite, Schrägstellung, Kursiv und optische Größe. Das W3C hat unternommen, sie bestehenden CSS-Attributen zuzuordnen und in einem Fall ein neues einzuführen, das Sie unten sehen werden.
  • Benutzerdefinierte Achsen sind unbegrenzt: Der Schriftartendesigner kann jede beliebige Achse definieren und definieren, die er möchte, und muss ihr lediglich ein vierstelliges Tag zuweisen, um sie im Schriftartendateiformat selbst zu identifizieren. Sie können diese vierstelligen Tags in CSS verwenden, um einen Punkt entlang dieser Variationsachse zu spezifizieren, wie in den untenstehenden Codebeispielen gezeigt wird.

Registrierte Achsen und bestehende CSS-Attribute

In diesem Abschnitt werden wir die fünf registrierten Achsen mit Beispielen und der entsprechenden CSS demonstrieren. Wo möglich, sind sowohl die Standard- als auch die Low-Level-Syntax enthalten. Die Low-Level-Syntax (font-variation-settings) war der erste Mechanismus, der implementiert wurde, um die frühen Implementierungen der Variable Font-Unterstützung zu testen, und ist notwendig, um neue oder benutzerdefinierte Achsen weiter als die fünf registrierten zu nutzen. Jedoch war die Absicht des W3C, dass diese Syntax nicht verwendet werden sollte, wenn andere Attribute verfügbar sind. Daher sollte, wo immer möglich, die entsprechende Eigenschaft verwendet werden, wobei die Low-Level-Syntax von font-variation-settings nur verwendet werden sollte, um Werte oder Achsen zu setzen, die sonst nicht verfügbar sind.

Anmerkungen

  1. Wenn font-variation-settings verwendet wird, ist es wichtig zu beachten, dass Achsennamen groß- und kleinschreibungssensitiv sind. Die registrierten Achsennamen müssen in Kleinbuchstaben vorliegen, und benutzerdefinierte Achsen müssen in Großbuchstaben vorliegen. Zum Beispiel:

    wght (Gewicht) ist eine registrierte Achse, und GRAD (Grade) ist eine benutzerdefinierte.

  2. Wenn Sie Werte mit font-variation-settings gesetzt haben und einen dieser Werte ändern möchten, müssen Sie alle neu deklarieren (auf die gleiche Weise, wie wenn Sie OpenType-Schriftartenmerkmale mit font-feature-settings setzen). Sie können diese Einschränkung umgehen, indem Sie CSS Custom Properties (CSS-Variablen) für die einzelnen Werte verwenden und den Wert einer individuellen benutzerdefinierten Eigenschaft ändern. Beispielcode folgt am Ende des Leitfadens.

Gewicht

Gewicht (repräsentiert durch das wght-Tag) definiert die Designachse, wie dünn oder dick (leicht oder schwer, im typischen typografischen Sinne) die Striche der Buchstabenformen sein können. Seit langem existiert im CSS die Möglichkeit, dies über die font-weight-Eigenschaft zu spezifizieren, die Werte von 100 bis 900 in 100er-Schritten sowie Schlüsselwörter wie normal oder bold annimmt, die Aliase für ihre entsprechenden Zahlenwerte sind (400 bzw. 700 in diesem Fall). Diese werden weiterhin angewendet, wenn nicht-variable oder variable Schriftarten verwendet werden, aber mit variablen Schriftarten ist jetzt jede Zahl von 1 bis 1000 gültig.

Es sollte beachtet werden, dass es zu diesem Zeitpunkt keine Möglichkeit in der @font-face-Deklaration gibt, einen spezifischen Punkt auf der Variationsachse eines variablen Schriftart zu einem Schlüsselwort wie bold (oder einem anderen Schlüsselwort) zu 'mappen'. Dies kann normalerweise ziemlich einfach gelöst werden, erfordert jedoch einen zusätzlichen Schritt beim Schreiben Ihres CSS:

css
font-weight: 375;

font-variation-settings: "wght" 375;

Klicken Sie auf "Play" in den Code-Blöcken unten, um das Beispiel in der MDN Playground zu bearbeiten. Bearbeiten Sie den CSS-Code, um mit Schriftgewicht-Werten zu experimentieren.

css
/* weight range is 300 to 900 */
.p1 {
  font-weight: 625;
}

/* weight range is 300 to 900 */
.p2 {
  font-variation-settings: "wght" 625;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wght" var(--text-axis);
}

Breite

Breite (repräsentiert durch das wdth-Tag) definiert die Designachse, wie schmal oder breit (komprimiert oder erweitert, im typografischen Sinne) die Buchstabenformen sein können. Dies wird typischerweise im CSS mit der Eigenschaft font-stretch gesetzt, wobei die Werte als Prozentsatz über oder unter 'normal' (100%) ausgedrückt werden. Jede Zahl größer als 0 ist technisch gültig – obwohl es viel wahrscheinlicher ist, dass der Bereich näher am 100%-Mark liegt, wie etwa 75%-125%. Wenn ein Zahlenwert geliefert wird, der außerhalb des im Schriftart kodierten Bereichs liegt, sollte der Browser die Schriftart am nächsten erlaubten Wert rendern.

Hinweis: Das % Symbol wird nicht verwendet, wenn font-variation-settings verwendet wird.

css
font-stretch: 115%;

font-variation-settings: "wdth" 115;

Klicken Sie auf "Play" in den Code-Blöcken unten, um das Beispiel in der MDN Playground zu bearbeiten. Bearbeiten Sie den CSS-Code, um mit Schriftbreite-Werten zu experimentieren.

css
/* width range is 55% to 100% */
.p1 {
  font-stretch: 60%;
}

/* width range is an integer from 55 to 100 */
.p2 {
  font-variation-settings: "wdth" 60;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wdth" var(--text-axis);
}

Kursiv

Die Kursiv-Achse (ital) kann im Bereich [0-1] gesetzt werden, wobei 0 "nicht kursiv", 0.5 "halbwegs kursiv" und 1 "vollständig kursiv" spezifiziert. Kursivdesigns beinhalten oft drastisch unterschiedliche Buchstabenformen im Vergleich zu ihren aufrechten Entsprechungen, sodass beim Übergang von aufrecht zu kursiv mehrere Glyphaustausch (oder Zeichenersetzungen) normalerweise auftreten. Kursiv und oblique werden oft weitgehend austauschbar verwendet, sind jedoch in Wahrheit recht unterschiedlich. Oblique wird in diesem Kontext mit dem Begriff slant definiert (siehe untenstehender Abschnitt), und eine Schriftart hätte in der Regel eines von beiden, aber nicht beide.

In CSS werden sowohl kursiv als auch oblique auf Text mittels der font-style-Eigenschaft angewendet. Beachten Sie auch die Einführung von font-synthesis: none; — was verhindert, dass Browser versehentlich die Variationsachse und einen synthetisierten Kursiv anwenden. Dies kann auch verwendet werden, um Faux-Bolding zu verhindern.

css
font-style: italic;

font-variation-settings: "ital" 1;

font-synthesis: none;

Klicken Sie auf "Play" in den Code-Blöcken unten, um das Beispiel in der MDN Playground zu bearbeiten. Bearbeiten Sie den CSS-Code, um mit Schriftkursiv-Werten zu experimentieren.

css
/* font-style: italic, with and without font-synthesis */
.p1 {
  font-style: italic;
}

.p1-no-synthesis {
  font-style: italic;
  font-synthesis: none;
}

/* italic range is 0 or 1 */
.p2 {
  font-variation-settings: "ital" 1;
  font-synthesis: none;
}

/* Adjust with slider & custom property */
.p3 {
  font-synthesis: none;
  font-variation-settings: "ital" var(--text-axis);
}

Schrägstellung

Schrägstellung (repräsentiert durch das slnt-Tag), oder wie es oft genannt wird, 'Oblique' — unterscheidet sich von echten Kursivschrift darin, dass sie den Winkel der Buchstabenformen ändert aber keine Zeichenaustausch vornimmt. Sie ist auch variabel, da sie als Zahlenbereich ausgedrückt wird. Dadurch kann die Schriftart überall entlang der Schrägachse variiert werden. Der erlaubte Bereich reicht von -90 bis 90 Grad.

Die zwei Eigenschaften, die die Schrägstellung kontrollieren können, sind font-style und font-variation-settings. Die folgenden zwei Eigenschaftsdeklarationen sind gleich:

font-style: oblique 14deg;

font-variation-settings: "slnt" -14;

Bevorzugen Sie die font-style-Eigenschaft gegenüber der font-variation-settings-Eigenschaft. Das deg-Schlüsselwort wird nicht verwendet, wenn die font-variation-settings-Eigenschaft verwendet wird. Im Falle der font-variation-settings-Eigenschaft bedeutet ein positiver Winkel eine gegen den Uhrzeigersinn gerichtete Schrägstellung.

Im folgenden Live-Beispiel können Sie die Schrägstellung anpassen.

css
.font-style {
  font-style: oblique 5deg;
}

.font-variation {
  font-variation-settings: "slnt" -5;
}

.adjustable {
  font-variation-settings: "slnt" var(--slant-angle);
}

Optische Größe

Dies ist etwas Neues für digitale Schriftarten und CSS, aber ein jahrhundertealtes Verfahren beim Entwerfen und Erstellen von Metallschrift. Optische Größenanpassung bezieht sich auf die Praxis, die gesamte Strichstärke der Buchstabenformen basierend auf der physischen Größe zu variieren. Wenn die Größe sehr klein war (wie ein Äquivalent zu 10 oder 12px), hätten die Zeichen insgesamt dickere Striche und möglicherweise andere kleine Anpassungen, um sicherzustellen, dass sie bei einer physisch kleineren Größe reproduzierbar und lesbar wären. Umgekehrt, wenn eine viel größere Größe verwendet wurde (wie 48 oder 60px), könnte eine viel größere Variation in den dicken und dünnen Strichen auftreten, die das Schriftartendesign besser entsprechend dem ursprünglichen Entwurf zeigen.

Während dies ursprünglich gemacht wurde, um den Druckprozess von Tinte und Papier auszugleichen (sehr dünne Linien bei kleinen Größen wurden oft nicht gedruckt, was den Buchstabenformen ein gebrochenes Aussehen gab), überträgt sich gut auf digitale Displays, wenn die Bildschirmqualität und die physische Größendarstellung ausgeglichen werden sollen.

Optische Größenwerte sind in der Regel so konzipiert, dass sie automatisch entsprechend der font-size angewendet werden, können aber auch mit der Low-Level-Syntax font-variation-settings manipuliert werden.

Es gibt ein neues Attribut, font-optical-sizing, das erstellt wurde, um variable Schriften in CSS zu unterstützen. Wenn font-optical-sizing verwendet wird, sind die einzigen erlaubten Werte auto oder none — sodass dieses Attribut nur das Ein- oder Ausschalten der optischen Größenanpassung erlaubt. Wenn jedoch font-variation-settings: 'opsz' <num> verwendet wird, können Sie einen numerischen Wert angeben. In den meisten Fällen möchten Sie die font-size (die physische Größe, in der der Text gerendert wird) mit dem opsz-Wert abgleichen (dies ist, wie die optische Größenanpassung anzuwenden ist, wenn auto verwendet wird). Die Möglichkeit, einen spezifischen Wert anzugeben, ist vorgesehen, damit Sie, falls nötig, aus irgendeinem Grund die Standards übersteuern — aus Lesbarkeitsgründen, ästhetisch oder aus einem anderen Grund — einen spezifischen Wert anwenden können.

css
font-optical-sizing: auto;

font-variation-settings: "opsz" 36;

Klicken Sie auf "Play" in den Code-Blöcken unten, um das Beispiel in der MDN Playground zu bearbeiten. Bearbeiten Sie den CSS-Code, um mit optischen Größenwerten zu experimentieren.

css
.p1 {
  font-optical-sizing: none;
}
/* font-optical-sizing can be auto or none */
.p2 {
  font-optical-sizing: auto;
}

/* optical range is from 8 to 144 */
.p3 {
  font-variation-settings: "opsz" 64;
}

/* Adjust with slider & custom property */
.p4 {
  font-variation-settings: "opsz" var(--text-axis);
}

Benutzerdefinierte Achsen

Benutzerdefinierte Achsen sind genau das: Sie können jede beliebige Design-Variationsachse sein, die sich der Schriftartendesigner vorstellen. Es mag einige geben, die ziemlich häufig werden — oder sogar registriert werden — aber nur die Zeit wird es zeigen.

Grade

Grad könnte eine der häufigeren benutzerdefinierten Achsen sein, da es eine bekannte Geschichte im Schriftartdesign hat. Die Praxis, verschiedene Grade einer Schriftart zu entwerfen, wurde oft in Reaktion auf die beabsichtigte Nutzung und Drucktechnik durchgeführt. Der Begriff "Grade" bezieht sich auf das relative Gewicht oder die Dichte des Schriftartdesigns, unterscheidet sich jedoch von der traditionellen "Gewicht", da der physische Platz, den der Text einnimmt, sich nicht ändert, sodass das Ändern des Textgrades das gesamte Layout des Textes oder der umgebenden Elemente nicht ändert. Dies macht den Grad zu einer nützlichen Variationsachse, da er variiert oder animiert werden kann, ohne einen Neufluss des Textes selbst zu verursachen.

css
font-variation-settings: "GRAD" 88;

Klicken Sie auf "Play" in den Code-Blöcken unten, um das Beispiel in der MDN Playground zu bearbeiten. Bearbeiten Sie den CSS-Code, um mit Schriftgrad-Werten zu experimentieren.

css
/* grade range is 88 to 150 */
.p1 {
  font-size: 64px;
  font-variation-settings: "GRAD" 88;
}

/* Adjust with slider & custom property */
.p2 {
  font-size: 64px;
  font-variation-settings: "GRAD" var(--text-axis);
}

Eine Variable Font verwenden: @font-face Änderungen

Die Syntax zum Laden von Variable Fonts ist sehr ähnlich wie bei jedem anderen Webfont, mit einigen bemerkenswerten Unterschieden, die nun durch Upgrades für die traditionelle @font-face-Syntax in modernen Browsern verfügbar sind.

Die Grundsyntax ist die gleiche, aber die Schriftarttechnologie kann angegeben werden, und zulässige Bereiche für Deskriptoren wie font-weight und font-stretch können angegeben werden, anstatt nach dem Schriftartendatei benannt zu werden.

Beispiel für eine standard aufrechte (römische) Schriftart

css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;

  font-style: normal;
}

In diesem Fall gibt die font-style: normal Deklaration an, dass diese Schriftartdatei verwendet werden sollte, wenn font-family auf MyVariableFontName und font-style auf normal gesetzt ist. Alternativ könnten Sie font-style: oblique 0deg oder font-style: oblique 0deg 20deg verwenden, um anzuzeigen, dass die Schriftart normale aufrechte Glyphen hat (angegeben durch 0deg).

Beispiel für eine Schriftart, die nur Kursiv und keine aufrechten Zeichen enthält

css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;

  font-style: italic;
}

In diesem Fall gibt die font-style: italic Deklaration an, dass diese Schriftartdatei verwendet werden sollte, wenn font-family auf MyVariableFontName und font-style auf italic gesetzt ist. Alternativ könnten Sie font-style: oblique 14deg verwenden, um anzuzeigen, dass die Schriftart kursiv Glyphen hat.

Beispiel für eine Schriftart, die eine schräg (Slant)-Achse enthält

css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;

  font-style: oblique 0deg 12deg;
}

In diesem Fall gibt der Wert oblique 0deg 12deg an, dass diese Schriftartdatei verwendet werden sollte, wenn in einer Stilregel die font-family-Eigenschaft MyVariableFontName ist und die font-style-Eigenschaft schräg mit einem Winkel zwischen null und 12 Grad inklusiv ist.

Hinweis: Nicht alle Browser haben die vollständige Syntax für das Schriftformat implementiert, also testen Sie sorgfältig. Alle Browser, die Variable Fonts unterstützen, rendern sie immer noch, wenn Sie das Format einfach als Dateiformat setzen, anstatt Format-Varianten (d.h. woff2 anstelle von woff2-variations), aber es ist am besten, die richtige Syntax zu verwenden, wenn möglich.

Hinweis: Die Angabe von Wertebereichen für font-weight, font-stretch und font-style wird den Browser davon abhalten, eine Achse außerhalb dieses Bereichs zu rendern, wenn Sie das entsprechende Attribut verwenden (d.h. font-weight oder font-stretch), aber blockiert Sie nicht, einen ungültigen Wert über font-variation-settings bereitzustellen, also verwenden Sie es mit Vorsicht.

Arbeiten mit älteren Browsern

Die Unterstützung für Variable Fonts kann mit CSS Feature Queries (siehe @supports) überprüft werden, sodass es möglich ist, Variable Fonts in der Produktion zu verwenden und das CSS, das die Variable Fonts aufruft, innerhalb eines Feature-Query-Blocks zu scopen.

css
h1 {
  font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: "wdth" 115) {
  h1 {
    font-family: some-variable-font-family;
  }
}

Beispielseiten

Die folgenden Beispielseiten zeigen zwei verschiedene Möglichkeiten, Ihr CSS zu strukturieren. Die erste verwendet die Standardattribute, wo immer möglich. Das zweite Beispiel verwendet CSS Custom Properties, um Werte für eine font-variation-settings-Zeichenfolge festzulegen und zeigt, wie Sie einzelne Variablenwerte einfacher aktualisieren können, indem Sie eine einzelne Variable übersteuern, anstatt die gesamte Zeichenfolge neu zu schreiben. Beachten Sie den Hover-Effekt auf dem h2, der nur den Gradeachsen-Custom-Property-Wert ändert. Klicken Sie auf "Play" in den Code-Blöcken unten, um das Beispiel in der MDN Playground zu bearbeiten:

css
.container1 h1 {
  font-optical-sizing: auto;
  font-size: 5rem;
  font-stretch: 85%;
  font-weight: 450;
}
.container1 h2 {
  font-optical-sizing: auto;
  font-size: 2.25rem;
  font-stretch: 90%;
  font-weight: 575;
}
.container1 p {
  font-optical-sizing: auto;
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 375;
}
.demo2 {
  --text-wght: 375;
  --text-wdth: 100;
  --text-opsz: 16;
  --text-GRAD: 88;
}
.container2 > * {
  font-size: 5rem;
  font-variation-settings:
    "wght" var(--text-wght),
    "wdth" var(--text-wdth),
    "opsz" var(--text-opsz),
    "GRAD" var(--text-GRAD);
}
.container2 h1 {
  --text-wght: 450;
  --text-wdth: 85;
  --text-opsz: 80;
  font-size: 5rem;
}
.container2 h2 {
  --text-wght: 575;
  --text-wdth: 95;
  --text-opsz: 36;
  font-size: 2.25rem;
}
.container2 h2:hover {
  --text-GRAD: 130;
}
.container2 p {
  font-size: 1rem;
}

Ressourcen