Variable Fonts

Variable Fonts

Mit HTML5 und CSS3 wurden in den letzten Jahren schon neue Webstandards entwickelt und es bahnt sich mit Variablen Fonts eine weitere, für Typographen wichtige Entwicklung im Webdesign an. Nachdem Ende der 1990er zuerst eher schlecht als recht mit @font-face Webdesignern die Freiheit gegeben wurde, andere als die Systemschriften (also, Arial, Times New Roman oder die allseits beliebte Comic Sans) zu nutzen, dieses dann wieder aufgrund schlechter Umsetzung aus den offiziellen Spezifikationen für CSS 2.1 rausgeworfen wurde, um dann später zuerst von Apple mit Safari 3.1 wieder eingeführt wurde um dann endlich mit CSS3 endlich vernünftig nutzbar zu sein, kommt mit Variablen Fonts die nächste Entwicklungsstufe, was Web-Typographie betrifft.

Webtypographie bisher

Aktuell ist es so, dass man jede einzelne Schriftart und jeden Schriftschnitt einzeln per @font-face-Befehl mittels CSS laden muss, in den entsprechenden Dateien sieht das z.B. dann so aus:

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

und so weiter. Je nachdem, wie viele Schriften ein Webauftritt nutzt (und das können einige sein), kann die dazugehörige fonts.css also riesig und damit unübersichtlich werden. Ausserdem muss sichergestellt sein, dass die jeweiligen Schriften mitsamt ihrer entsprechenden Schriftschnitte auch verfügbar sind, da ansonsten im Idealfall der Text in einer ähnlichen Schrift, im schlimmsten Fall in Comic Sans angezeigt wird.

Was bedeutet Variable Fonts?

Mit Variablen Fonts wird zu allererst die fonts.css kleiner, da nur noch eine Schrift-Datei geladen werden muss. Das macht sich natürlich in der PageSpeed bemerkbar. Das bedeutet, dass mit Variablen Fonts sich neue Möglichkeiten sowohl für Schrift- wie auch für Webdesigner ergeben.

„A font resource that supports multiple font faces in a family along designer-defined axes of variation using OpenType Font Variations mechanisms“
Microsoft Typography
(Eine Fontressource, die verschiedene Schriftschnitte einer Schriftfamilie unterstützt zusammen mit von Designern definierten Varianten, die die OpenType Font Variations-Mechanismen benutzen)

Das hört sich im ersten Moment recht technisch an (und ist es auch). Allerdings bedeutet es für Webdesigner, und damit auch für die Werbeagentur Cyberdog Designs aus Ransbach-Baumbach, dass es nun endlich möglich sein wird, verschiedene Geräte, Bildschirmauflösungen etc. zu bedienen, ohne, dass man JavaScript-Dateien einbinden muss oder aber die CSS-Dateien für jedes einzelne Gerät anpassen muss… und zusätzlich sind dann auch solche Spielereien möglich:

Beispiel für Variable Fonts von Erik van Blokland

Beispiel für Variable Fonts von Erik van Blokland

2017-07-21T00:57:09+00:00