Smashing Podcast Folge 5 mit Jason Pamental: Was sind variable Schriftarten?

Alle zwei Wochen veröffentlichen wir einen Podcast, in dem ich mit jemandem aus der Webbranche über ein anderes Thema spreche. Lassen Sie uns in dieser Episode alles über variable Schriftarten lernen! Ich spreche mit Jason Pamental, einer Quelle des Wissens in dieser Angelegenheit.

Notizen anzeigen

Wöchentliches Update

• „Markenillustrationssysteme: Zeichnen einer starken visuellen Identität“, Yihui Liu
• „Kämpfe, Verkehrsspitzen in den Griff zu bekommen“, Suzanne Scacca
• „Erstellen eines CSS-Layouts: Live-Stream mit Rachel Andrew“, Rachel Andrew
• „Adventszusammenfassung für Webdesign und -entwicklung für 2019“, Rachel Andrew
• „Sollte Ihre Portfolio-Site eine PWA sein?“, Suzanne Scacca

Variable Schriftarten

• Finden Sie Jason im Internet unter rwt.io
• Newsletter für Web-Typografie-News
• „Variable Schriftarten: Was Webautoren wissen müssen“, Jason Pamental
• Ellen Luptons Buch „Thinking With Type“
• Erik Spiekermanns Buch „Hör auf, Schafe zu stehlen & finde heraus, wie Schrift funktioniert“

Abschrift

Drew McLellan: Er ist Designstratege, UX-Leiter, Technologe, Experte für Webtypografie und eingeladener Experte in der W3C-Arbeitsgruppe für Webfonts. Er schreibt, spricht und arbeitet mit Teams und Markeninhabern daran, wie man Schrift auf digitalen Plattformen besser setzt. Er hat mit Organisationen wie Adobe, Audible, Conde Nast, GoDaddy, IBM gesprochen und Präsentationen, Workshops und Konferenzen auf der ganzen Welt gegeben. Sein Newsletter, Web Typography News, ist beliebt bei allen, die die neuesten Updates und Tipps zur Typografie im Web wünschen. Er ist eindeutig ein Experte für Web-Typografie. Aber wussten Sie, dass er Schweden bei den Olympischen Spielen 1984 beim Lawn Croquet vertrat? Meine großartigen Freunde, bitte heißt Jason Pamental willkommen. Hallo Jason. Wie geht es dir?

Jason Pamental: Ich bin großartig. Vor allem nach diesem Intro.

Drew: Ich wollte heute natürlich mit dir über Web-Typografie sprechen, weil das wirklich dein Ding ist. Sie sind ein echter Experte für Webtypografie. Sprechen Sie darüber im Allgemeinen, aber im Besonderen, ein wenig über variable Schriftarten. Ich gebe als erster zu, dass ich kein Typografie-Experte bin. Ich meine, halten Sie mich bitte für so uninformiert wie jeden, der zuhört. Sie können mich nicht mit Informationen über Typografie bevormunden. Ich schätze, wir haben jetzt seit ungefähr einem Jahrzehnt brauchbare Webfonts im Internet. Ist das richtig?

Jason: Ja. Eigentlich, warst du es nicht, der vor ein paar Tagen etwas auf Twitter gestartet hat? Es war wie der 9. November 2009. Es ist wie 10 Jahre in zwei Tagen seit dem Start von Typekit. Ich weiß, dass Font Deck im gleichen Zeitraum Recht hatte. Dann Google Fonts und Monotype Service nicht lange danach. Ich hatte eine Beta-Einladung, die mir von meinem Freund John Cianci gegeben wurde, der eigentlich immer noch ein Kollege meiner Frau in der Agentur ist, in der sie irgendwann im Jahr 2009 für Typekit arbeitet. Das war eine völlig neue Erfindung meines Interesses am Web . Ich meine, es war nichts weniger als eine Revolution für mich. Ich meine, ich habe Typografie schon immer geliebt, als ich sie in der Schule gelernt hatte, aber wir konnten im Web 15 Jahre lang nichts damit anfangen. Das war ziemlich erstaunlich.

Drew: Es muss Designer geben, die jetzt im Web arbeiten und möglicherweise seit über 10 Jahren mit Webfonts arbeiten. Es gibt Designer, die jetzt im Web arbeiten, die noch nie eine Website entworfen haben, ohne aus einer riesigen Auswahl an Schriftarten auswählen zu können.

Jason: Ja, es stimmt. Niemand ohne diese Erfahrung musste die Pixel in beide Richtungen bergauf schieben, wie wir es in unserer Jugend getan haben. Wir sind keine verschrobenen alten Männer, die ihre Fäuste zum Himmel schütteln. Aber ja, es ist irgendwie erstaunlich, nur mit all den Dingen, die sich im Internet geändert haben, die Idee, die manche Leute noch nie auf andere Weise erlebt haben, ist bemerkenswert.

