Variable Fonts

Variable Fonts: Das neumodische Schriftformat erobert das Web


Seit acht Annos gewährleisten Webfonts für mehr Ausdruck und Vielfalt im Webdesign. Jetzt bahnt sich mit variablen Fonts die nächste Revolution an. Welche Gelegenheiten eröffnet das neuartigen Schriftformat?
In den Anfangszeiten der Webfonts waren Webdesigner bereits hierdurch zufrieden, endlich Alternativen für Arial, Georgia und Co. an der Hand zu haben. Aber relativ flink wuchs der Qualität, ebenfalls im World Wide WWW abwechslungsreiche Typografie auf Printniveau einsetzen zu können: Mehr und mehr Schriftschnitte wurden eingespannt, um typografische Vielfalt zu schaffen. Doch mit jedem Schriftschnitt musste eine weitere Datei aufgeladen werden, was die Ladezeiten in die Höhe flinken ließ. Genau hier setzen heute variable Fonts an. Sie sind mit dem Ziel der Datenkomprimierung erfunden worden, bieten nichtsdestotrotz zudem noch zusätzliche Benefits.
Was sind variable Fonts?
Eine Schriftart existieren zumeist mit verschiedenartigen Schriftschnitten oder Schriftstilen bzw. Strichstärken – beispielsweise „Light“, ¬„Regular“, „Bold“ – oder Schriftbreiten wie „Condensed“ oder ¬„Extended“. Jeglicher solcher Schriftstile wird vom Schriftdesigner abgemacht und in einer speziellen Datei gesichert. Je nach Umfang der Schriftart können hier natürlich viele Einzeldateien entstehen, was gerade im Web auf Grund längerer Ladezeiten nicht von Surplus ist. Dieses Problem haben Adobe, Apple, Google und Microsoft herausgefunden und 2016 in Kombination mit zusätzlichen Experten das Opentype-Format um „Opentype Font ¬Variations“, reputabel als „variable Fonts“, ¬erweitert.
Mit diesen variablen Fonts ist es gegenwärtig denkbar, diverse Schriftstile einer Schrift in einer einzigen Datei zu vereinen. Einzelne Schriftschnitte werden währenddessen nicht in einzelne ¬Dateien ausgelagert, statt dessen über divergente Achsen definiert. Ein Basisschriftschnitt, Central Master genannt, wird unterdessen mit Extremwerten einer Schrift¬eigenschaft, bspw. „Thin“ und „Black“, verknüpft. So entsteht eine Achse, entlang derer die Strichstärke stufenlos interpoliert werden kann.
Variable Fonts lassen sich, wie sämtliche weiteren Schriften ebenso, über ¬@font-face ins CSS integrieren:
@font-face {
font-family: „SourceSans“;
src: url(„source-sans-variable.woff2“)
format(„woff2“);
}
Hierbei sollte sichergestellt sein, dass die verwendete Schriftart gleichfalls im komprimierten Woff2-Format vorhanden ist. Der oben genannte Code bindet den variablen Font ein, der von unterstützten Browsern angewendet werden kann. Dies sind – Stand Juli 2018 – die derzeitigen Varianten von Edge, Chrome und Safari (ab MacOS 10.13). Firefox wird mit der Variante 63 nachziehen.
Nun lässt sich die Schrift wie geläufig über die font-family Funktionalität dem ausgewählten HTML-Element zuweisen. Über die Funktionalität font-variation-settings können die andersartigen Achsen angesprochen und mit Werten ausstaffieren werden. Wie allemal 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 in dieser Art die ausgesuchte Schriftdarstellung anzeigen lassen. Im anschließenden Beispiel entspricht der verwendete Wert 700 dem Schriftschnitt „Bold“:
html{
font-family: ‚Amstelvar‘;
font-variation-settings: „wght“ 700;
}
Weitere Achsen können kommagetrennt erweitert werden. Liegen angepasste Achsen vor, werden ebendiese mit Großbuchstaben ausgebaut. Die Schrift Amstelvar verfügt beispielsweise über eine Achse mit dem Namen ¬„Grade“, welche die Strichstärke dünner oder fetter macht – ohne unterdessen die horizontale Ausdehnung der Schrift zu verändern:
html{
font-family: ‚Amstelvar‘;
font-variation-settings: „wght“ 700, „GRAD“ 60;
}
Wer nicht exakt weiß, welche Achsen in einem variablen Font enthalten sind, dem unterstützt die Website Wakamai Fondue ¬(wakamaifondue.com), die variable Fonts untersucht und die ausgewählten Informationen anzeigt.
Variable Schriften können gleichermaßen zudem mit font-weight: bold auf fett gestellt werden. Hierzu muss zugegeben beim Einbinden der Schrift der Umfang der Strichstärken angegeben werden, in folgendem Beispiel der größtmögliche 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 ebenso die restlichen Standardachsen über CSS-¬Eigenschaften angesprochen werden: Für die Schriftbreite kann durch font-stretch ein Prozentwert inmitten 50 und 200 % angegeben werden, womit 100 % der normalen Breite entspricht, 50 % „Ultra-Condensed“ und 200 % wiederum „Ultra-Expanded“. font-style kann neben dem prominenten italic für echte Kursive ebenfalls Grad¬angaben für die Schrägstellung erhalten, die darauf folgend von oblique -90deg bis oblique 90deg reichen. Die visuelle Größe kann mit ¬font-optical-sizing: auto eingeschaltet oder mit dem Wert none ausgeschaltet werden.

Kommentare sind geschlossen.