Smashing Podcast Episode 5 avec Jason Pamental : que sont les polices variables ?

Toutes les deux semaines, nous publions un podcast dans lequel je parle à quelqu'un de l'industrie du web sur un sujet différent. Dans cet épisode, découvrons tout ce qui concerne les polices variables ! Je parle à une source de connaissances sur la question, Jason Pamental.

Afficher les remarques

Mise à jour hebdomadaire

• "Systèmes d'illustration de marque : dessiner une identité visuelle forte", Yihui Liu
• "Luttant pour maîtriser les embouteillages", Suzanne Scacca
• "Création d'une mise en page CSS : diffusion en direct avec Rachel Andrew", Rachel Andrew
• "Récapitulatif de l'Avent sur la conception et le développement Web pour 2019", Rachel Andrew
• "Votre site de portefeuille devrait-il être un PWA ?", Suzanne Scacca

Polices variables

• Retrouvez Jason sur le Web à rwt.io
• Newsletter Web Typographie News
• "Polices variables : ce que les auteurs Web doivent savoir", Jason Pamental
• Le livre d'Ellen Lupton "Penser avec le type"
• Le livre d'Erik Spiekermann "Arrêtez de voler des moutons et découvrez comment fonctionne le type"

Transcription

Drew McLellan : C'est un stratège en design, un leader UX, un technologue, un expert en typographie Web et un expert invité au sein du groupe de travail W3C sur les polices Web. Il écrit, parle et travaille avec des équipes et des propriétaires de marques sur la façon de mieux définir le type sur les plateformes numériques. Il a parlé avec des organisations comme Adobe, Audible, Conde Nast, GoDaddy, IBM, et a donné des présentations, des ateliers et des conférences partout dans le monde. Sa newsletter, Web Typography News, est populaire auprès de ceux qui veulent les dernières mises à jour et des conseils sur la typographie sur le Web. Il est clairement un expert en typographie Web. Mais saviez-vous qu'il a représenté la Suède au Lawn Croquet aux Jeux olympiques de 1984 ? Mes amis fracassants, veuillez accueillir Jason Pamental. Bonjour Jason. Comment vas-tu?

Jason Pamental : Je suis fracassant. Surtout après cette introduction.

Drew : Je voulais vous parler aujourd'hui évidemment de la typographie web parce que c'est vraiment votre truc. Vous êtes un véritable expert de la typographie Web. À propos de cela en général, mais en particulier, parlons un peu des polices variables. Je serai le premier à admettre que je ne suis pas un expert en typographie. Je veux dire, s'il vous plaît, considérez-moi comme aussi mal informé que quiconque écoute. Vous ne pouvez me donner aucune information sur la typographie. Je suppose que nous avons des polices Web utilisables sur le Web depuis environ une décennie maintenant. Est-ce correct?

Jason : Ouais. En fait, n'est-ce pas vous qui avez lancé quelque chose sur Twitter il y a quelques jours ? C'était comme le 9 novembre 2009. Cela fait 10 ans en deux jours depuis le lancement de Typekit. Je sais que Font Deck avait raison dans le même laps de temps. Puis Google Fonts et Monotype Service peu de temps après. J'ai eu une invitation bêta qui m'a été donnée par mon ami, John Cianci, qui est en fait toujours un collègue de ma femme à l'agence où elle travaille pour Typekit en 2009. C'était une réinvention complète de mon intérêt pour le web . Je veux dire, ce n'était rien de moins qu'une révolution pour moi. Je veux dire, j'ai toujours aimé la typographie quand je l'avais étudiée à l'école, mais on n'a rien pu faire avec sur le web pendant 15 ans. C'était assez incroyable.

Drew : Il doit y avoir des concepteurs qui travaillent sur le Web et qui possèdent des polices Web depuis plus de 10 ans potentiellement. Il y a des concepteurs travaillant sur le Web maintenant qui n'ont jamais conçu un site sans la possibilité de choisir parmi une vaste gamme de polices de caractères.

Jason : Ouais, c'est vrai. Personne sans cette expérience n'a eu à pousser les pixels vers le haut dans les deux sens comme nous l'avons fait en grandissant. Nous ne sommes pas des vieillards grincheux agitant leurs poings vers le ciel. Mais oui, c'est assez incroyable avec toutes les choses qui ont changé sur le Web, l'idée que certaines personnes n'ont jamais vécue d'une autre manière est remarquable.

