Eine Datei, viele Optionen: Variable Schriftarten im Web

Im Jahr 2016 wurde eine wichtige Entwicklung in der Webtypografie gemeinsam von Vertretern von Adobe, Microsoft, Apple und Google angekündigt. Version 1.8 des OpenType-Schriftformats führte variable Schriftarten ein. Bei so vielen großen Namen, die beteiligt sind, ist es nicht überraschend, dass alle Browser an Bord sind und mit der Implementierung vorankommen.

Schriftstärken können weit mehr sein als nur fett und normal – die meisten professionell gestalteten Schriftarten sind in Varianten erhältlich, die von einem dünnen Haarfein ultraleicht bis zu einem schwarzen extra-schweren Fett reichen. Um all diese Gewichte nutzen zu können, bräuchten wir für jedes eine separate Datei. Auch wenn ein Design wahrscheinlich nicht jedes Schriftgewicht benötigt, fügt eine größere Vielfalt als nur fett und normal visuelle Hierarchie und Interesse zu einer Seite hinzu.

Es gibt mehr als nur verschiedene Gewichte zu beachten. CSS3 hat die Eigenschaft font-stretch mit Werten von ultra-condensed bis ultra-expanded eingeführt. Bisher funktionierten diese Werte nur, wenn Sie für jede Breite eine separate Datei bereitgestellt haben. Wenn Sie jede Kombination aus Gewicht und Breite in normal und kursiv wollten, bräuchten Sie Dutzende von Dateien.

Mit variablen Schriftarten können wir diese ganze Vielfalt mit einer einzigen Datei erhalten.

Die OpenType-Spezifikation listet fünf Standardachsen für Variationen auf – alle gekennzeichnet durch eine vierstellige Zeichenfolge. Dies sind Aspekte der Schriftart, über die wir Kontrolle haben.

• wght – Gewicht wird durch die CSS-Eigenschaft font-weight gesteuert. Der Wert kann alles von 1 bis 999 sein. Dies ermöglicht eine feinere Steuerung.
• wdth – Breite wird durch die CSS-Eigenschaft font-stretch gesteuert. Sie kann ein Schlüsselwort oder einen Prozentwert annehmen. Auch wenn es schon lange möglich ist, eine Transformation zu verwenden, um scaleX oder scaleY, verzerrt dies die Schrift auf unschöne Weise, die vom Typografen nicht beabsichtigt war. Die Breitenachse ist vom Schriftgestalter so definiert, dass sie sich elegant erweitert oder komprimiert.
• opsz – Optische Größenanpassung kann mit der neuen Eigenschaft font-optical-sizing ein- oder ausgeschaltet werden. (Ich werde später erklären, was optische Größenanpassung ist.)
• ital – Kursivierung wird erreicht, indem die CSS-Eigenschaft font-style auf italic gesetzt wird.
• slnt– Schrägstellung wird durch Setzen der CSS-Eigenschaft font-style auf oblique gesteuert. Sie wird standardmäßig auf eine Neigung von 20 Grad eingestellt, kann aber auch einen bestimmten Grad zwischen -90deg und 90deg annehmen.

Leider nutzt nicht jede variable Schriftart notwendigerweise alle fünf Achsen. Das hängt vollständig vom Schöpfer der jeweiligen Schriftart ab. Nach dem Testen aller variablen Schriftarten, die ich in die Finger bekommen konnte, ist das mit Abstand am häufigsten implementierte das Gewicht, dicht gefolgt von der Breite. Oft benötigen Sie zwei Dateien: eine für Kursiv und eine für Normal, da die ital-Achse nicht immer implementiert ist. Wie Frank Grießhammer von Adobe mir sagte:

Kursiv- und Normalschnitte haben (oft radikal) unterschiedliche Konstruktionsprinzipien, daher sind Punktstrukturen möglicherweise nicht immer kompatibel.

Der Browser kann jede nicht-kursive Schrift kursiv emulieren, aber das ist typografisch nicht ratsam.

Typografen können benannte Instanzen innerhalb ihrer variablen Schriftart definieren. Eine benannte Instanz ist eine Voreinstellung – eine bestimmte Variation, auf die die Schriftart mit einem Namen (z. B. „Extra Light“) anstelle von nur Zahlen zugreifen kann. In der aktuellen CSS-Spezifikation gibt es jedoch keine Möglichkeit, auf diese benannten Instanzen zuzugreifen. Es ist wichtig zu beachten, dass wenn Sie einen Wert wie extra-condensed oder semi-expanded für font-stretch verwenden, der Wert einer in der CSS-Spezifikation vordefinierten Prozentzahl zugeordnet wird – nicht einer vom Schriftgestalter gewählten benannten Instanz. Für font-weight wird der Wert bold zu 700 und normal zu 400 zugeordnet. Wie die Spezifikation besagt: „eine Schrift kann intern eigene Zuordnungen bereitstellen, aber diese Zuordnungen innerhalb der Schrift werden ignoriert.“