Drew: Als wir Webfonts bekamen, war das eine massive Veränderung in der Art und Weise, wie wir anfingen, Typografie im Web zu verwenden, weil wir wirklich anfangen konnten, Typografie im Web zu verwenden. Es gab offensichtlich Dinge, die wir mit websicheren Schriftarten machen konnten, aber wir waren ziemlich auf eine sehr eingeschränkte Palette beschränkt. Aber es gibt möglicherweise jetzt eine weitere große Verschiebung, die vielleicht mit variablen Schriftarten fast so bedeutend ist. Ich meine, was sind variable Schriftarten? Was tun sie für uns? Wo fangen wir an?

Jason: Ich versuche immer, den Leuten einen Bezugsrahmen zu geben. Wenn wir also über die Verwendung von Schriftarten im Internet nachdenken, müssen wir uns daran erinnern, dass derzeit bei „traditionellen“ Schriftarten jede Schriftart eine individuelle Breite, Stärke, Neigung und Variante dieser Schriftart ist. Für jeden, den wir im Web verwenden wollen, müssen wir eine Datei laden. Für eine typische Website, auf der Sie sie für den Haupttext verwenden, laden Sie normalerweise vier Schriftarten: die normale, fette, kursive und fette kursive. All diese Dinge müssen geladen werden. Jedes davon ist ein kleines bisschen Daten, das heruntergeladen und verarbeitet und gerendert werden muss.

Jason: Im Laufe der Jahre haben wir uns also normalerweise darauf beschränkt, eine sehr kleine Anzahl von Schriftarten zu verwenden, was eigentlich keine besonders gute typografische Praxis ist. Im Grafikdesign ist es viel üblicher, eine viel breitere Palette zu verwenden. Sie können acht oder zehn verschiedene Gewichte und Varianten einer Schriftart in einem bestimmten Design verwenden. Im Web waren wir aufgrund der Leistung sehr eingeschränkt. Der große Unterschied bei einer variablen Schriftart sind all diese Permutationen, diese Variationen sind in einer einzigen Datei enthalten. Dieses Format ist wirklich effizient, weil es die reguläre Form dieses Zeichens speichert und dann die sogenannten Deltas, wo sich die Punkte entlang dieser Kurven bewegen würden, um es als fett oder dünn oder breit oder schmal zu rendern.

Jason: Wenn Sie also nur die Unterschiede speichern, müssen Sie nicht die gesamte Gliederung speichern. Es ist ein viel effizienteres Format. Es ist zwar nicht so klein wie eine einzelne Schriftdatei, aber immer noch viel kleiner als alle einzelnen Dateien einzeln genommen. Wenn Sie sich etwas wie Plex Sans von IBM ansehen, können all diese separaten Dateien fast ein Megabyte groß sein, wobei zwei Dateien mit variablen Schriftarten, die alle Breiten und Gewichte im Hochkant enthalten, in einer Datei enthalten sind, die Kursivschrift in der anderen etwa 230 KB beträgt. Das ist für wirklich, wirklich vollständige Zeichensätze. Die meisten Leute könnten eine Teilmenge davon verwenden und es noch kleiner machen. Ich habe diese Dateigrößen im Allgemeinen zwischen 50 und 100 KB für eine typische Website in westlicher Sprache gesehen. Das ist nicht viel anders als das Laden ... Wenn Sie drei oder vier einzelne Schriftdateien laden, laden Sie wahrscheinlich mehr Daten als das. Es ist ein interessanter Gewinn für die Leistung, aber es eröffnet uns dann auch die gesamte Bandbreite der Schriftart, die wir über CSS im Web verwenden können.

Drew: Es ist also fast so, als würde man eher das Rezept als das Essen liefern. Statt hier ist die kursive Version, hier ist die fette Version. Es ist wie: "Hier ist die normale Version und um es kursiv zu machen, würdest du dies tun, um es fett zu machen, würdest du das tun." Das reduziert die Dateigröße, die über das Kabel geht.

Jason: Ja. Nun, in gewisser Weise gibt es Ihnen alle Zutaten und dann können Sie jedes gewünschte Rezept zubereiten. Denn man könnte wirklich überall hingehen von … Um auf das Plex-Beispiel zurückzukommen, von 100 bis 700 Gewicht, wobei 700 eine Art typischer Fettdruck ist, 400 eine Art normales Gewicht wäre. Aber dann haben Sie viel leichter. Sie könnten also wirklich große und wirklich feine Zeilenüberschriften oder Blockzitate oder verschiedene Elemente oder Hervorhebungen machen und dann in der Lage sein, das zu modulieren, was Sie fett in verschiedenen Größen haben möchten. Es gibt viele verschiedene Dinge, die Sie für eine bessere Typografie, ein besseres Benutzererlebnis und gleichzeitig eine bessere Leistung tun können. Das ist der Pförtner.

Drew: Es gibt also fast unendlich viele Anpassungen von Schritten zwischen dem, was wir heute als normal und mutig bezeichnen würden? Sie haben tatsächlich die Fähigkeit, überall entlang dieser Achse zu gehen, um zwischen den beiden zu zwicken?