Drew : Au moment où nous avons eu les polices Web, cela a été un changement radical dans la façon dont nous avons commencé à utiliser la typographie sur le Web, car nous pouvions vraiment commencer à utiliser la typographie sur le Web. Il y avait évidemment des choses que nous pouvions faire avec les polices sécurisées pour le Web, mais nous étions assez limités à une palette très restreinte. Mais il y a potentiellement maintenant un autre grand changement presque aussi important peut-être avec des polices variables. Je veux dire, que sont les polices variables ? Que font-ils pour nous ? Où commençons nous?

Jason : J'essaie toujours de commencer par donner aux gens un cadre de référence. Ainsi, lorsque nous pensons à l'utilisation de polices sur le Web, nous devons nous rappeler qu'actuellement, avec les polices «traditionnelles», chaque police est une largeur, un poids, une inclinaison et une variante individuels de cette police. Pour chacun que nous voulons utiliser sur le Web, nous devons charger un fichier. Pour un site Web typique où vous l'utilisez pour le corps du texte, vous chargez généralement quatre polices : la normale, le gras, l'italique et le gras italique. Toutes ces choses doivent être chargées. Chacun de ceux-ci est un peu de données qui doivent être téléchargées, traitées et rendues.

Jason : Donc, généralement, ce que nous avons fait au fil des ans, c'est nous contraindre à utiliser ce très petit nombre de polices, ce qui n'est en fait pas une pratique typographique particulièrement efficace. Il est beaucoup plus courant dans la conception graphique d'utiliser une gamme beaucoup plus large. Vous pouvez utiliser huit ou 10 graisses et variantes différentes d'une police de caractères dans un design donné. Sur le web, nous avons été très contraints à cause des performances. La grande différence dans une police variable est que toutes ces permutations, ces variations sont contenues dans un seul fichier. Ce format est vraiment efficace car ce qu'il fait est de stocker la forme régulière de ce caractère, puis ce qu'on appelle les deltas de l'endroit où les points le long de ces courbes se déplaceraient pour le rendre aussi gras ou mince ou large ou étroit.

Jason : Ainsi, en ne stockant que les différences, vous n'avez pas besoin de stocker tout le contour. C'est un format beaucoup plus efficace. Bien qu'il ne soit pas aussi petit qu'un seul fichier de police, il est toujours beaucoup plus petit que tous les fichiers individuels pris séparément. Si vous regardez quelque chose comme Plex Sans d'IBM, tous ces fichiers séparés pourraient être près d'un mégaoctet où deux fichiers de polices variables qui contiennent toutes les largeurs et tous les poids dans le droit dans un fichier, l'italique dans l'autre est comme 230K. C'est pour des jeux de caractères vraiment, vraiment complets. La plupart des gens pourraient en utiliser un sous-ensemble et le réduire encore plus. J'ai généralement vu ces tailles de fichiers autour de 50 à 100 Ko pour un besoin typique de site Web en langue occidentale. Ce n'est pas si différent du chargement… Une fois que vous avez chargé trois ou quatre fichiers de polices individuels, vous chargez probablement plus de données que cela. C'est une victoire intéressante pour les performances, mais cela nous ouvre également toute la gamme de polices de caractères à utiliser sur le Web via CSS.

Drew : Donc, c'est presque comme livrer la recette plutôt que le repas. Plutôt qu'ici la version en italique, voici la version en gras. C'est comme "Voici la version normale et pour la mettre en italique, vous feriez ceci, pour la mettre en gras, vous feriez cela." Cela réduit la taille du fichier qui descend sur le fil.

Jason : Ouais. Eh bien, d'une certaine manière, cela vous donne tous les ingrédients et vous pouvez ensuite faire n'importe quelle recette que vous voulez. Parce que vous pouvez vraiment aller partout à partir de… Pour revenir à l'exemple du Plex, de 100 à 700 poids où 700 est en quelque sorte le gras typique, 400 serait une sorte de poids normal. Mais alors vous avez beaucoup plus léger. Ainsi, vous pouvez créer des en-têtes de ligne très grands et très fins ou des citations de bloc ou différents éléments ou comme accentuation, puis être en mesure de moduler en quelque sorte ce que vous voulez que le gras soit à différentes tailles. Il y a toutes sortes de choses différentes que vous pouvez faire pour une meilleure typographie, une meilleure expérience utilisateur, tout en obtenant de meilleures performances. C'est le gardien.

Drew : Il y a donc un nombre presque infini d'ajustements d'étapes entre ce que nous considérerions aujourd'hui comme régulier et audacieux ? Vous avez en fait la possibilité d'aller n'importe où le long de cet axe pour vous ajuster entre les deux ?

