4 Schritte zur Verwendung von variablen Schriftarten

Sep 13, 2025

wie man

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Bildkredite: Zukunft)

Variablen Schriften ermöglichen Font-Designer, um Typ-Variationen innerhalb der Schriftart selbst zu definieren, um eine Font-Datei zu ermöglichen, um sich wie mehrere Schriftarten zu fungieren. Standard-Schriftarten werden in Schriftfamilmen gruppiert, die mehrere separate Schriftarten enthalten, die jeweils einen anderen Stil darstellen, beispielsweise ein geringes Gewicht oder ein mutiges Gewicht. Variable-Schriftarten enthalten die gleichen Informationen in einer einzelnen Schriftarten.

Mit Source Sans Pro Als Beispiel setzt die variable Version der Schrift auf ungefähr 394 KB und kommt in einer Vielzahl von Gewichten. Wenn wir diese Schriftarten als Standardschriftdateien einzeln verwenden würden, sind sie im Durchschnitt 234 KB jeweils - was zu einer kombinierten Dateigröße von ca. 1856 kb führt. Natürlich geht diese Berechnung davon aus, dass alle Schriftarten einzeln als Standardschriftstart existieren, die sie nicht tun. (Obwohl Sie nur normale Schriftarten suchen, überprüfen Sie unseren Beitrag auf der beste freie Schriftarten verfügbar.)

Wenn wir die Schriftarten entfernen, die nicht als Standardschriftgabe vorhanden sind, ist die kombinierte Dateigröße immer noch fast dreimal so groß wie die Größe der variablen Schriftart und mit wesentlich weniger Stilen. Selbst wenn Sie nur die mutigen und regulären Versionen wünschen, die in vielen Webprojekten üblich sind, sind zwei Versionen der Standardquelle Sans Pro Font immer noch größer als eine einzige variable Schriftart. Was dies demonstriert, ist, dass wir mit variablen Schriftarten das Potenzial haben, an der Bandbreite massive Einsparungen vorzunehmen, ohne unsere Designs und Kreativität zu beeinträchtigen.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — Ein Vergleich der Dateigrößen einer Reihe von Schriftarten zwischen der Standard- und Variablenversion der Schriftquelle Sans Pro (Bildkredite: Mandy Michael)

Variable Schriftarten funktionieren, indem Sie die Master-Variationen entlang einer Achse interpolieren, weshalb neue Punkte dazwischen aufgebaut werden. Dies bedeutet, dass Sie Schriftgewichte an willkürlichen Punkten entlang der Achse einstellen können, die eine viel größere Anzahl von Stilen und Variationen darstellen. Darüber hinaus ist es daran, dass die variablen Schriftarten interpoliert werden können, dass wir zwischen jeder Variation animieren können, wodurch glatte Übergänge von einem dünnen Gewicht zu einem mutigen Gewicht ermöglicht werden - etwas, das wir noch nie erreichen konnten.

Was variable Schriften noch spannender macht, ist, dass Designer nicht nur auf eine einzige Achse beschränkt sind. Variable Schriftarten können viele verschiedene Achsen enthalten, die eine Reihe verschiedener Stile darstellen. Dies könnte kondensierte, kursive, optische Größe oder andere kreative oder benutzerdefinierte Optionen umfassen.

Möchten Sie Ihre Schriftarten auf einer neuen Website platzieren? Für Webdesign-Ressourcen gehen Sie zu unserem Besten Webseitenersteller Roundup und Auswahl der Oberseite Web-Hosting Dienstleistungen. Oder für ein Speicher-Upgrade überprüfen Sie diese Cloud-Speicherung. Optionen.

01. Erkennt Achsen in variablen Schriftarten

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Wenn Sie sich die Interpolation einer variablen Schriftart über eine Gewichts- und Breitachse ansehen, zeigt den Anpassungsbereich, der verfügbar ist (Bildkredite: Mandy Michael)

Die Verwendung von variablen Schriftarten in unserem CSS ist sehr ähnlich, wie wir normalerweise Schriftarten im Web verwenden würden: Verwenden der @ font-face at-rule . Wir müssen jedoch zunächst die verschiedenen Arten von Achsen in einer variablen Schriftart verstehen, da dies bestimmt, welche CSS-Eigenschaften wir verwenden.

Es gibt zwei Arten von Achsen in einer variablen Schriftart: eine registrierte Achse und eine benutzerdefinierte Achse. Eine registrierte Achse bezieht sich auf eine Achse, die häufig ist, dass es sich lohnt, ein Standardisieren wert zu sein. Es gibt derzeit fünf registrierte Achsen; Gewicht, Breite, schräge, kursive und optische Größe, und diese werden häufig den vorhandenen CSS-Eigenschaften, beispielsweise dem Font-Gewicht, zugeordnet.

Kundenspezifische Achsen werden von Schriftart-Designern definiert, kann jede Art von Variation sein und erfordern nur einen vierstufigen Kennung innerhalb der Schriftartatei, auf das in CSS Bezug genommen werden kann.

02. Verwenden Sie eine registrierte Achse

A range of variable font weights along an axis from light (200) to black (900). — Gewichtsänderungen sind auf einer Achse definiert, von Licht (200) bis Schwarz (900) (Bildkredite: Mandy Michael)

Wenn es um eine registrierte Achse geht, möchten wir sicherstellen, dass wir alle zugeordneten CSS-Eigenschaften verwenden, z. B. Font-Gewicht oder Schriftart.

Wir können unsere Schriftarten mit der @ font-face at-rule Da würden wir normalerweise; Die Änderung besteht darin, wie wir die Variationen für Deskriptoren wie Font-Weight, Font-Stretch- und Schrift-Stil definieren. Zuvor hätten wir ein Font-Gewicht von 200 gesetzt und definiert als die Lichtversion der Schriftart, wir erstellen dann einen anderen Schriftart-Gesichtspflicht für die mutige Version und die reguläre Version, bis wir alle gewünschten Gewichte hatten, die für erforderlich waren das Design. Mit variablen Schriftarten benötigen wir nur einen einzelnen Schriftwandblock. Anstatt mehrere Instanzen zu verwenden, geben wir also einen Bereich von Werten an, die den Mindest- und Maximalwerten entsprechen, die auf der Schriftartachse definiert sind.

 @ font-face {
Font-Familie: "Quell-Sans-Variable";
SRC: URL ("Quelle-sans-variable.woff") Format ("Woff-Variationen");
Font-Gewicht: 200 700;
}

In diesem Beispiel setzen wir ein Schriftartgewicht von 200 bis 700. Sobald unser Sortiment definiert ist, können wir eine beliebige Nummer innerhalb dieses Bereichs als unser Schriftartgewicht, zum Beispiel 658, wählen. Wichtig, wenn Sie Ihren Schriftart-Gewichtsbereich als 200 bis 700 einstellen, und Versuchen Sie dann, ein Gewicht von 900 zu definieren, auch wenn die Schriftart ein 900 Gewicht aufweist, das in seiner Achse definiert ist, können Sie sie nicht verwenden. Der Bereich definiert, was Sie in Ihrem CSS haben.

03. Setzen Sie benutzerdefinierte Achsen ein

Da bei Verwendung einer benutzerdefinierten Achse keine bereits vorhandenen CSS-Eigenschaften vorhanden sind, müssen wir eine neue CSS-Eigenschaft namens Font-Variations-Einstellungen verwenden. Dadurch können wir so viele benannte und benutzerdefinierte Achsen definieren, wie wir brauchen.

 H1 {
Schriftfamilie: 'meine variable Schriftart';
Font-Variations-Einstellungen: 'WGHT' 375, 'Inli' 88;
}

Im Beispiel bezieht sich WGHT hier auf die registrierte Gewichtsachse und Inli bezieht sich auf eine benutzerdefinierte Achse namens INLINE, die jeweils mit einem zugehörigen Nummernwert, der einem Punkt entlang der Achsachse entspricht. Während Sie eine registrierte Achse als Wert für die Font-Variations-Einstellungen verweisen können, empfiehlt es sich, dass Sie stattdessen ihre zugeordneten CSS-Eigenschaften verwenden.

Um den Support in den älteren Browsern sicherzustellen, können wir Fallback-Schriftarten für nicht unterstützte Browsern verwenden, indem wir die Erkennung von CSS-Feature verwenden.

 H1 {
  Font-Familie: "Quelle Sans", Sans-Serif;
  Font-Gewicht: 700;
}

@Supports (Font-Variation-Einstellungen: Normal) {
h1 {
 Schriftfamilie: "Decovar";
 Font-Variations-Einstellungen: "InLI" 88;
 }
}

Durch die Überprüfung der Unterstützung der Schriftart-Variation-Einstellungen können wir unsere Variablen-Schriftstile in den Stützen-CSS-Block aufnehmen, um sicherzustellen, dass sie nur in Browsern verwendet werden, die variable Schriftarten unterstützen können - mit unseren Standardschriften, die in den nicht unterstützten Browsern verwendet werden.

04. In Javascript und variablen Schriftarten kombinieren

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Variable Schriftarten ermöglichen glatte Übergänge von, sagen, ein dünnes bis ein mutiges Gewicht; Auf diese Weise können Sie reibungslose Transformationen erstellen, die JavaScript-Variablen verwenden (Bildkredite: Mandy Michael)