Jason: Richtig. Was ich als jemand, der Grafikdesign studiert und sich seit vielen Jahren ziemlich genau mit Druckdesign befasst, sehr spannend finde, ist, dass sich die Vorstellung davon, was fett ist, je nach Größe des zu rendernden Textes ändern sollte. Standardmäßig sind also 400 und 700 für normal und fett so, wie das Web es vorgibt. Aber in Wahrheit ist der einzige Grund, warum Sie fett ausrufen, dass Sie etwas hervorheben möchten, Sie möchten, dass etwas hervorsticht. Aber je dicker die Schrift aus kleiner Größe wird, desto schwieriger ist sie zu lesen. Es füllt gewissermaßen die kleinen offenen Flächen aus. Anstatt 700 für Fließtext zu verwenden, wenn es auf diese ungefähre 16-Pixel-Größe eingestellt ist oder was auch immer wir dort verwenden, verwenden Sie vielleicht 550, 575, wo Sie genug Betonung bekommen, aber die Buchstabenformen noch offener sind. Wenn es dann größer wird, können Sie ein schwereres Gewicht verwenden.

Jason: Aber nochmal, an diesem Punkt ist es irgendwie deine Wahl. Indem wir dies modulieren, um die richtige Betonung zu erreichen, aber dennoch eine wirklich gute Lesbarkeit beibehalten, haben wir so viel mehr Flexibilität. Ich hoffe wirklich, dass wir, wenn diese immer beliebter und weiter verbreitet werden, den Leuten beibringen können, ein bisschen nuancierter mit der Art und Weise umzugehen, wie sie diesen Bereich nutzen, und gleichzeitig ausdrucksstärker und auch besser lesbar werden .

Drew: Eine Sache, die mir beim Implementieren von Designs als Frontend und beim Implementieren von Designs, die mir gegeben wurden, aufgefallen ist, ist, dass unterschiedliche Farbkontrastkombinationen und heller Text auf dunklem Hintergrund im Vergleich zu dunklem Text auf hellem Hintergrund die Gewichte völlig unterschiedlich aussehen können. Vermutlich würde dies also dazu beitragen, das visuelle und das Leseerlebnis basierend auf solchen Änderungen auszugleichen und zu verfeinern?

Jason: Absolut. Das ist eines der Dinge, die ich normalerweise in Workshops und Vorträgen vorstelle, ist das Hinzufügen von Unterstützung für diese Medienabfrage im Lichtmodus. Sie können diesen Kontrast umkehren, aber dann möchten Sie es auf eine nuancierte Weise tun. Je nach Schriftart kann es mit einer Serifenschrift sehr schwer oder etwas spindeldürr aussehen. Manchmal möchten Sie etwas schwerer oder etwas heller werden, aber Sie müssen dann auch den Schriftzug auf einem dunklen Hintergrund verteilen, da sonst die Buchstabenformen irgendwie zusammenlaufen. Es gibt Kleinigkeiten, die Sie in der Typografie anpassen können. Die Medienabfrage wird ganz einfach fallen gelassen. Ich meine, es sind wie zwei Codezeilen, um das zu Ihrer Website hinzuzufügen. Dann ist es das, was Sie damit machen. Es ist nicht unbedingt nur das Invertieren der Farben. Manchmal müssen Sie den Kontrast anpassen, aber auch die Schrift selbst für eine bessere Lesbarkeit optimieren.

Drew: Vermutlich ist es also nicht nur die Stärke, die in einer variablen Schriftart variiert werden kann. Gibt es andere Möglichkeiten, wie wir unsere Schriftart wie angezeigt ändern können?

Jason: Ja. Es liegt ganz beim Schriftdesigner. Ich denke, es ist wirklich gut zu betonen, dass dies im Browser nicht kostenlos für alle ist. Der Browser kann nur das darstellen, was in der Schriftart aktiviert wurde. Letztendlich ist es der Schriftdesigner, der sagt, dass das Gewicht so weit reicht. Möglicherweise haben Sie eine Breitenachse. Es würde ein bisschen schmaler oder ein bisschen breiter werden, aber es gibt auch die Möglichkeit, sogenannte registrierte Achsen zu haben. Es gibt Breite, Gewicht, Neigung, Kursivschrift und optische Größe. Das sind alle möglichen Kerndinge, die CSS-Eigenschaften zugeordnet werden. Slant erlaubt einen Winkel zwischen einander, also aufrecht und ich habe tatsächlich solche mit einer umgekehrten Neigung sowie einer Vorwärtsneigung gesehen. Das ist total offen. Kursiv ist im Allgemeinen ein- oder ausgeschaltet, aber nicht unbedingt. Sie können tatsächlich … Nun, es gibt Schriftdesigner, die damit experimentiert haben, die Buchstabenformen schrittweise zu ändern, wenn Sie von normal zu kursiv wechseln, und dabei Buchstaben irgendwie zu ersetzen. Das ist eine interessante Sache.