Jason : D'accord. Ce que je pense est vraiment excitant pour moi en tant que personne qui a étudié la conception graphique et qui a examiné d'assez près la conception d'impression pendant de nombreuses années, l'idée de ce qu'est vraiment le gras devrait changer en fonction de la taille du texte que vous rendez. Donc, par défaut, ces 400 et 700 pour normal et bold sont en quelque sorte ce que le Web utilise par défaut. Mais en vérité, la seule raison pour laquelle vous appelez audacieux est que vous voulez mettre l'accent, vous voulez que quelque chose se démarque. Mais plus la police est lourde en petite taille, plus elle est difficile à lire. Il remplit en quelque sorte les petits espaces ouverts. Au lieu d'utiliser 700 pour le corps du texte lorsqu'il est défini sur cette taille d'environ 16 pixels ou tout ce que nous utilisons ici, vous utilisez peut-être 550, 575 où vous obtenez suffisamment d'emphase mais les formes de lettre sont encore plus ouvertes. Ensuite, à mesure qu'il grossit, vous pouvez utiliser un poids plus lourd.

Jason : Mais encore une fois, c'est en quelque sorte votre choix à ce moment-là. En modulant cela pour obtenir le bon niveau d'accentuation, tout en maintenant une très bonne lisibilité, nous avons tellement plus de flexibilité. J'espère vraiment qu'à mesure que ceux-ci deviennent plus populaires et plus largement utilisés, nous pourrons commencer à apprendre aux gens à être un peu plus nuancés dans la façon dont ils utilisent cette gamme et à devenir plus expressifs et plus lisibles en même temps .

Drew : Une chose que j'ai remarquée en implémentant des conceptions en tant que frontal et en implémentant des conceptions qui m'ont été données est que différentes combinaisons de contraste de couleurs et un texte clair sur un fond sombre par rapport à un texte sombre sur un fond clair, les poids peuvent sembler complètement différents. Donc, vraisemblablement, cela aiderait à égaliser et à affiner le visuel et l'expérience de lecture en fonction de changements comme celui-là ?

Jason : Absolument. C'est l'une des choses que je présenterai habituellement dans les ateliers et les conférences, c'est l'ajout de la prise en charge de cette requête multimédia en mode clair. Vous pouvez inverser ce contraste, mais vous voulez le faire de manière nuancée. Selon la police de caractères, il peut finir par avoir l'air très lourd ou un peu grêle avec une police de caractères serif. Parfois, vous voulez aller un peu plus lourd ou un peu plus léger, mais vous avez également tendance à espacer le lettrage lorsque vous l'avez sur un fond sombre, sinon la lettre forme une sorte de saignement ensemble. Il y a de petites choses que vous pouvez ajuster dans la typographie. La requête média est abandonnée tout simplement. Je veux dire, c'est comme deux lignes de code pour ajouter cela à votre site. Ensuite, c'est ce que vous faites avec ça. Il ne s'agit pas nécessairement d'inverser les couleurs. Parfois, vous devez ajuster le contraste, mais aussi modifier le type lui-même pour une meilleure lisibilité.

Drew : Donc, probablement, ce n'est pas seulement le poids qui peut varier dans une police variable. Existe-t-il d'autres moyens de modifier notre police telle qu'elle est affichée ?

Jason : Ouais. Cela dépend entièrement du créateur de caractères. Je pense que c'est vraiment bien de souligner que ce n'est pas gratuit pour tous dans le navigateur. Le navigateur ne peut rendre que ce qui a été activé dans la police. En fin de compte, c'est le créateur de caractères qui dit que le poids varie de ceci à ceci. Vous pourriez avoir un axe de largeur. Il deviendrait un peu plus étroit ou un peu plus large, mais il y a aussi la possibilité d'avoir ce qu'on appelle des axes enregistrés. Il y a la largeur, le poids, l'inclinaison, l'italique et la taille optique. Ce sont toutes sortes de choses essentielles qui sont mappées aux propriétés CSS. L'inclinaison permet un angle entre l'un et l'autre, donc droit et j'en ai en fait vu avec une inclinaison inversée ainsi qu'une inclinaison vers l'avant. C'est totalement ouvert. L'italique est généralement activé ou désactivé, mais pas nécessairement. Vous pouvez en fait avoir… Eh bien, il y a des créateurs de caractères qui ont expérimenté la modification progressive des formes de lettres au fur et à mesure que vous passez de la normale à l'italique, et en quelque sorte en substituant des lettres en cours de route. C'est une chose intéressante.