Die CSS Fonts Module Level 4-Spezifikation führt die neue Eigenschaft font-variation-settings zur Steuerung von variablen Schriftoptionen ein. Die folgenden beiden CSS-Deklarationen sind äquivalent:

h1 {
  font-weight: 850;
  font-style: italic;
  font-stretch: normal;
}

h1 {
  font-variation-settings: "wght" 850, "wdth" 100, "ital" 1;
}

Die Spezifikation bevorzugt ausdrücklich die Verwendung von font-optical-sizing, font-style, font-weight und font-stretch gegenüber font-variation-settings zur Steuerung aller fünf Standardachsen. Wie Myles Maxfield mir freundlicherweise erklärte:

font-variation-settings ist nicht identisch mit den anderen variationsbewussten Eigenschaften, da der Browser bei diesen anderen Eigenschaften Einblick in die Bedeutung der Variationen hat und daher Dinge tun kann, wie sie auf andere Schriftdatei-Formate anzuwenden oder synthetische Versionen zu erstellen, wenn die Schriftdatei die Achse nicht unterstützt.

Microsoft wird im Laufe der Zeit weitere Standardachsen-Tags registrieren. Wenn neue Achsen hinzugefügt werden, können wir auch neue CSS-Eigenschaften zu ihrer Steuerung erwarten. Schriftgestalter können auch ihre eigenen Achsen erfinden. Deshalb wurde font-variation-settings zu CSS hinzugefügt – es ist der einzige Weg, benutzerdefinierte Achsen zu steuern. Lab DJR und Decovar sind zwei Schriftarten, die mit der ausdrücklichen Absicht erstellt wurden, zu demonstrieren, wie formbar eine einzige variable Schriftart sein kann. Lab DJR bietet beispielsweise vier benutzerdefinierte Achsen:

h1 {
  font-variation-settings: 'SIZE' 100, 'QUAD' 80, 'BEVL' 950, 'OVAL' 210;
}

Diese von Gießereien definierten benutzerdefinierten Achsen müssen Großbuchstaben verwenden, während die standardisierten Achsen immer Kleinbuchstaben verwenden. Bei einzigartigen und nicht standardisierten Optionen müssen CSS-Autoren darauf zählen, dass Schriftentwickler ihre Arbeit ordnungsgemäß dokumentieren.

Performance

Sie laden möglicherweise eine variable Schriftart im TTF-Format herunter, anstatt als vorkompilierte Datei. Sie werden sie auf jeden Fall in .woff2 konvertieren wollen. Google bietet ein Befehlszeilen-Tool namens woff2 an, um dies zu erleichtern. Wenn Sie in der Befehlszeile in den Ordner wechseln, der Ihre Schriftart enthält, können Sie Folgendes eingeben:

woff2_compress examplefont.ttf

Wir haben festgestellt, dass wir nur eine HTTP-Anfrage pro Schriftart benötigen werden (oder möglicherweise zwei, um normale und kursive Schnitte zu trennen). Da sie so viel Arbeit leisten, könnten Sie erwarten, dass die Dateigröße einer variablen Schriftart weitaus größer ist als die einer typischen Schriftdatei. Lassen Sie uns einen (nicht ganz wissenschaftlichen) Blick darauf werfen.

Hier sind einige der variablen Schriftarten, die ich auf meinem Laptop habe, zusammen mit ihren Dateigrößen.

Vergleichen wir das mit einzelnen Instanzen einer nicht-variablen Version von Source Sans.

Animation

Variable Schriftarten bedeuten auch, dass zum ersten Mal font-weight (und jede andere Achse) animiert werden kann. Während das Hinzufügen von Schriftanimationen wie eine überflüssige Verschönerung klingen mag, ohne die eine Website gut überleben kann, scheint etwas wie das Hinzufügen von Gewicht bei Fokus beispielsweise eine natürliche und intuitive Möglichkeit zu sein, dem Benutzer den Zustand anzuzeigen. In der Vergangenheit war der Wechsel von normal zu fett absolut störend. Mit variablen Schriftarten kann es glatt und anmutig sein.

Eine Größe passt für alle?

Obwohl Lab DJR und Decovar aufregend kreativ sind, geht es bei variablen Schriftarten nicht nur um avantgardistischen Experimentalismus. Optische Größenanpassung sollte ein besseres Leseerlebnis für das Web bringen. Derzeit ist Schrift auf dem Web größenunabhängig; Sie können die font-size ändern und sie sieht immer noch gleich aus. Optische Größenanpassung bedeutet, größenabhängige Optimierungen für eine Schriftart vorzunehmen, bei denen die Variation der Buchstabenform bei unterschiedlichen Größen die Lesbarkeit verbessern kann. Wir möchten nicht, dass größere Texte unschön oder klobig aussehen, während kleinere Texte von der Entfernung feiner Details profitieren. Offenere Zähler, die Verdickung subtiler Serifen und eine Erhöhung der x-Höhe, Breite, des Abstands und des Zeichenabstands verbessern die Lesbarkeit bei kleineren Größen. Der Anfangswert ist auto, sodass Sie den Vorteil kostenlos erhalten, wenn Sie eine Schriftart verwenden, die einen optischen Größenindex nutzt.