Wir können JavaScript-Events für Situationen nutzen, in denen wir mehr fein abgestimmte Kontrolle wünschen oder die Schriftart basierend auf Ereignissen zu ändern, die wir nicht mit CSS alleine zugreifen können. Ein einfaches Beispiel würde unserem Schriftgewicht auf die Größe unseres Ansichtsfensters entsprechen - da der Ansichtsfenster kleiner wird, wird das Gewichtsgewicht schwerer.

Um die Flüssigkeitsskala zu erstellen, müssen wir zwei Sätze von Werten und Einheiten ausrichten - das Schriftartgewicht und die Viewport-Größe. Wir können auf die aktuelle Ansichtsfensterbreite mit Window.innerwidth zugreifen und eine neue prozentuale Skala erstellen, indem wir sie in einen Bereich von 0-0.99 umwandeln. Durch einschließlich der minimalen und maximalen Ansichtsfenstergrößen können wir den Bereich des Effekts steuern.

 var viewportscale =
(window.innerwidth - minwindowsIZE) / (MaxWindowsIZE - MinwindowSize);

Wir bestimmen das Schriftartgewicht basierend auf unserer Ansichtsfenstergröße.

 var fontweightscale = viewportscale * (minfontweight - maxfontweight) + maxfontweight;

Mit CSS-benutzerdefinierten Eigenschaften können wir unseren JavaScript-Wert verwenden, um das Schriftartgewicht in unserem CSS zu aktualisieren.

 P.Style.SetProperty ("- Gewicht", Fontweightscale);

Wenn dies zu einer Funktion kombiniert und an den RESIZE EVENT-Listener angeschlossen ist, können wir das Schriftartgewicht basierend auf der neuen Größe des Fensters aktualisieren.

Mit diesem grundlegenden Ansatz können wir unsere Typografie basierend auf allen Arten von Ereignissen und Erfahrungen ändern. Wo der Ansichtsfenster breit ist, können wir detaillierter haben; Wenn es umgekehrt ist, wenn es kleiner ist und in einem engeren Raum ist, könnten wir die Verringerung der Schriftbreite oder der Erhöhung des Gewichts ansehen, wodurch eine bessere Kontrolle über unsere Inhalte und Typografie in Bezug auf Lesbarkeit, Benutzerfreundlichkeit und Design geeignet ist.

Sie können Sehen Sie den Code an dazu auf Codepen.

Dieser Artikel wurde ursprünglich in Ausgabe 318 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Abonnieren Sie hier das Netz .

Erfahren Sie mehr über variable Schriftarten, um CSS generieren

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Bildkredite: Getty / Bianca Berning / Zukunft)

In ihrem Gespräch beim Generieren von CSS wird die fokussierte CSS-Konferenz für Webdesigner am 26. September 2019 in Rich Mix, London, Bianca Berning, untersucht, wie variable Schriftarten neue Möglichkeiten für das schriftliche Wort in traditionellen Medien sowie neuer, immersiver anzeigen können Erfahrungen wie AR, VR und gemischte Realität.

Wenn Sie diese und andere tolle Vorträge fangen möchten, lohnt es sich, jetzt Ihre Tickets aufzurufen. Wenn Sie sich am 15. August bis zum 17.00 Uhr um 17:00 Uhr ergreifen, können Sie £ 50 sparen, nur £ 199 + MwSt. Kaufen Sie jetzt Ihr Ticket Schnitte

Zum Thema passende Artikel:

3 Wege Tech wechselt den Typ
Beginnen Sie mit variablen Schriftarten in CSS
Verwandeln Sie Ihren Typ online mit variablen Schriftarten

4 Schritte zur Verwendung von variablen Schriftarten

01. Erkennt Achsen in variablen Schriftarten

02. Verwenden Sie eine registrierte Achse

03. Setzen Sie benutzerdefinierte Achsen ein

04. In Javascript und variablen Schriftarten kombinieren

Erfahren Sie mehr über variable Schriftarten, um CSS generieren

wie man - Die beliebtesten Artikel

Wie gestaltet man mit CSS-Formen: eine Einführung

Fügen Sie digitale Farben an Bleistiftzeichnungen hinzu

Erstellen Sie einen lebensechten digitalen Human

Erstellen Sie mengenspezifische CSS-Stile und -layouts

Erstellen Sie ein einfaches Farbdiagramm

Holen Sie sich Ihren Kopf um diese fünf Faktoren umsetzen

Perspektive erstellen, indem Sie Ihre Texturen in Photoshop verziehen

Wie man einen Comic-Kopf in Zbrush

Kategorien