Jason : Mais il y a aussi la possibilité d'avoir des axes personnalisés. Le créateur de caractères peut définir les axes personnalisés qu'il souhaite faire varier. Vous en avez vu qui ajoutent une sorte d'égouttement par gravité et toutes sortes de formes de torsion amusantes, ou d'extensions d'empattements, modifiant la hauteur des ascendants et des descendants. Sur les formes de lettres minuscules, changer si oui ou non ils sont empattements ou non. Il y a toutes sortes de choses que vous pouvez faire. C'est vraiment à l'imagination d'un créateur de caractères. Je pense que nous ne faisons qu'effleurer la surface de ce qui pourrait arriver de manière réaliste avec toutes ces choses. Tout est accessible via CSS.

Drew : Ouais. Toutes ces propriétés peuvent être modifiées simplement via le CSS normal que vous fournissez avec le reste de votre conception. Quel genre de choses pouvons-nous faire en CSS pour déclencher ces changements ? Est-ce comme nous le ferions avec une mise en page réactive où nous avons des requêtes média pour déclencher cela ?

Jason : Il y a toutes sortes de façons de le faire. Il y a un petit changement que vous devez faire. Je suppose que nous fournirons un tas de liens vers des choses qui aideront les gens à jouer avec ces choses. Je veux dire, j'ai écrit un tas. Espérons que cela aidera les gens. Ensuite, du côté de l'utilisation, l'axe de poids de la police est simplement mappé sur le poids de la police. Au lieu de dire en gras normal, vous fournissez simplement un nombre. Vous pouvez changer cela avec des requêtes multimédias. Vous pouvez le modifier avec JavaScript. Vous pouvez en quelque sorte faire ce que vous voulez avec ça. J'ai utilisé une technique appelée CSS Locks que j'ai apprise de Tim Brown pour utiliser essentiellement les mathématiques. Propriétés personnalisées CSS et calculs pour le mettre à l'échelle, une fois que vous avez atteint un petit point d'arrêt jusqu'à un grand point d'arrêt, il redimensionne en douceur la taille de la police et la hauteur de la ligne.

Jason : Ensuite, vous pouvez également utiliser un peu de JavaScript pour faire la même chose avec leur poids si vous le souhaitez. L'axe de poids correspond au poids de la police, la propriété CSS. L'axe de largeur dans la police correspondra à l'étirement de la police, et cela est simplement exprimé en pourcentage. Je dois noter que de nombreux créateurs de caractères ne réfléchissent pas nécessairement à la façon dont cela est exprimé, vous pouvez donc voir des plages de poids qui font des choses étranges comme aller de 400 à 650. Vous devez toujours l'exprimer en pourcentage, mais cela fonctionne. C'est bon. Vous avez juste besoin de savoir ce qui est normal et toutes les polices sont documentées. Ensuite, avec autre chose que ces deux, actuellement, il y a un support un peu inégal dans la mise en œuvre de l'inclinaison et de l'italique. Beaucoup de ces choses dont vous avez besoin pour utiliser les paramètres de variation de police, puis vous pouvez fournir plusieurs choses à la fois. C'est un peu comme les paramètres des fonctionnalités de police. C'est une sorte de syntaxe de niveau inférieur où vous pouvez fournir une liste séparée par des virgules de cet axe de quatre lettres et la valeur, la suivante, la suivante.

Jason : La seule chose que les gens doivent garder à l'esprit, c'est que lorsque vous utilisez des paramètres de variation de police, vous perdez toute la compréhension sémantique de cela et vous perdez la solution de secours. Le poids et l'étirement de la police sont universellement pris en charge dans tous les navigateurs. Vous devez absolument utiliser ces attributs. Pour toute autre chose, vous pouvez utiliser les paramètres de variation de police. Mais l'avantage d'utiliser le poids de la police comme vous le feriez normalement est que si la police variable ne se charge pas, le navigateur peut toujours faire quelque chose avec cela. Alors que s'il ne comprend pas les polices variables ou qu'il ne se charge pas, si tout est dans les paramètres de variation de police, vous perdez toutes les informations de style. C'est juste une petite remarque ici juste en termes de ce qui est pris en charge où. Mais je dois également dire qu'il est pris en charge dans tous les navigateurs d'expédition que vous êtes susceptible de rencontrer dans la plupart des cas. I-11 ne fonctionne pas, mais vous pouvez fournir des polices Web statiques, puis utiliser des supports publicitaires dans votre CSS pour passer aux polices variables. Ensuite, vous éviterez tout téléchargement d'actifs en double et cela fonctionne très bien. Je l'ai déjà en production sur plusieurs sites.