Jason: Aber dann gibt es die Möglichkeit, benutzerdefinierte Äxte zu haben. Der Schriftdesigner kann beliebige benutzerdefinierte Achsen definieren, die er variieren möchte. Sie haben solche gesehen, die eine Art Gravitationstropfigkeit und alle möglichen lustigen verdrehten Formen hinzufügen oder Serifen verlängern und die Höhe der Ober- und Unterlängen ändern. Ändern Sie bei den Kleinbuchstabenformen, ob es sich um Serifen handelt oder nicht. Es gibt alle möglichen Dinge, die Sie tun können. Es hängt wirklich von der Vorstellungskraft eines Schriftdesigners ab. Ich denke, wir kratzen nur an der Oberfläche, was realistischerweise mit all diesen Dingen passieren könnte. Es ist alles über CSS zugänglich.

Drew: Ja. Alle diese Eigenschaften können einfach über das normale CSS angepasst werden, das Sie mit dem Rest Ihres Designs bereitstellen. Was können wir in CSS tun, um diese Änderungen auszulösen? Ist es genauso, wie wir es mit einem responsiven Layout machen würden, bei dem wir Medienanfragen haben, um das auszulösen?

Jason: Es gibt alle möglichen Möglichkeiten, wie Sie es tun können. Es gibt eine kleine Änderung, die Sie vornehmen müssen. Ich nehme an, dass wir ein paar Links zu einigen Dingen bereitstellen werden, die den Leuten helfen, mit diesen Dingen herumzuspielen. Ich meine, ich habe eine Menge geschrieben. Hoffentlich hilft das den Leuten weiter. Dann wird auf der Verwendungsseite die Schriftgewichtsachse einfach auf das Schriftgewicht abgebildet. Anstatt normal fett zu sagen, geben Sie einfach eine Zahl ein. Sie können das mit Medienabfragen ändern. Sie können es mit JavaScript ändern. Du kannst damit machen, was du willst. Ich habe eine Technik namens CSS Locks verwendet, die ich von Tim Brown gelernt habe, um im Grunde Mathematik zu verwenden. Benutzerdefinierte CSS-Eigenschaften und Berechnungen zum Skalieren, sobald Sie einen kleinen Bruchpunkt bis zu einem großen Bruchpunkt erreicht haben, skaliert es die Schriftgröße und Zeilenhöhe reibungslos.

Jason: Dann können Sie auch ein wenig JavaScript verwenden, um dasselbe mit ihrem Gewicht zu tun, wenn Sie möchten. Die Gewichtsachse wird der Schriftstärke, der CSS-Eigenschaft, zugeordnet. Die Breitenachse in der Schriftart wird der Schriftdehnung zugeordnet, und das wird nur als Prozentsatz ausgedrückt. Ich sollte anmerken, dass viele Schriftdesigner nicht unbedingt darüber nachdenken, wie dies ausgedrückt wird, sodass Sie möglicherweise Gewichtsbereiche sehen, die seltsame Dinge tun, wie z. B. von 400 bis 650. Sie müssen es immer noch in Prozent ausdrücken, aber es funktioniert. Das ist gut. Sie müssen nur wissen, was normal ist, und alle Schriftarten sind dokumentiert. Dann gibt es bei allem anderen als diesen beiden derzeit eine etwas ungleichmäßige Unterstützung in der Implementierung für Schräge und Kursiv. Viele dieser Dinge müssen Sie auf die Verwendung von Schriftartvariationseinstellungen zurückgreifen, und dann können Sie mehrere Dinge gleichzeitig bereitstellen. Es ist so etwas wie die Einstellungen für Schriftarten. Es ist eine Art Syntax auf niedrigerer Ebene, bei der Sie eine durch Kommas getrennte Liste dieser Vier-Buchstaben-Achse und den Wert, den nächsten, den nächsten angeben können.

Jason: Die eine Sache, die die Leute im Hinterkopf behalten müssen, ist, dass Sie bei der Verwendung von Schriftartvariationseinstellungen das gesamte semantische Verständnis dafür verlieren und Sie den Fallback verlieren. Schriftstärke und Schriftdehnung werden universell in allen Browsern unterstützt. Sie sollten diese Attribute unbedingt verwenden. Für alles andere können Sie Einstellungen für Schriftartvariationen verwenden. Aber der Vorteil der normalen Verwendung der Schriftstärke besteht darin, dass der Browser immer noch etwas damit anfangen kann, wenn die variable Schriftart nicht geladen wird. Wenn es jedoch keine variablen Schriftarten versteht oder nicht geladen wird und sich alles in den Schriftartvariationseinstellungen befindet, verlieren Sie alle Stilinformationen. Das ist nur eine kleine Randnotiz in Bezug darauf, was wo unterstützt wird. Aber ich sollte auch sagen, dass es in allen Versandbrowsern unterstützt wird, denen Sie wahrscheinlich in den meisten Fällen begegnen werden. I-11 funktioniert nicht, aber Sie können statische Webfonts liefern und dann in Ihrem CSS Anzeigenunterstützungen verwenden, um auf die variablen Schriftarten umzustellen. Dann vermeiden Sie doppelte Downloads von Assets und es funktioniert wirklich gut. Ich habe das bereits an mehreren Standorten in Produktion.

