Variable einführen Fonts

Variable einführen Fonts

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 Unruhen, Terroranschlägen, Naturkatastrophen und dem vorzeitigen Tod von Prominenten geprägt war, hat die mobile Internetnutzung zum ersten Mal desktop überholt. Und laut dem diesjährigen Wolfgang Digital KPI Report kommen 63 % des gesamten Internetverkehrs mittlerweile von Mobiltelefonen und Tablets. Mit der Einführung von 5G wird sich dieser Anteil wahrscheinlich exponentiell erhöhen.

Drei Sekunden

Webseiten müssen schnell laden. Wir alle wissen das, 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 woanders hingeht.

Es stellte sich heraus, dass es nur 3 Sekunden sind.

Webseiten auf Ihrem Handy noch langsamer laden, was auf die Verarbeitungsgeschwindigkeit, den begrenzten Speicher und manchmal auch auf die Geschwindigkeit der Internetverbindung zurückzuführen ist. Da die Menschen heute hauptsächlich über ihre Telefone auf das Internet zugreifen, 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 an

Bei Taylor/Thomas sind wir immer bestrebt, die Ladezeiten von 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 Font Gewichten oder Stilen verwendet. Das liegt daran, dass Webseite für jede auf einer Seite verwendete Variante von Font eine eigene Datei Font laden muss.

Wenn Sie mehrere verschiedene Schriftschnitte und die kursiven Versionen verwenden, muss Ihre Website 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 Datei Font geladen ist.

OpenType Font Variationen

In einer beispiellosen Zusammenarbeit zwischen Microsoft, Google, Apple und Adobe sowie vielen Schriftarten Designer und Foundrys wurde die OpenType Font Variations-Technologie entwickelt.

Diese neue Technologie, die von den meisten einfach als "variable Fonts" bezeichnet wird, ermöglicht es Designer , die Grenzen einer Schriftart zu definieren und sie dazwischen zu skalieren. Eine variable Font ist ein Paket, das das Äquivalent mehrerer individueller Fonts in einer einzigen Datei darstellt.

Als Fontsmith Über mit ihren Plänen für eine variable Fonts Microsite an uns herantrat, waren wir sehr gespannt. Variable Fonts sind noch sehr neu, daher waren wir sehr daran interessiert, die Technik in die Finger zu bekommen, aber wir wollten auch sehen, wie sehr sie die Ladezeiten unserer Webseite verbessern würde.

Anstatt jede Datei Font einzeln zu laden, können wir jetzt nur eine Datei laden, die alle Varianten enthält. Wo wir früher vier Dateien brauchten - sagen wir normal, kursiv, fett und fett-kursiv - haben wir jetzt eine einzige Font Datei, die uns Zugriff auf die gesamte Palette der verfügbaren Schnitte, Breiten und Stile gibt. Toll, nicht wahr?

Wie funktioniert die Variable Fonts

Die Varianten der einzelnen Font werden zusammen mit den so genannten Achsen kontrolliert. 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). Type Designer kann jede dieser Bezeichnungen verwenden sowie eigene Achsen und tags erstellen.

Die Kursivschrift kann entweder ein- oder ausgeschaltet sein, aber die meisten Achsen sind eine Skala, die vom Schriftgestalter festgelegt wird. Die Gewichtsskala Mai reicht zum Beispiel von 100 bis 900. 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 Fonts haben benutzerdefinierte Achsen, d. h. wir können genau festlegen, wie viel wir von FS Kitty's Schatten und Umriss und FS Pimlico's Glühen haben wollen.

"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.

 - John Hudson, Einführung in OpenType Variable Fonts

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 auch einen Blick auf Font in Photoshop, Illustrator, Sketch oder den Firefox-Entwicklungswerkzeugen werfen, wo Sie die verfügbaren Achsen sehen und bearbeiten können.

Steuerung der Achsen

Die Achsen werden über CSS gesteuert, unter Verwendung der Eigenschaft Font-variation-settings*. Hier setzen wir zum Beispiel die optische Größe (opsz) für FS Kim auf 120 und das Gewicht (wght) auf 180.

fs-kim { font-family: “FS Kim”; font-size: 40px; font-variation-settings: ‘opsz’ 120, ‘wght’ 180; }

Wenn die Schrift benutzerdefinierte Achsen hat, verwenden wir einfach die entsprechende tags , die vom Schriftdesigner definiert wurde. Die FS Kitty Outline hat zum Beispiel eine "Outline"-Achse (OUTL) und eine Schattenachse (SHDW). Die OpenType-Spezifikation schreibt vor, dass die benutzerdefinierten Achsen tags in Großbuchstaben geschrieben werden müssen, wie unten dargestellt.

.fs-kitty { font-family: “FS Kitty Outline”; font-size: 40px; font-variation-settings: ‘OUTL’ 300, ‘SHDW’ 400; }

*Die CSS4-Spezifikation impliziert, dass wir bald in der Lage sein werden, Font-weight, Font-stretch, Font-Stil 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 Experimentierphase, und wir empfehlen, vorerst Font-variation-settings zu verwenden.

Wir können auch die Font Variationseinstellungen animieren, indem wir CSS-Animationen oder Übergänge verwenden. Auf diese Weise haben wir die Startseite der Microsite Fontsmith Variable Fonts realisiert . Hier ist ein einfaches Beispiel dafür, wie Sie die FS Pele von einem Ende ihrer Achsen zum anderen animieren könnten.

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

 

Die Zukunft der Variablen Fonts

Variable Fonts 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 Anwenden text-shadow: 0 0; in der CSS!

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 www.variable-Fonts.com.

Artikel verfasst von Bekah McDonald, Front-End-Entwicklerin bei Taylor/Thomas.