Drew : Je pense que, comme beaucoup de technologies Web plus modernes que vous voyez, s'il y a une police variable qui bouillonne tranquillement depuis un certain temps, et ce n'est que lorsqu'elle déborde enfin et que nous obtenons un support dans les navigateurs et des gens comme vous en font du bruit et font savoir à tout le monde que c'est là. Cela peut presque être ressenti par le concepteur ou le développeur standard qui fait son travail au jour le jour et ne suit pas tous les derniers téléchargements. Cela peut sembler sortir de nulle part. Mais je suppose que cela bouillonne depuis assez… Je veux dire, vous avez mentionné les deux implémentations légèrement différentes auxquelles nous avons affaire maintenant. Il y a une sorte de norme plus ancienne et plus récente pour la mise en œuvre ?

Jason : Eh bien, ce n'est en fait ni plus ancien ni plus récent. Ils sont tous les deux très intentionnels. J'y reviendrai dans une seconde car cela vaut vraiment la peine de comprendre quelle est la différence avec ceux-ci. Mais tu as raison. Le format a été introduit il y a un peu plus de trois ans, en septembre 2016. Nous avons en fait eu la première implémentation fonctionnelle dans la version nocturne de Safari trois semaines plus tard. C'était assez remarquablement rapide que nous avions un navigateur fonctionnel. Safari a été le premier à fournir un support complet pour cela. Je pense que c'était quand High Sierra est sorti. Je ne sais pas, c'était comme Safari 12 ou quelque chose comme ça.

Jason : Mais peu de temps après, nous avons fini par obtenir une assistance dans Firefox, Edge et Chrome. Nous avons en fait un support de navigateur depuis près de deux ans. Mais il n'y avait pas une tonne de polices. Il y a eu ce genre d'évolution constante. Le support pour les utiliser sur le Web existe en fait depuis plus longtemps que partout ailleurs. Je veux dire, techniquement, ce format fonctionne également sur le système d'exploitation de bureau. Donc, si vous avez un format TTF, vous pouvez l'installer dans votre système d'exploitation de bureau sur Windows ou Mac, et vous pouvez l'utiliser dans n'importe quelle application. Vous ne pouvez pas toujours faire varier les axes comme vous voudriez jouer avec eux à l'infini, mais il y a cette notion d'instances nommées intégrées dans ce fichier de police qui le mappent à ce à quoi nous sommes habitués.

Jason : Dans Keynote, par exemple, il n'y a pas de prise en charge explicite des polices variables, mais le format fonctionne s'il y a des choses comme dans Tech Sense, encore une fois, condensées, légères. Vous aurez ces caractères normaux, réguliers, réguliers en gras, étroits, etc., tous seront disponibles dans un menu déroulant, tout comme l'installation de toute la famille. Ensuite, si vous êtes dans Illustrator ou Photoshop ou maintenant InDesign qui vient d'être livré la semaine dernière ou Sketch qui a été livré il y a quelques semaines, ils prennent tous en charge les polices variables maintenant, de sorte que vous pouvez ensuite accéder à tous les différents axes et jouer avec votre Le contenu de coeur. Mais dans le navigateur, c'est là que nous avons eu beaucoup plus à travailler. En m'inspirant de votre femme, j'ai en quelque sorte battu ce tambour pendant un certain temps en essayant d'amener les gens à en être plus conscients. Ensuite, grâce au travail que l'équipe Firefox a fait dans la création d'outils de développement. Avec Jen Simmons qui pousse cela, nous avons des outils incroyables avec lesquels travailler sur le navigateur qui nous aident à comprendre de quoi les polices sont capables.

Drew : Vous avez mentionné les créateurs de caractères et les capacités de police. Il y a beaucoup de polices disponibles ?

Jason : Eh bien, beaucoup de gens le font maintenant. L'endroit le meilleur et le plus complet pour les trouver est probablement le site de Nick Sherman, v-fonts.com, v-fonts.com. C'est juste un site de catalogue. Il devient rapidement vraiment, vraiment gros. Il y a plus de polices variables qui sortent tout le temps maintenant. Il n'y a pas un grand nombre de polices open source, mais si vous recherchez sur GitHub des polices variables, vous y trouverez en fait tout un tas de projets. Mais Google a lancé une version bêta de sa nouvelle API avec une douzaine de polices variables disponibles. Il y a plus venant d'eux. Ils viennent de sortir Recursive sur recursive.design, qui est une fantastique nouvelle police de caractères de Stephen Nixon. La variable Plex, une est disponible, c'est open source. Ensuite, il y a des tonnes de commerciaux.