Drew: Ich denke, wie bei vielen der moderneren Webtechnologien, die Sie sehen, wenn es eine variable Schriftart gibt, die eine Weile leise vor sich hin brodelt und erst dann überkocht und wir Unterstützung in Browsern bekommen und Leute wie du machen Lärm darüber und lassen alle wissen, dass es da ist. Es kann sich fast wie ein Standarddesigner oder -entwickler anfühlen, der nur tagtäglich mit seiner Arbeit fortfährt und nicht alle neuesten Downloads verfolgt. Es kann scheinen, als wäre es aus dem Nichts gekommen. Aber ich schätze, das brodelt schon seit einiger Zeit… Ich meine, Sie haben die zwei leicht unterschiedlichen Implementierungen erwähnt, mit denen wir uns jetzt befassen. Gibt es eine Art älteren und einen neueren Standard für die Implementierung?

Jason: Nun, es ist eigentlich nicht älter und neuer. Sie sind beide sehr absichtlich. Ich werde gleich darauf zurückkommen, weil es sich wirklich lohnt zu verstehen, was der Unterschied zu diesen ist. Aber du hast recht. Das Format wurde vor etwas mehr als drei Jahren eingeführt, das war im September 2016. Drei Wochen später hatten wir tatsächlich die erste funktionierende Implementierung im nächtlichen Build von Safari. Es war ziemlich bemerkenswert schnell, dass wir einen funktionierenden Browser hatten. Safari war der erste, der volle Unterstützung dafür lieferte. Ich glaube, das war, als High Sierra herauskam. Ich weiß nicht, es war wie Safari 12 oder so ähnlich.

Jason: Aber nicht lange danach bekamen wir Support für Firefox, Edge und Chrome. Wir haben eigentlich seit fast zwei Jahren Browserunterstützung. Aber es gab nicht eine Tonne Schriftarten. Es gab diese Art von stetiger Entwicklung. Die Unterstützung für deren Verwendung im Web gibt es tatsächlich länger als anderswo. Technisch gesehen funktioniert dieses Format auch auf Desktop-Betriebssystemen. Wenn Sie also ein TTF-Format haben, können Sie es in Ihrem Desktop-Betriebssystem unter Windows oder Mac installieren und es in jeder Anwendung verwenden. Sie können die Achsen nicht immer so variieren, wie Sie vielleicht unendlich mit ihnen spielen möchten, aber es gibt diese Vorstellung von benannten Instanzen, die in diese Schriftartdatei eingebettet sind, die sie auf das abbilden, woran wir gewöhnt sind.

Jason: In Keynote zum Beispiel gibt es keine ausdrückliche Unterstützung für variable Schriftarten, aber das Format funktioniert, wenn es Dinge wie in Tech Sense gibt, wieder komprimiert, leicht. Sie haben diese normal, normal, normal fett, schmal usw., alle wären in einem Dropdown-Menü verfügbar, genau wie bei der Installation der ganzen Familie. Wenn Sie sich dann in Illustrator oder Photoshop oder jetzt InDesign befinden, das erst letzte Woche ausgeliefert wurde, oder Sketch, das vor ein paar Wochen ausgeliefert wurde, unterstützen alle jetzt variable Schriftarten, sodass Sie dann auf alle verschiedenen Achsen zugreifen und damit spielen können Herzenslust. Aber im Browser hatten wir viel mehr zu tun. In Anlehnung an Ihre Frau schlage ich seit einiger Zeit auf dieser Trommel herum und versuche, die Leute dazu zu bringen, sich dessen bewusster zu werden. Dann dank der Arbeit, die das Firefox-Team bei der Erstellung von Entwicklertools geleistet hat. Mit Jen Simmons, die das vorantreibt, haben wir unglaubliche Tools, mit denen wir im Browser arbeiten können, die uns helfen zu verstehen, wozu die Schriftarten fähig sind.

Drew: Sie haben Schriftdesigner und die Schriftfunktionen erwähnt. Es gibt viele Schriftarten, die verfügbar sind?

Jason: Nun, viele Leute machen es jetzt. Der wahrscheinlich beste und umfassendste Ort, um nach ihnen zu suchen, ist die Website von Nick Sherman, v-fonts.com, v-fonts.com. Das ist nur eine Katalogseite. Es wird schnell wirklich, wirklich groß. Es kommen jetzt ständig mehr variable Schriftarten heraus. Es gibt nicht viele Open-Source-Projekte, aber wenn Sie auf GitHub nach variablen Schriftarten suchen, werden Sie dort tatsächlich eine ganze Reihe von Projekten finden. Aber Google hat eine Betaversion seiner neuen API mit etwa einem Dutzend variabler Schriftarten gestartet, die dort verfügbar sind. Von denen kommt noch mehr. Sie haben gerade Recursive bei recursive.design herausgebracht, eine fantastische neue Schrift von Stephen Nixon. Die Plex-Variable, eine ist verfügbar, das ist Open Source. Dann gibt es Tonnen von kommerziellen.

