Wir haben Webentwickler, die wir bewundern, dieselbe Frage gestellt: Was an der Erstellung von Websites interessiert Sie dieses Jahr? Hier ist, was sie uns erzählt haben.

 

Wir möchten uns bei unserem ❥ Sponsor Automattic bedanken, der diese Seite ermöglicht. Sie stellen viele großartige Softwareprodukte her, die wir verwenden, wie Jetpack, WooCommerce und WordPress.com.

Variations on Theme: Reinventing Type on the Web

Wenn jemand etwas über mich weiß, dann meistens eines von zwei Dingen: dass ich zwei unglaublich flauschige Hunde habe oder dass ich Schriften und Typografie mag. Wirklich, wirklich mag. Während ich also begeistert bin, wie gut Tristan seine Hydrotherapie macht – wir gehen jetzt 50 % weiter als noch vor ein paar Monaten, ohne Pausen einlegen zu müssen –, bin ich noch mehr von variablen Schriften angetan.

Image of Tristan and Tillie explaining variable fonts

Ich weiß, ihr seid wahrscheinlich alle wirklich schockiert.

Ich war seit ihrer Einführung vor drei Jahren ziemlich auf sie fixiert und denke, sie werden eine massiv große Sache sein. Aber es hat noch nicht diesen Wendepunkt erreicht – noch nicht. Aber einige Dinge kommen zusammen, die mich denken lassen, dass dies vielleicht das Jahr sein könnte. Lassen Sie mich kurz zurücktreten und erklären.

Siehe den Pen
Variable font, outlined
von Jason Pamental (@jpamental)
auf CodePen.

Plex Sans Variable, mit Umrissen, die den Bereich der Gewichte und Breiten zeigen, die mit einer einzigen Datei möglich sind

Die Zukunft ist variabel

Variable Fonts sind eine Weiterentwicklung der OpenType-Schriftspezifikation, die es einer einzigen Datei ermöglicht, alle Variationen von Breite, Gewicht, Neigung, Kursivschrift und praktisch jeder anderen Permutation einer Schriftart zu enthalten, die der Schriftgestalter zur Verfügung stellen möchte – alles in einer einzigen Datei. Diese eine Datei ist hocheffizient, daher ist sie viel kleiner als alle einzelnen Dateien. Für das Web bedeutet dies, dass wir in vielen Fällen erhebliche Download-Daten sparen, die Anzahl der HTTP-Anfragen reduzieren und die uns zur Verfügung stehende Designflexibilität drastisch erhöhen können. Eine ziemlich große Veränderung gegenüber diesen alten statischen Webfonts, die wir in den letzten 10 Jahren verwendet haben. Es gibt jede Menge gute Dinge dazu da draußen (ich habe einige hier, hier, hier und hier geschrieben), aber Sie können auch den Tag direkt hier auf CSS Tricks durchsuchen.

Diese Browser-Supportdaten stammen von Caniuse, das weitere Details enthält. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

ChromeFirefoxIEEdgeSafari
6662Nein1711

Mobil / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712711.0-11.2
Laut caniuse.com sind variable Schriften auf 87 % der Geräte im Web sichtbar.

Jetzt, da die Browserunterstützung ziemlich vollständig ist (bis auf IE11 und einige Android-Browser wie Baidu und UC), verbessert sich die Verfügbarkeit von variablen Schriften (schauen Sie sich v-fonts.com an) und Google führt die Unterstützung dafür über seine neue API ein – es fühlt sich an, als könnte dies endlich das Durchbruchsjahr für sie sein.

Was mich daran am meisten begeistert, ist, was wir sehen werden, wie die Leute kreieren. Ich bin sicher, am Anfang wird es viel "Rip and Replace" geben, ähnlich wie wir es auf der Website der Nielson/Norman Group mit der Integration von Source Sans Variable auf ihrer Website letztes Jahr gesehen haben, oder was Google mit Oswald Variable seit mehreren Monaten täglich auf 148 Millionen Websites testet. Im Grunde nur die Verwendung anstelle einiger statischer Instanzen, um die Vorteile schnellerer Seitenladezeiten und weniger Code zu nutzen.

Was großartig ist, aber nur ein Anfang.

Ich freue mich darauf zu sehen, wie die Leute die volle Bandbreite dessen nutzen, was diese Schriften leisten können. Von ultraleicht bis superdick, superkondensiert bis extrabreit. Was auch immer die Schriften unterstützen, steht uns zur Erkundung zur Verfügung. Ich hoffe, Designer werden sich hineinstürzen und die Kraft großartiger Typografie erforschen. Typografie, die mehr und vielfältigere Botschaften vermittelt, um uns auf unseren Websites und Apps zu leiten. Typografie in Bewegung, die uns von hier nach dort führen kann.

Siehe den Pen
Layout variations, part deux
von Jason Pamental (@jpamental)
auf CodePen.

Dies ist eine der Erkundungen, die ich für meinen Newsletter und Vorträge gemacht habe, wobei ich mit Lesbarkeit und der Spannung zwischen schnellem und langsamem Lesen gespielt habe.

Wird einiges davon schrecklich sein?

Wahrscheinlich. Aber das waren auch viele frühe responsive Websites. Und viele Websites mit statischen Webfonts, als sie zum ersten Mal starteten. Oder Flash-basierte Websites. All dies waren Weiterentwicklungen dessen, was wir im Web gestalten und erstellen können. Es liegt an uns, es gut und nicht schlecht zu machen. Ich freue mich darauf, gemeinsam zu lernen.

Wenn Typografie die Stimme unserer Worte ist – mit variablen Schriften – ist diese Stimme dann zu einem Chor geworden.