Jason : Ce qui est cool, c'est que Monotype en a sorti de très gros. Mais ce sont beaucoup de petites fonderies et de designers individuels qui ouvrent la voie en expérimentant ce format. Je pense que c'est vraiment super pour le design et super pour le web que nous voyons tous ces nouveaux designs de nouveaux designers ou de petits designers qui innovent en quelque sorte. Parce que j'aime les voir réussir avec ça parce qu'ils ont vraiment pris l'initiative de sortir de super trucs.

Drew : Est-ce que nous assistons à une mise à jour des polices existantes pour en faire des polices variables afin de remplacer les familles par une seule police variable ? Est-ce que ça se passe du tout ?

Jason : C'est vrai. Ceux que Monotype a publiés sont des mises à jour de certaines polices de caractères vraiment classiques. FF Meta est celui que je les ai aidés à lancer en concevant la démo de l'année dernière. Ils ont ça. Univers, Frutiger, Avenir, je pense que ce sont ceux qu'ils ont sortis jusqu'à présent, ces quatre-là. Ce sont vraiment des polices de caractères de marque classiques. Ils travaillent plus. Je sais qu'ils en ont au moins une autre demi-douzaine qui sont à divers stades de production. Je sais que Dalton Maag, qui fait une tonne de polices de caractères personnalisées pour les grandes entreprises, a plusieurs polices variables vraiment sympas. J'ai travaillé avec TypeTogether. Ils ont également plusieurs polices de caractères vraiment géniales. Je connais celui-là…

Jason : J'ai montré à certaines des conférences où j'ai parlé de ces choses qu'Adidas a aussi les siennes qu'ils utilisent pour tout leur travail de marque en version imprimée depuis près de deux ans maintenant. Ce qui est vraiment, vraiment remarquable. Mais aussi Mark Simonson travaille sur une version variable de Proxima Nova. C'est un gros problème. C'est l'une des polices Web les plus vendues de tous les temps. Ça se passe. Cela se passe par morceaux, en quelque sorte de haut en bas de l'échelle. Mais même quelque chose d'aussi simple que de s'abonner à David Jonathan Ross, Font of the Month Club, vous donnera une police variable presque tous les mois. Je veux dire, il a été vraiment incroyable sur les trucs qu'il a sortis. C'est comme 72 $ pour l'année ou quelque chose comme ça. Il a sorti toutes sortes de trucs vraiment beaux.

Drew : C'est assez intéressant alors, parce qu'évidemment, avec les capacités des polices variables, vous pouvez créer de nouveaux designs qui les utilisent. Mais potentiellement, il pourrait y avoir des sites en production où il existe maintenant des versions de polices variables sur lesquelles quelqu'un pourrait revenir en arrière, revoir cela et remplacer plusieurs fichiers de polices par une nouvelle implémentation basée sur une nouvelle version de police variable.

Jason : Oui, absolument. Voilà quelques-unes des questions que je reçois assez régulièrement. Récemment, je regardais un assez grand site Web de diffusion sportive que l'équipe de développement m'a posé à propos de la même question. J'ai regardé, et bien sûr, pour deux des polices de caractères qu'ils utilisent, il existe des polices variables disponibles. Une recherche rapide nous a montré que nous pouvions remplacer quatre instances d'une police de caractères et trois de l'autre par deux fichiers de polices variables et supprimer 70 % de la taille du fichier en cinq requêtes. Je veux dire, ce serait une question gagnante du point de vue des performances. Pour un site à très grande échelle, lorsque vous envisagez de supprimer près de 300 000 téléchargements de données sur des millions d'utilisateurs, cela représente en fait des économies réelles en dollars et des coûts de bande passante. Même de ce point de vue purement pratique sans réécrire aucun de leurs CSS, en remplaçant simplement ces polices, cela va déjà être un gain significatif pour eux en termes de performances, de temps de rendu des pages, puis de coûts réels de bande passante pour eux.

Drew : En termes pratiques, est-ce aussi simple que cela puisse paraître, juste échanger l'un contre l'autre ?

Jason : C'est possible. Je pense que l'exemple parfait de cela est quelque chose que Google a en quelque sorte laissé échapper à ATypI en septembre qu'ils ont commencé à le faire avec Oswald à hauteur de 150 millions de fois par jour. Ils en ont fait une version à police variable, et ils ont juste commencé à la surfer sur des sites Web qui utilisaient suffisamment d'instances où cela apporterait un avantage significatif. Ils n'ont rien dit à personne. Ils n'ont rien dit aux propriétaires du site. Personne n'avait rien à faire. Parce qu'il avait le bon mappage de l'axe de poids pour que les valeurs par défaut fonctionnent. 150 millions de fois par jour, c'est beaucoup de polices servies. Cela commence à leur donner une meilleure idée de ce à quoi ressemblerait ce paysage pour eux s'ils pouvaient commencer à changer les cinq principales polices Web qu'ils desservent ? Je suppose que Open Sans en fait probablement partie. Je sais que Lato est probablement là-dedans, Roboto.