Jason: Das Coole daran ist, dass Monotype einige ziemlich große herausgebracht hat. Aber es sind viele kleinere Gießereien und einzelne Designer, die beim Experimentieren mit diesem Format eine Art Vorreiter sind. Ich denke, das ist wirklich großartig für das Design und großartig für das Web, dass wir all diese neuen Designs von neuen Designern oder kleineren Designern sehen, die diese Art von Neuland betreten. Weil ich es mag, wenn sie damit Erfolg haben, weil sie wirklich die Initiative ergriffen haben, um ein paar tolle Sachen rauszubringen.

Drew: Sehen wir eine Aktualisierung bestehender Schriftarten in variable Schriftarten, um Familien durch eine einzelne variable Schriftart zu ersetzen? Geht das überhaupt?

Jason: Das ist es. Die von Monotype veröffentlichten sind Aktualisierungen einiger wirklich klassischer Schriften. FF Meta war eines, bei dessen Einführung ich ihnen geholfen habe, indem ich letztes Jahr die Demo dafür entworfen habe. Das haben sie. Univers, Frutiger, Avenir, ich glaube, das sind die, die sie bisher veröffentlicht haben, diese vier. Das sind wirklich klassische Markenschriften. Sie arbeiten an mehr. Ich weiß, dass sie noch mindestens ein halbes Dutzend haben, die sich in verschiedenen Produktionsstadien befinden. Ich weiß, dass Dalton Maag, das eine Menge kundenspezifischer Schriftarten für große Unternehmen erledigt, mehrere wirklich schöne variable Schriftarten hat. Ich habe etwas mit TypeTogether gearbeitet. Sie haben auch einige wirklich tolle Schriftarten. Den kenne ich …

Jason: Ich habe auf einigen der Konferenzen gezeigt, auf denen ich über diese Dinge gesprochen habe, dass Adidas auch ihre eigenen hat, die sie seit fast zwei Jahren für ihre gesamte Markenarbeit im Druck verwenden. Was wirklich, wirklich bemerkenswertes Zeug ist. Aber auch Mark Simonson arbeitet an einer variablen Version von Proxima Nova. Das ist eine große Sache. Das war einer der meistverkauften Webfonts aller Zeiten. Es passiert. Es passiert in Stücken und Stücken auf der ganzen Skala. Aber selbst etwas so Einfaches wie das Abonnieren von David Jonathan Ross, Font of the Month Club, bringt Ihnen fast jeden Monat eine variable Schriftart. Ich meine, er war wirklich unglaublich bei dem, was er herausgebracht hat. Es ist wie $ 72 für das Jahr oder so etwas. Er hat alle möglichen wirklich schönen Sachen herausgebracht.

Drew: Das ist ziemlich interessant, weil man mit den Möglichkeiten variabler Schriftarten natürlich neue Designs erstellen könnte, die diese nutzen. Aber möglicherweise könnte es Websites geben, die in Produktion sind, wo jetzt Versionen von variablen Schriftarten verfügbar sind, auf die jemand zurückgehen, diese erneut aufrufen und mehrere Schriftartdateien durch eine neue Implementierung ersetzen könnte, die auf einer neuen Version von variablen Schriftarten basiert.

Jason: Ja, absolut. Das sind einige der Fragen, die ich ziemlich regelmäßig bekomme. Kürzlich habe ich mir eine ziemlich große Sportübertragungswebsite angesehen, die mir das Entwicklungsteam zu derselben Frage gestellt hat. Ich habe nach zwei der Schriftarten gesucht, die sie verwenden, und tatsächlich sind variable Schriftarten verfügbar. Eine kurze Recherche zeigte uns, dass wir vier Instanzen einer Schriftart und drei der anderen durch zwei Dateien mit variablen Schriftarten ersetzen und in fünf Anfragen über 70 % der Dateigröße wegnehmen konnten. Ich meine, es wäre ein Fragegewinn aus Sicht der Leistung. Wenn Sie sich bei wirklich großen Websites das Entfernen von fast 300.000 Datendownloads von Millionen von Benutzern ansehen, summiert sich das tatsächlich zu echten Dollareinsparungen und Bandbreitenkosten. Selbst von diesem rein praktischen Standpunkt aus wird es für sie bereits ein erheblicher Gewinn für sie sein, was die Leistung, die Seitenrenderzeit und dann die tatsächlichen Bandbreitenkosten anbelangt, ohne ihr CSS neu zu schreiben und nur diese Schriftarten zu ersetzen.

Drew: Ist es in der Praxis so einfach, wie es sich anhört, einfach das eine gegen das andere auszutauschen?

Jason: Das kann sein. Ich denke, das perfekte Beispiel dafür ist etwas, das Google im September bei ATypI so beiläufig durchgehen ließ, dass sie damit begonnen haben, dies mit Oswald in einer Menge von 150 Millionen Mal am Tag zu tun. Sie erstellten eine Version mit variabler Schriftart und begannen damit, auf Websites zu surfen, die genügend Instanzen verwendeten, in denen es einen erheblichen Nutzen bringen würde. Sie haben es niemandem gesagt. Sie haben es den Seitenbesitzern nicht gesagt. Niemand musste etwas tun. Weil es die richtige Zuordnung der Gewichtsachse hatte, damit die Standardeinstellungen einfach funktionieren würden. 150 Millionen Mal am Tag ist eine Menge Font Serving. Das gibt ihnen allmählich bessere Einblicke, wie diese Landschaft für sie aussehen würde, wenn sie anfangen könnten, die fünf wichtigsten Webfonts, die sie bedienen, umzustellen? Ich gehe davon aus, dass Open Sans wahrscheinlich einer davon ist. Ich weiß, Lato ist wahrscheinlich da drin, Roboto.

