Einführung von variablen Schriftarten

Bekah McDonald Wissen teilen

Irgendwann zwischen dem Tod von David Bowie und der Wahl von Donald Trump haben wir alle angefangen, unsere Mobiltelefone viel häufiger für den Internetzugang zu nutzen als unsere Desktops.

Im Jahr 2016, das von vielen als eines der "schlimmsten Jahre in der Geschichte" bezeichnet wurde, weil es von politischen Umwälzungen, Terroranschlägen, Naturkatastrophen und dem vorzeitigen Tod von Prominenten geprägt war, hat die mobile Internetnutzung zum ersten Mal den Desktop überholt. Und laut der diesjährigen

63 % des gesamten Internetverkehrs wird heute über Mobiltelefone und Tablets abgewickelt. Mit der Einführung von 5G wird sich dieser Anteil wahrscheinlich exponentiell erhöhen.Drei SekundenWolfgang Digital KPI-Bericht

Websites müssen schnell laden. Das wissen wir alle, aber Google hat umfangreiche Untersuchungen zu diesem Thema durchgeführt. Sie wollten wissen, wie lange eine Person im Durchschnitt bereit ist, auf das Laden einer Seite zu warten, bevor sie aufgibt und eine andere Seite aufruft.

Es stellt sich heraus, dass es sich nur um

.Websites werden auf dem Handy noch langsamer geladen, was auf die Verarbeitungsgeschwindigkeit, den begrenzten Speicherplatz und manchmal auch auf die Geschwindigkeit der Internetverbindung zurückzuführen ist. Jetzt, wo die Menschen auf das Internet zugreifen3 Sekunden

über ihre Telefone nutzen, ist es umso wichtiger, eine schnelle Website zu haben. Eine Webseite, die langsam lädt, kann Sie Kunden kosten.Auf die Größe kommt es anhauptsächlich

Bei Taylor/Thomas sind wir immer bestrebt, die Ladezeiten der Seiten so kurz wie möglich zu halten, wobei wir alle Tools einsetzen, die wir in die Finger bekommen. Die Ladezeit unter den von Google empfohlenen 3 Sekunden zu halten, kann manchmal eine Herausforderung sein, vor allem, wenn die Website eine breite Palette von Schriftschnitten oder -stilen verwendet. Das liegt daran, dass Ihre Website für jede Variante einer Schriftart, die auf einer Seite verwendet wird, eine separate Schriftartdatei laden muss.

Wenn Sie mehrere verschiedene Schriftschnitte und die kursiven Versionen verwenden, muss Ihre Webseite eine ganze Reihe von Dateien laden. Und das wird einige Zeit dauern. Und nicht nur das: Wenn die Dateien nicht schnell genug geladen werden, werden Ihre Benutzer wahrscheinlich auf eine Systemschrift zurückgreifen, bevor die bevorzugte Schriftdatei geladen ist.

OpenType-Schriftartenvariationen

In einer beispiellosen Zusammenarbeit zwischen Microsoft, Google, Apple und Adobe sowie vielen Schriftdesignern und Gießereien wurde die OpenType Font Variations-Technologie entwickelt.

Diese neue Technologie, die von den meisten als "variable Schriftarten" bezeichnet wird, ermöglicht es Schriftgestaltern, die Grenzen einer Schriftart zu definieren und sie zwischen diesen Grenzen zu skalieren. Bei einer variablen Schriftart wird das Äquivalent mehrerer einzelner Schriftarten in einer einzigen Datei verpackt.

Als Fontsmith uns von ihren Plänen für eine Microsite mit variablen Schriftarten erzählte, waren wir sehr gespannt. Variable Schriftarten sind noch sehr neu, daher waren wir sehr daran interessiert, die Technik kennenzulernen, aber wir wollten auch sehen, wie sehr sie die Ladezeiten unserer Website verbessern würde.

Anstatt jede Schriftartdatei einzeln zu laden, können wir jetzt nur eine Datei laden, die Folgendes enthält

der Varianten. Wo wir früher vier Dateien brauchten - z. B. normal, kursiv, fett und fett-kursiv -, haben wir jetzt eine einzige Schriftdatei, die uns Zugriff auf die gesamte Palette der verfügbaren Schnitte, Breiten und Stile bietet. Toll, nicht wahr?So funktionieren variable Schriftenalle

Die Varianten jeder Schriftart werden zusammen mit den so genannten Achsen gesteuert. Jede Achse hat ein "Tag", eine aus vier Buchstaben bestehende Abkürzung, unter der sie bekannt ist. Es gibt fünf standardisierte Achsennamen und Tags: Gewicht (wght), Breite (wdth), Neigung (slnt), optische Größe (opsz) und Kursivschrift (ital). Schriftgestalter können jede dieser Bezeichnungen verwenden und darüber hinaus ihre eigenen Achsen und Tags erstellen.