Jason : Donc, si vous regardez ceux-ci et regardez à quoi pourraient ressembler les versions optimisées de ceux-ci, vous pouvez voir qu'il y a des raisons très claires pour lesquelles Google serait intéressé par cela. Ensuite, si vous regardez de l'autre côté, juste l'espace de conception et à quel point une entreprise pourrait être plus fidèle à la voix d'une marque si elle travaille avec toute la gamme de polices de sa propre marque plutôt que d'avoir à échanger différentes ou être plus limité dans sa palette. Il y a donc des choses vraiment intéressantes à apprendre et à explorer aux deux extrémités de ce spectre.

Drew : Cela ressemble à un nouveau monde passionnant de typographie et à des opportunités de faire de la dactylographie d'une manière plus sensible et potentiellement plus créative sur le Web que nous n'avions pu le faire auparavant.

Jason : Eh bien, c'est certainement ce que j'espère. Je pense que l'un des plus grands obstacles à l'adoption des polices sur le Web à toutes les étapes a été la performance. Alors que se passe-t-il ? Combien de temps faut-il pour charger ? Qu'est-ce que cela signifie pour le temps de rendu sur la page ? Nous avons ces problèmes de ce genre de flash de texte invisible ou de texte sans style. Aux prises avec toutes ces choses, vraiment, cela revient à combien de temps faut-il tout pour y arriver? Comment le navigateur réagit-il à cela ? Il y a beaucoup de choses que nous pouvons faire pour atténuer certains de ces problèmes. Mais cela se résume vraiment à si nous avons une meilleure police et une meilleure façon de la servir, alors tous ces problèmes deviennent beaucoup moins importants. Donc, en ayant cela en place, nous devenons alors beaucoup plus expressifs. Nous pouvons vraiment essayer de pousser la fin du design et essayer d'être un peu plus créatifs.

Drew : Parce que vous avez écrit dernièrement pour exprimer le sentiment que le Web est peut-être tombé dans le piège de concevoir un modèle d'article par site, avec peut-être quelques variantes pour quelques types de contenu différents. Mais tout le monde dérive vers ce style medium.com de colonne de texte unique très lisible à mes yeux. Joliment composé. Est-ce une si mauvaise chose ?

Jason : Je ne pense pas que ce soit mauvais. Je pense juste que ça va devenir ennuyeux. Je veux dire, quand Medium est sorti, c'était assez nouveau. Je veux dire, je pense qu'une colonne de… Comme vous le dites, c'était une copie assez bien composée. Il a une belle région. Il n'y avait pas trop de monde. Ce n'était pas à l'étroit et les barres latérales et tous ces autres trucs. Il y aura toujours des questions de modèle commercial et de ce qui le soutiendra. C'est pourquoi une très belle refonte de, je pense, c'était le Seattle Times que Mike Monteiro pour Mule Design a fait il y a quelques années. Absolument magnifique jusqu'à son lancement. Ensuite, ils avaient ces bannières massives de chaque côté de la colonne et cela a en quelque sorte enlevé tout cet espace blanc. C'était vraiment dommage.

Jason : Je comprends que les entreprises doivent gagner de l'argent. Il y a des ramifications à cela. Ce serait donc merveilleux que ce soit une option. Pour avoir cette belle mise en page propre. Mais ça ne devrait pas être le seul. Nous avons toutes ces capacités en CSS qui nous permettent de faire des choses vraiment intéressantes avec les marges et la mise en page. Je veux dire, ce n'est même pas seulement le fait que nous avons maintenant un réseau. Mais le fait que nous puissions faire des calculs dans le navigateur en CSS nous permet de faire beaucoup plus de choses intéressantes. Vous superposez cela, la capacité d'être beaucoup plus expressif avec le type, alors nous pourrions commencer à regarder ce qu'ils font dans les magazines. Vanity Fair n'a pas de modèle d'article. Ils en ont six ou sept ou huit. Si vous regardez vraiment comment ils présentent ces choses, il y a une énorme variabilité, mais cela se joue au sein d'un système.