Jason: Wenn Sie sich also diese ansehen und sich ansehen, wie optimierte Versionen davon aussehen könnten, dann können Sie sehen, dass es einige sehr klare Gründe gibt, warum Google daran interessiert wäre. Dann, wenn Sie auf die andere Seite schauen, nur der Gestaltungsraum und wie viel wahrer einer Markenstimme ein Unternehmen sein könnte, wenn es mit der gesamten Bandbreite seiner eigenen Markenschrift arbeitet, anstatt verschiedene auszutauschen oder mehr zu sein in ihrer Palette begrenzt. Es gibt also an beiden Enden dieses Spektrums wirklich interessante Dinge zu lernen und zu erforschen.

Drew: Es klingt nach einer aufregenden, schönen neuen Welt der Typografie und Möglichkeiten, im Web auf sensiblere und möglicherweise kreativere Weise zu schreiben, als wir es zuvor konnten.

Jason: Nun, das hoffe ich auf jeden Fall. Ich denke, dass eines der größten Hindernisse für die Einführung von Schriftarten im Web in allen Phasen die Leistung war. Was passiert also? Wie lange dauert das Laden? Was bedeutet das für die Renderzeit auf der Seite? Wir haben diese Probleme mit dieser Art von unsichtbarem Text oder unformatiertem Text. Wenn man sich mit all diesen Dingen auseinandersetzt, kommt es wirklich darauf an, wie lange es dauert, bis man dort ankommt? Wie reagiert der Browser darauf? Es gibt viele Dinge, die wir tun können, um einige dieser Probleme zu mildern. Aber es kommt wirklich darauf an, wenn wir eine bessere Schriftart und einen besseren Weg haben, sie zu bedienen, dann werden all diese Probleme viel weniger wichtig. Wenn wir das also an Ort und Stelle haben, werden wir viel ausdrucksstärker. Wir können wirklich versuchen, das Designende davon voranzutreiben und versuchen, ein bisschen kreativer zu sein.

Drew: Weil Sie in letzter Zeit geschrieben haben, dass Sie das Gefühl zum Ausdruck bringen, dass das Web vielleicht in eine Art Falle geraten ist, eine Artikelvorlage pro Seite zu entwerfen, vielleicht mit einigen Variationen für ein paar verschiedene Arten von Inhalten. Aber jeder driftet irgendwie in Richtung dieses Medium.com-Stils mit einer einzelnen Textspalte ab, die für meine Augen sehr gut lesbar ist. Schön gesetzt. Ist das so schlimm?

Jason: Ich finde es nicht schlimm. Ich denke nur, dass es langweilig wird. Ich meine, als Medium herauskam, war das ziemlich neu. Ich meine, ich denke, diese eine Spalte von … Wie Sie sagen, es war eine ziemlich gut gesetzte Kopie. Es hat eine schöne Gegend. Es war nicht überfüllt. Es war nicht eng und Seitenleisten und all diese anderen Sachen. Es wird immer Fragen zum Geschäftsmodell geben und was dieses unterstützt. Deshalb war es, glaube ich, ein wirklich schönes Redesign der Seattle Times, das Mike Monteiro für Mule Design vor ein paar Jahren gemacht hat. Absolut großartig, bis es auf den Markt kam. Dann hatten sie diese massiven Banner auf beiden Seiten der Säule und es hat einfach all diesen Leerraum weggenommen. Es war eine echte Schande.

Jason: Ich verstehe, dass Unternehmen Geld verdienen müssen. Das hat Konsequenzen. Es wäre also wunderbar, wenn das eine Option wäre. Um dieses schöne, saubere Layout zu haben. Aber es sollte nicht der einzige bleiben. Wir haben all diese Fähigkeiten in CSS, die es uns ermöglichen, wirklich interessante Dinge mit Rändern und Layout zu machen. Ich meine, es ist nicht einmal nur die Tatsache, dass wir jetzt Grid haben. Aber die Tatsache, dass wir Berechnungen im Browser in CSS durchführen können, erlaubt uns, viel interessantere Dinge zu tun. Dazu kommt noch die Fähigkeit, mit Schrift viel ausdrucksstärker zu sein, dann könnten wir anfangen, uns anzusehen, was sie in Zeitschriften machen. Vanity Fair hat keine Artikelvorlage. Sie haben sechs oder sieben oder acht. Wenn Sie sich wirklich ansehen, wie sie diese Dinge auslegen, gibt es eine enorme Variabilität, aber es spielt sich innerhalb eines Systems ab.