Welche Schriftarten sind verfügbar?

Diese Technologie findet schnell ihren Weg in Browser. Ihre Nutzung erfordert, dass Sie eine variable Schriftart finden, die Sie tatsächlich verwenden möchten. Google Fonts Early Access bietet drei an, und wahrscheinlich werden noch viele mehr folgen. Adobe überarbeitet einige der bekanntesten Familien (z. B. Minion, Myriad, Acumin), um sie variabel zu machen. Die Open-Source-Schriftarten Source Sans und Source Serif wurden ebenfalls veröffentlicht. Monotype, eines der größten Typografieunternehmen der Welt, hat bisher Beta-Versionen von Avenir Next und Kairos Sans vorgestellt. Einige unabhängige Schriftgießereien haben ebenfalls begonnen, variable Schriftarten zu veröffentlichen. Da die Unterstützung für variable Schriftarten nun in allen wichtigen Programmen zur Schriftenerstellung verfügbar ist, können wir eine erhebliche Ausweitung der Verfügbarkeit im Jahr 2018 erwarten.

Ihre Schriftart verwenden

Sobald Sie Ihre Schriftart gefunden haben, müssen Sie @font-face verwenden, um sie auf Ihrer Website einzubinden.

Wir möchten nicht, dass Browser eine Schriftart herunterladen, die sie nicht verwenden können. Aus diesem Grund sollten wir das Format innerhalb der @font-face-Regel angeben. Abhängig vom Dateityp Ihrer variablen Schriftart können Sie woff-variations, woff2-variations, opentype-variations oder truetype-variations angeben. Wie bereits erwähnt, sollten Sie immer woff2 verwenden.

@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable.woff2) format("woff2-variations"),
       url(SourceSans.woff2) format("woff2"); /* for older browsers */
       font-weight: normal; font-style: normal;
}
    
@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable-italic.woff2) format("woff2-variations"),
       url(SourceSans-italic.woff2) format("woff2");
       font-weight: normal; font-style: italic;
}

Eine dritte @font-face ist nur notwendig, um eine fette Backup-Schriftart für Browser bereitzustellen, die keine variablen Schriftarten unterstützen. Beachten Sie, dass wir dieselbe variable Schriftartdatei wie für die erste @font-face-Regel verwenden, da diese Datei sowohl fett als auch normal sein kann.

@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable.woff2) format("woff2-variations"),
       url(SourceSans-bold.woff2) format("woff2");
       font-weight: 700; font-style: normal;
}

Wenn der Browser variable Schriftarten unterstützt, werden SourceSansVariable.woff2 und SourceSansVariable-italic.woff2 heruntergeladen und verwendet. Wenn nicht, werden stattdessen SourceSans.woff2, SourceSans-bold.woff2 und SourceSans-italic.woff2 heruntergeladen.

Von hier aus können wir die Schriftart wie gewohnt auf ein Element anwenden.

html {
  font-family: 'source sans', Verdana, sans-serif;
}

San Francisco

Während variable Schriftarten Leistungsvorteile bieten, bleiben „web-sichere“ Systemschriften immer noch die performanteste Option, da die Schrift bereits installiert ist und nichts heruntergeladen werden muss. Wenn Sie eine variable Schriftart ohne Download verwenden möchten, ist Apples San Francisco, vielleicht die schönste aller Systemschriften, ebenfalls eine variable Schriftart. Die Verwendung von Systemschriften erfordert keine massive Schriftstapel mehr.

html {
  font-family: system-ui, -apple-system;
}

Der Wert system-ui ist der neue Standard für den Zugriff auf Systemschriften, während -apple-system eine nicht standardisierte Syntax ist, die unter Firefox funktioniert. Traditionell gab es Systemschriften nicht in einer großen Auswahl an Gewichten oder Breiten. Hoffentlich werden mehr als variable Schriftarten verfügbar sein, die all die Vorteile variabler Schriftarten ohne eine einzige HTTP-Anfrage bieten.

Browser-Unterstützung

Variable Schriftarten wurden in Chrome und Safari ausgeliefert. Sie sind bereits in der Insider Preview-Version von Edge und hinter einem Flag in Firefox. Derzeit sind noch nicht alle Teile der Spezifikation von Chrome vollständig implementiert. Die Verwendung variabler Schriftarten in Verbindung mit font-style, font-stretch, font-weight und font-optical-sizing funktioniert in Chrome nicht, daher ist die Verwendung von font-variation-settings zur Steuerung der fünf Standardachsen vorerst notwendig. Die Angabe des Formats als woff2-variations innerhalb von @font-face wird in Chrome ebenfalls nicht unterstützt (Sie können nur woff2 angeben und die Schrift funktioniert trotzdem, aber dann können Sie keinen nicht-variablen woff2-Fallback haben).