Jason : Ainsi, lorsque nous créons un système de conception pour notre site Web, au lieu de nous arrêter à une seule mise en page, nous avons un moyen relativement simple d'intégrer des commutateurs dans nos systèmes de gestion de contenu. La plupart d'entre eux soutiennent une bonne dose de flexibilité. Il n'y a aucune raison pour que nous ne puissions pas donner le choix aux gens. Je veux utiliser la mise en page un, deux, trois, quatre, cinq, six. Cela va introduire des marges différentes, des compensations différentes. Peut-être introduire la possibilité de créer des colonnes. Il y a beaucoup de choses différentes que nous pourrions faire pour créer un site Web beaucoup plus intéressant. Je pense que ce type peut jouer un très grand rôle là-dedans.

Drew : Est-ce que le type est notre sauveur lorsqu'il s'agit d'ajouter un peu plus de personnalité au Web ?

Jason : Eh bien, je pense que ça peut l'être. Je pense que nous avons eu cette longue évolution sur le web vers une meilleure convivialité. Mais je pense qu'il y a une des victimes quand tout ce qui nous préoccupe est cette approche utilitaire, est-ce une approche utilisable ? Cela a tendance à battre la personnalité. Ensuite, lorsque chaque site Web est… Encore une fois, nous avons fait venir des polices Web et cela a créé un nouveau niveau d'expressivité que nous n'avions pas auparavant. Puis tout d'un coup, nous avons pu… Les écrans se sont améliorés. Les empattements sont donc revenus dans le mélange. Nous pourrions les réutiliser sur le Web. Ces choses ont ajouté un peu de vie. Ensuite, nous avons en quelque sorte optimisé pour que tout le monde utilise un ou deux San-serifs. C'est Open Sans ou c'est Roboto ou Oswald ou autre. Nous revenons un peu à la même chose où il y a des tonnes de polices de caractères vraiment bonnes et vraiment lisibles. Nous n'avons pas vraiment enseigné à cette génération actuelle de designers UX qui sont souvent ceux qui dirigent beaucoup tout ce qui concerne la typographie. N'importe quoi sur la façon dont il peut être expressif, combien il peut modifier l'ambiance et le ton.

Jason : Nous avons donc un grand nombre de personnes qui dictent la direction de conception des choses sur le Web et qui ont des idées sur le type qui ne sont peut-être pas aussi bien informées que quelqu'un qui a étudié le design graphique et ces notions de lisibilité. Nous devons rassembler ces choses. Ce n'est ni l'un ni l'autre. C'est un et. Il le faut.

Drew : Surtout quand on parle de personnalité, de ton et d'humeur. D'un point de vue commercial ou de ce dont nous parlons, ce sont les aspects d'une marque. Donc, en faisant en sorte que tout se ressemble, perdons-nous la capacité de communiquer une marque aux clients ?

Jason : Absolument. Je ne veux pas plonger dans la politique, mais je pense que l'ensemble… L'un des problèmes majeurs que nous avons certainement rencontrés aux États-Unis, et je suis sûr que ce n'est pas si différent de ce qui s'est passé au Royaume-Uni ces dernières années. Lorsque toutes les nouvelles sont consommées via une seule plate-forme et que tout se ressemble, il n'y a pas de distinction de voix. C'est donc quelque chose comme 75% des adultes aux États-Unis qui disent qu'ils obtiennent une partie importante de leurs nouvelles de Facebook. Je veux dire, laissons de côté à quel point c'est généralement horrible. Mais étant donné que tout est présenté de manière uniforme, il n'y a aucune différence entre un article du Guardian, du New York Times, du Wall Street Journal, du Washington Post et des nouvelles de droite de Joe. Tout est présenté exactement de la même manière.

Jason : Quand on voit ce logo, ce style typographique, le Guardian est si caractéristique. Le Wall Street Journal est si caractéristique. Nous reconnaissons instantanément quand nous le voyons, même juste un titre. On sait d'où ça vient. Ensuite, il y a cette association automatique avec cette marque et cette authenticité. Lorsque vous enlevez tout cela, vous vous retrouvez avec, « D'accord, je vais évaluer cela sur un titre. Alors c'est parti, qui a écrit un meilleur titre ? Ce n'est pas beaucoup pour continuer. Je pense donc que nous avons perdu énormément. Si vous regardez ce qu'Apple News Plus essaie de faire, il y a des efforts de la part de quelques entreprises pour essayer de réintroduire cela. Blundell a fait un travail vraiment intéressant en Europe. Ils ont été lancés aux États-Unis, mais je ne suis pas vraiment sûr qu'ils aient vraiment autant de succès. 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. C'est vrai. 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. Merci. 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.