Jason: Wenn wir also ein Designsystem für unsere Website erstellen, haben wir, anstatt nur bei einem Layout zu bleiben, eine relativ einfache Möglichkeit, einige Schalter in unsere Content-Management-Systeme einzubauen. Die meisten von ihnen unterstützen ein gutes Maß an Flexibilität. Es gibt keinen Grund, warum wir den Leuten keine Wahl lassen könnten. Ich möchte Layout eins, zwei, drei, vier, fünf, sechs verwenden. Das wird unterschiedliche Margen, unterschiedliche Offsets einführen. Vielleicht die Einführung der Möglichkeit, einige Spalten zu erstellen. Es gibt viele verschiedene Dinge, die wir tun könnten, um das Web viel interessanter zu machen. Ich denke, dass dieser Typ eine wirklich große Rolle dabei spielen kann.

Drew: Ist Schrift unser Retter, wenn es darum geht, dem Web wieder ein bisschen mehr Persönlichkeit zu verleihen?

Jason: Nun, ich denke schon. Ich denke, wir haben diese lange Entwicklung im Web hin zu einer besseren Benutzerfreundlichkeit hinter uns. Aber ich denke, dass eines der Opfer ist, wenn wir uns immer nur um diesen utilitaristischen, brauchbaren Ansatz kümmern? Das neigt dazu, die Persönlichkeit zu schlagen. Wenn dann jede einzelne Website … Wieder kamen Webfonts hinzu, und das schuf eine neue Ausdrucksebene, die wir vorher nicht hatten. Dann konnten wir plötzlich … Die Displays wurden besser. Also kamen Serifen wieder in die Mischung. Wir könnten diese wieder im Web verwenden. Diese Dinge fügten etwas Leben hinzu. Dann haben wir sozusagen zurückoptimiert, dass alle eine oder zwei serifenlose Schriften verwenden. Es ist Open Sans oder es ist Roboto oder Oswald oder was auch immer. Wir sind wieder bei der gleichen Sache, wo es Tonnen von wirklich guten, wirklich lesbaren Schriftarten gibt. Wir haben dieser aktuellen Generation von UX-Designern, die oft diejenigen sind, die viel davon vorantreiben, nicht wirklich etwas über Typografie beigebracht. Alles darüber, wie ausdrucksstark es sein kann, wie sehr es die Stimmung und den Ton verändern kann.

Jason: Wir haben also eine riesige Anzahl von Leuten, die die Designrichtung der Dinge im Web bestimmen, die Ideen über Schrift haben, die vielleicht nicht so gut informiert sind wie jemand, der Grafikdesign und diese Vorstellungen von Lesbarkeit studiert hat. Wir müssen diese Dinge zusammenbringen. Es ist nicht das eine oder das andere. Es ist ein und. Es muss sein.

Drew: Vor allem, wenn wir über Persönlichkeit, Ton und Stimmung sprechen. Aus betriebswirtschaftlicher Sicht bzw. worüber wir sprechen, sind Aspekte einer Marke. Wenn wir also alles gleich aussehen lassen, verlieren wir die Fähigkeit, eine Marke an Kunden zu kommunizieren?

Jason: Absolut. Um nicht in die Politik einzutauchen, aber ich denke, das Ganze … Eines der Hauptprobleme, das wir sicherlich in den USA erlebt haben, und ich bin mir sicher, dass es sich nicht wesentlich von dem unterscheidet, was in den letzten Jahren in Großbritannien passiert ist. Wenn alle Nachrichten über eine einzige Plattform konsumiert werden und alles gleich aussieht, gibt es keinen Unterschied zwischen den Stimmen. So geben etwa 75 % der Erwachsenen in den USA an, dass sie einen erheblichen Teil ihrer Nachrichten von Facebook erhalten. Ich meine, lassen wir beiseite, wie allgemein erschreckend das ist. Aber da alles einheitlich präsentiert wird, gibt es keinen Unterschied zwischen einem Artikel aus dem Guardian, der New York Times, dem Wall Street Journal, der Washington Post und Joes rechten Nachrichten. Es wird alles genau gleich präsentiert.

Jason: Wenn wir dieses Logo, diesen Schriftstil sehen, ist der Guardian so charakteristisch. Das Wall Street Journal ist so charakteristisch. Wir erkennen sofort, wenn wir es sehen, auch nur eine Überschrift. Wir wissen, woher das kam. Dann gibt es diese automatische Assoziation mit dieser Marke und dieser Authentizität. Wenn Sie all das wegnehmen, bleibt Ihnen übrig: „Okay, ich werde das anhand einer Überschrift bewerten. Dann heißt es: Wer hat eine bessere Überschrift geschrieben? Das ist nicht viel zu tun. Ich denke also, dass wir enorm viel verloren haben. Wenn Sie sich ansehen, was Apple News Plus zu tun versucht, gibt es einige Bemühungen einiger Unternehmen, dies wieder einzuführen. Blundell hat das in Europa wirklich interessant gemacht. Sie wurden in den USA eingeführt, aber ich bin mir nicht sicher, ob sie jemals wirklich so erfolgreich waren. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. Es ist wahr. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. It is true. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. Danke. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.