Kursiv kann entweder ein- oder ausgeschaltet sein, aber die meisten Achsen sind eine Skala, die vom Schriftdesigner festgelegt wird. Die Gewichtsskala kann zum Beispiel von 100 bis 900 reichen. Die Neigung kann zwischen 0 und 10 liegen.

Es gibt jetzt nicht nur Light, Semi-Bold und Heavy, sondern auch alles, was dazwischen liegt. Wir sind nicht mehr durch vordefinierte Gewichtungen eingeschränkt. Wenn also fett zu fett und mittel nicht fett genug ist, können Sie das perfekte Gewicht dazwischen finden.

Einige der variablen Fontsmith-Schriften haben benutzerdefinierte Achsen, was bedeutet, dass wir genau entscheiden können, wie viel wir von

Schatten und Umrisse undFS Pimlicoleuchtet."Die Möglichkeit der dynamischen Auswahl von benutzerdefinierten Instanzen innerhalb des Variations-Designraums - oder Design-Variations-Raums, um den technischen Namen zu verwenden - eröffnet spannende Perspektiven für die Feinabstimmung der typografischen Palette und für neue Arten von responsiver Typografie, die sich anpassen kann, um dynamische Inhalte je nach Gerät, Bildschirmausrichtung oder sogar Leseabstand des Lesers optimal darzustellen.FS Kitty

- John Hudson, Einführung in variable OpenType-Schriften

Um herauszufinden, welche Achsen und Skalen für die einzelnen Schriftarten zur Verfügung stehen, sollten Sie sich das Musterblatt der jeweiligen Schriftart ansehen. Alternativ können Sie sich die Schrift in Photoshop, Illustrator, Sketch oder den Firefox-Entwicklungswerkzeugen ansehen, wo Sie die verfügbaren Achsen sehen und manipulieren können.

Steuerung der Achsen

Die Achsen werden über CSS mit der Eigenschaft font-variation-settings* gesteuert. Hier stellen wir zum Beispiel die optische Größe (opsz) für

auf 120 und das Gewicht (Wght) auf 180.Wenn die Schrift benutzerdefinierte Achsen hat, verwenden wir einfach die entsprechenden Tags, die vom Schriftdesigner definiert wurden. Die FS Kitty Outline hat zum Beispiel eine "Outline"-Achse (OUTL) und eine Schattenachse (SHDW). Die OpenType-Spezifikation schreibt vor, dass benutzerdefinierte Achsen-Tags in Großbuchstaben angegeben werden müssen, wie unten dargestellt.FS Kim

fs-kim { font-family: "FS Kim"; font-size: 40px; font-variation-settings: 'opsz' 120, 'wght' 180; }

*Die CSS4-Spezifikation sieht vor, dass wir bald in der Lage sein werden, font-weight, font-stretch, font-style und font-optical-sizing zur Steuerung der Achsen zu verwenden. Einige Browser bieten diese Möglichkeit bereits an, aber sie befindet sich noch in der experimentellen Phase, und wir empfehlen, vorerst die Einstellungen für Schriftvariationen zu verwenden.

.fs-kitty { font-family: "FS Kitty Outline"; font-size: 40px; font-variation-settings: 'OUTL' 300, 'SHDW' 400; }

Wir können auch die Einstellungen der Schriftvariationen animieren, indem wir CSS-Animationen oder Übergänge verwenden. Auf diese Weise haben wir die Homepage der

Hier ein einfaches Beispiel, wie Sie animieren könnenFS Pelévon einem Ende seiner Achsen zum anderen.Die Zukunft der variablen SchriftartenMicrosite von Fontsmith Variable Fonts.

@keyframes pele { 0% { font-variation-settings: 'slnt' 0, 'wght' 100'; } 100% { font-variation-settings: 'slnt' 10, 'wght' 900; } }

 

Variable Schriftarten werden noch nicht von allen Browsern unterstützt, und es gibt noch einige Rendering-Probleme. Wir haben zum Beispiel festgestellt, dass Chrome FS Pele und FS Kitty bei der Animation falsch darstellt, es sei denn, wir wenden (etwas bizarrerweise) text-shadow: 0 0; im CSS an!

Wir gehen davon aus, dass diese Rendering-Probleme in den kommenden Versionen von Chrome behoben werden und die Browserunterstützung schnell zunimmt, auch wenn ältere Browser wie IE11 immer einen Fallback benötigen werden.

Wir freuen uns immer, an einem Projekt mit Fontsmith zu arbeiten, aber dieses Projekt hat besonders viel Spaß gemacht, weil die Technologie so neu und aufregend ist.

Sehen Sie, was wir gemeinsam aufgebaut haben, unter

.Artikel geschrieben von Bekah McDonald, Front-End-Entwicklerin beiwww.variable-fonts.com

.Taylor/ThomasTaylor/Thomas