How-To

Variable Fonts: Das neue Schriftformat erobert das Web

Seite 2 / 3

Nun lässt sich die Schrift wie gewohnt über die font-family Eigenschaft dem gewünschten HTML-Element zuweisen. Über die Eigenschaft font-variation-settings können die verschiedenen Achsen angesprochen und mit Werten versehen werden. Wie bereits skizziert, sind fünf Standardachsen hinterlegt, die mit jeweils vier Zeichen langen, kleingeschriebenen Tags im CSS bezeichnet werden:

Achse Name CSS-Tag
Strichstärke Weight wght
Schriftbreite Width wdth
Kursive Italic ital
Neigung Slant slnt
Optische Größe Optical Size opsz

Diese Tags können mit Werten gepaart werden und so die gewünschte Schriftdarstellung anzeigen lassen. Im folgenden Beispiel entspricht der verwendete Wert 700 dem Schriftschnitt „Bold“:

html{
font-family: 'Amstelvar';
font-variation-settings: "wght" 700;
}

Weitere Achsen können kommagetrennt ergänzt werden. Liegen individuelle Achsen vor, werden diese mit Großbuchstaben ergänzt. Die Schrift Amstelvar verfügt zum Beispiel über eine Achse namens ­„Grade“, welche die Strichstärke dünner oder fetter macht – ohne dabei die horizontale Ausdehnung der Schrift zu verändern:

html{
font-family: 'Amstelvar';
font-variation-settings: "wght" 700, "GRAD" 60;
}

Wer nicht genau weiß, welche Achsen in einem variablen Font enthalten sind, dem hilft die Website Wakamai Fondue ­(wakamaifondue.com), die variable Fonts analysiert und die gewünschten Informationen anzeigt.

Variable Schriften können auch weiterhin mit font-weight: bold auf fett gestellt werden. Hierzu muss allerdings beim Einbinden der Schrift der Umfang der Strichstärken angegeben werden, in folgendem Beispiel der maximale Umgang von 1 bis 999:

@font-face {
font-family: "SourceSansVariable";
src: url("source-sans-variable.woff2")
format("woff2");
font-weight: 1 999;
}

Ebenso können auch die übrigen Standardachsen über CSS-­Eigenschaften angesprochen werden: Für die Schriftbreite kann mittels font-stretch ein Prozentwert zwischen 50 und 200 Prozent angegeben werden, wobei 100 Prozent der normalen Breite entspricht, 50 Prozent „Ultra-Condensed“ und 200 Prozent wiederum „Ultra-Expanded“. font-style kann neben dem bekannten italic für echte Kursive auch Grad­angaben für die Schrägstellung erhalten, die dann von oblique -90deg bis oblique 90deg reichen. Die optische Größe kann mit ­font-optical-sizing: auto aktiviert oder mit dem Wert none deaktiviert werden.

Fallback Fonts

Da variable Fonts keine neue Technologie, sondern lediglich eine Erweiterung der bestehenden Opentype-Spezifikation sind, ­können auch ältere Browser variable Fonts darstellen. Das ­Problem ist aber, dass sie die Font-Variation-Settings nicht ­inter­pretieren können und somit jede Kontrolle über die Darstellung der ­Schriften fehlt. Daher sollten Webworker verhindern, dass ­solche ­Browser variable Fonts laden und stattdessen dafür sorgen, dass sie klassische ­Einzeldateien erhalten.

Zu diesem Zweck wird zunächst der variable Font, wie im Codebeispiel oben gezeigt, mittels @font-face eingebunden. Anschließend werden, wie bislang auch, in weiteren @font-face Regeln die einzelnen Schriftstile mit ihren jeweiligen Fontdateien verlinkt:

@font-face {
font-family: 'SourceSans';
src: url('/assets/fonts/source-sans-pro-regular.woff2') format('woff2'),
url('/assets/fonts/source-sans-pro-regular.woff') format('woff');
font-weight: normal;
}

Hierbei ist wichtig, dass sich der Schriftname der Fallback Fonts von dem des variablen Fonts unterscheidet. Dort, wo die Schrift zum Einsatz kommen soll, wird sie dann im CSS eingebunden:

html {
font-family: 'SourceSans';
}
Der variable Font wird nur für jene Browser verwendet, die auch die font-variations-settings unterstützen können. Das wird mit einer entsprechenden Abfrage überprüft:
@supports (font-variation-settings: normal) {
html {
font-family: 'SourceSansVariable';
}
}

Da eine Schriftdatei erst dann geladen wird, wenn sie im CSS über font-family angesprochen wird, lädt nun jeder Browser auch nur die Schrift, mit der er umgehen kann. Weitere Details zur Verwendung variabler Fonts liefert ein Artikel von Richard Rutter.

Vorteile variabler Fonts

Variable Fonts bringen im Alltag von Webdesign einige Vor­teile mit sich. Wie bereits erwähnt, können Websites, die bislang viele einzelne Schriftschnitte verwendet haben, in Zukunft über ­variable Fonts ­Datenmengen einsparen. Nehmen wir zum Beispiel die FF Meta, deren vier Einzelschnitte „Regular“, „Bold“, „Italic“ und „Bolditalic“ 133 Kilobyte auf die Waage bringen. Die variable Fontdatei der FF Meta benötigt dagegen nur 84 Kilo­byte, eine Einsparung von etwa 37 Prozent. Die Einsparung wirkt sich umso größer aus, je mehr Einzelschnitte durch eine variable Fontdatei ersetzt werden.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung