Que sont les polices variables?

Dans cet épisode du Smashing Podcast, nous parlons de polices variables. Quelles sont-elles, en quoi diffèrent-elles des polices ordinaires et comment peuvent-elles aider à la conception et aux performances de nos sites Web?

Notes de présentation

Mise à jour hebdomadaire:

Polices variables

Transcription

Drew McLellan: C'est une conception stratège, leader UX, technologue, expert en typographie Web, et expert invité au sein du groupe de travail sur les polices Web du W3C. Il écrit, parle et travaille avec des équipes et des propriétaires de marques sur la meilleure façon de définir le type sur les plateformes numériques. Il a parlé avec des organisations comme Adobe, Audible, Condénast, GoDaddy, IBM, et a donné des présentations et des ateliers et des conférences partout dans le monde. Son bulletin d'information, 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 allez-vous?

Jason Pamental: J'écrase. Surtout après cette intro.

Drew: Je voulais évidemment vous parler aujourd'hui de la typographie Web parce que c'est vraiment votre truc. Vous êtes un vrai expert de la typographie web. À ce sujet 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 aussi mal informé que quiconque écoute. Vous ne pouvez pas me fréquenter avec des informations sur la typographie. Je suppose que nous avons des polices Web utilisables sur le Web depuis environ une décennie maintenant.

Jason: Ouais. En fait, n'est-ce pas vous qui avez commencé quelque chose sur Twitter il y a quelques jours? C'était comme le 9 novembre 2009. C'est comme 10 ans en deux jours depuis le lancement de Typekit. Je sais que Font Deck avait raison dans le même laps de temps. Ensuite, Google Fonts and 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 actuellement encore 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'ai étudiée à l'école, mais nous n'avons rien pu faire avec elle sur le web pendant 15 ans. C'était assez étonnant.

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

Jason: Oui, c'est vrai. Personne sans cette expérience n'a dû pousser les pixels dans les deux sens comme nous l'avons fait en grandissant. Nous ne sommes pas des vieillards grincheux qui secouent le poing vers le ciel. Mais oui, c'est assez étonnant juste avec toutes les choses qui ont changé sur le web, l'idée que certaines personnes n'ont jamais vécu autrement est remarquable.

Drew: Au moment où nous a obtenu des polices web, ce fut un changement radical dans la façon dont nous avons commencé à utiliser la typographie sur le web parce que nous pouvions vraiment commencer à utiliser la typographie sur le web. Il y avait évidemment des choses que nous pouvions faire avec des polices Web sécurisées, 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 les polices variables. Je veux dire, quelles sont les polices variables? Que font-ils pour nous? Par où commencer?

Jason: J'essaie toujours de donner aux gens un cadre de référence. Donc, 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, une variante individuelle 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 la copie du corps, vous chargez généralement quatre polices: l'italique, le gras, l'italique et l'italique gras. Toutes ces choses doivent être chargées. Chacun de ces éléments est un petit 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, nous sommes contraints d'utiliser ce tout petit nombre de polices, ce qui n'est en fait pas une excellente pratique de typographie. Il est beaucoup plus courant dans la conception graphique d'utiliser une gamme beaucoup plus large. Vous pouvez utiliser huit ou 10 poids et variantes différents d'une police de caractères dans une conception donnée. Sur le Web, nous avons été très contraints en raison des performances. La grande différence dans une police variable est toutes ces permutations, ces variations sont contenues dans un seul fichier. Ce format est vraiment efficace parce que ce qu'il fait est de stocker la forme régulière de ce personnage, puis ce qu'on appelle les deltas de l'endroit où les points le long de ces courbes se déplaceraient pour le rendre en gras ou mince ou large ou étroit.

Jason: Donc, en ne stockant que les différences, vous n'avez pas à stocker tout le contour. C’est un format beaucoup plus efficace. Bien qu'il ne soit pas aussi petit qu'un seul fichier de polices, 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 peuvent être presque un mégaoctet où deux fichiers de polices variables qui contiennent toutes les largeurs et poids dans le montant dans un fichier, l'italique dans l'autre est comme 230K. C’est pour des jeux de caractères vraiment très complets. La plupart des gens pourraient utiliser un sous-ensemble de cela et le rendre encore plus petit. J'ai généralement constaté des tailles de fichier d'environ 50 à 100 Ko pour un besoin typique d'un 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 police individuels, vous chargez probablement plus de données que cela. C'est une victoire intéressante pour la performance, mais cela ouvre également toute la gamme de la police de caractères à utiliser sur le Web via CSS.

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

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

Drew: Il y a donc presque un nombre infini de réglages 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 modifier les deux?

Jason: D'accord. Ce que je pense est vraiment excitant pour moi en tant que personne qui a étudié le design graphique et qui a examiné de près le design d'impression pendant de nombreuses années, l'idée de ce qui est en gras devrait vraiment changer en fonction de la taille du texte que vous rendez. Donc, par défaut, les 400 et 700 pour les caractères normaux et gras correspondent à ce que le Web utilise par défaut. Mais en vérité, la seule raison pour laquelle vous appelez en gras est que vous voulez mettre l'accent, vous voulez que quelque chose se démarque. Mais plus la police est lourde, plus elle est petite, plus elle est difficile à lire. Il remplit en quelque sorte les petits espaces ouverts. Au lieu d'utiliser 700 pour la copie du corps lorsqu'elle est définie sur cette taille d'environ 16 pixels ou tout ce que nous utilisons là-bas, vous utilisez peut-être 550, 575 où vous obtenez suffisamment d'accentuation mais les formes de lettres sont toujours 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 conservant 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 pouvons commencer à enseigner aux gens à être un peu plus nuancés avec la façon dont ils utilisent cette gamme et deviennent en fait plus expressifs et plus lisibles en même temps. .

Drew: Une chose que j'ai remarquée en mettant en œuvre des conceptions en tant qu'extrémité avant et en mettant en œuvre des conceptions qui m'ont été données est que différentes combinaisons de contraste de couleur et texte clair sur un fond sombre par rapport au texte sombre fond clair, les poids peuvent être complètement différents. Donc, sans doute, 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ésente habituellement lors d’ateliers et de conférences: ajouter la prise en charge de cette requête média en mode clair. Vous pouvez inverser ce contraste, mais vous voulez le faire de manière nuancée. En fonction de la police de caractères, il peut sembler très lourd ou plutôt grincheux avec une police serif. Parfois, vous voulez aller un peu plus lourd ou un peu plus léger, mais vous avez également tendance à avoir besoin d'espacer le lettrage lorsque vous l'avez sur un fond sombre ou bien la lettre forme une sorte de saignement ensemble. Il y a des petites choses que vous pouvez ajuster dans la typographie. La requête média est abandonnée de manière simple. Je veux dire, c'est comme deux lignes de code pour ajouter cela à votre site. Ensuite, c'est ce que vous faites avec ça. Ce n’est pas nécessairement inverser les couleurs. Parfois, vous devez ajuster le contraste, mais également modifier le type lui-même pour une meilleure lisibilité.

Drew: Donc, sans doute, ce n'est pas seulement le poids qui peut être modifié dans une police variable. Il y a d'autres façons de changer notre police telle qu'elle est affichée?

Jason: Ouais. Tout dépend du concepteur de caractères. Je pense que c'est vraiment bien de renforcer que ce n'est pas gratuit pour tous dans le navigateur. Le navigateur ne peut afficher que ce qui a été activé dans la police. En fin de compte, c'est le concepteur de type qui dit que le poids varie de ceci à ceci. Vous pourriez avoir un axe de largeur. Cela 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 les uns et les autres, donc en position verticale et j'en ai effectivement vu des avec une inclinaison inversée ainsi qu'une inclinaison 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 concepteurs de caractères qui ont expérimenté de changer progressivement les formes des lettres à mesure que vous passez de la normale à l'italique, et en quelque sorte de remplacer les 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 concepteur de types peut définir les axes personnalisés à modifier. Vous en avez vu qui ajoutent une sorte de gouttes de propagation par gravité et toutes sortes de formes de torsion amusantes, ou des empattements allongés, changeant la hauteur des ascendants et des descendants. Sur les lettres minuscules, en changeant si ce sont des empattements ou non. Il y a toutes sortes de choses que vous pouvez faire. C’est vraiment à l’imagination d’un créateur de typographie. 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 uniquement 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 exactement comme nous le ferions avec une mise en page réactive où nous avons des requêtes médiatiques 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 trucs qui aideront les gens à jouer avec ces trucs. Je veux dire, j'ai écrit un tas. J'espère que cela aidera les gens. Ensuite, du côté de l'utilisation, l'axe du poids de la police est juste mappé au poids de la police. Au lieu de dire gras régulier, vous fournissez simplement un nombre. Vous pouvez changer cela avec des requêtes multimédias. Vous pouvez le changer avec JavaScript. Vous pouvez 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 les mathématiques. Propriétés personnalisées CSS et calculs pour le mettre à l'échelle, une fois que vous atteignez un petit point d'arrêt jusqu'à un grand point d'arrêt, il modifie en quelque sorte la taille de la police et la hauteur de la ligne.

Jason: Ensuite, vous pouvez utilisez également un peu de JavaScript pour faire la même chose avec leur poids si vous le souhaitez. L'axe de pondération correspond au poids de la police, la propriété CSS. L'axe de largeur de la police correspondra à l'étirement de la police, et cela est simplement exprimé en pourcentage. Je dois noter que de nombreux concepteurs de types ne réfléchissent pas nécessairement à la façon dont cela s'exprime.Vous pouvez donc voir des gammes de poids qui font des choses étranges comme aller de 400 à 650. Vous devez toujours l'exprimer en pourcentage, mais cela fonctionne. C'est bien. 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 peu de soutien inégal dans la mise en œuvre de slant et italic. Un grand nombre de ces choses dont vous avez en quelque sorte besoin pour revenir à l'utilisation des 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 en quelque sorte une 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 dont les gens ont besoin pour gardez à l'esprit que lorsque vous utilisez les paramètres de variation de police, vous perdez toute compréhension sémantique de cela et vous perdez le repli. Le poids et l'étirement des polices sont universellement pris en charge dans tous les navigateurs. Vous devez absolument utiliser ces attributs. Pour toute autre chose, vous pouvez utiliser des 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 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 note annexe, 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 circonstances. 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 en double d'actifs et cela fonctionne très bien. Je l'ai déjà en production sur plusieurs sites.

Drew: Je pense, comme la plupart des technologies Web plus modernes que vous voyez, s'il y a une police variable qui bouillonne doucement depuis un certain temps, et ce n'est que lorsque cela finit par déborder et que nous obtenons un soutien dans les navigateurs et les gens comme vous en font du bruit et font savoir à tout le monde que c'est là. Cela peut presque sembler au concepteur ou développeur standard qui ne fait que travailler au jour le jour et ne suit pas tous les derniers téléchargements. Cela peut sembler provenir de nulle part. Mais je suppose que cela bouillonne depuis assez longtemps … Je veux dire, vous avez mentionné les deux implémentations légèrement différentes que nous traitons maintenant. Il existe une sorte de norme d'implémentation plus ancienne et plus récente?

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-là. 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. Il était assez rapide que nous disposions d'un navigateur fonctionnel. Safari a été le premier à proposer un support complet. 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 recevoir une assistance dans Firefox, Edge et Chrome. Nous prenons en charge le 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 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 de la façon dont vous voudrez peut-être jouer avec eux en quelque sorte à l'infini, mais il y a cette notion d'instances nommées incorporées dans ce fichier de police qui les mappent à ce à quoi nous sommes habitués. [19659007] Jason: Dans Keynote, par exemple, il n'y a pas de prise en charge explicite pour les 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 ceux normaux, réguliers, réguliers gras, étroits, etc., tous seraient 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, afin que vous puissiez ensuite accéder à tous les différents axes et jouer avec celui-ci sur 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 un peu 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 pour créer des outils de développement. Avec Jen Simmons qui pousse le long de cela, nous avons des outils incroyables pour travailler avec le navigateur qui nous aident à comprendre de quoi les polices sont capables.

Drew: Vous avez mentionné les concepteurs de types et les capacités des polices. Il y a beaucoup de polices disponibles?

Jason: Eh bien, beaucoup de gens le font maintenant. Le site le plus complet et le plus complet pour les rechercher est probablement le site de Nick Sherman, v-fonts.com, v-fonts.com. C’est juste un site de catalogue. Il devient rapidement vraiment très gros. Il y a plus de polices variables qui sortent tout le temps maintenant. Il n'y a pas un grand nombre de logiciels 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 dizaine de polices variables disponibles sur place. Il y en a plus venant d'eux. Ils viennent de publier Recursive sur recursive.design, qui est une nouvelle police fantastique de Stephen Nixon. La variable Plex, une disponible, est open source. Ensuite, il y en a des tonnes commerciales.

Jason: Ce qui est cool à ce sujet, c'est que Monotype en a sorti de très gros. Mais ce sont de nombreuses fonderies plus petites et des designers individuels qui ouvrent la voie à l'expérimentation de ce format. Je pense que c'est vraiment génial pour le design et génial pour le Web que nous voyons tous ces nouveaux designs de nouveaux designers ou de plus petits designers qui sont en train de percer ce nouveau terrain. Parce que j'aime les voir réussir avec ça parce qu'ils ont vraiment pris l'initiative de mettre quelque chose de génial là-bas.

Drew: Assiste-t-on à une mise à jour des polices existantes pour en faire des polices variables faire remplacer les familles par une police à variable unique? Est-ce que cela se produit du tout?

Jason: Oui. Celles que Monotype a publiées sont des mises à jour de certaines polices très classiques. FF Meta a été 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 types de polices de marque classiques. Ils travaillent sur plus. Je sais qu'ils en ont au moins une demi-douzaine de plus qui sont à différents stades de production. Je sais que Dalton Maag, qui fait une tonne de polices de caractères personnalisées pour les grandes sociétés, possède plusieurs polices de caractères variables vraiment agréables. J'ai fait du travail avec TypeTogether. Ils ont également plusieurs très belles polices de caractères. Je connais celui-là…

Jason: J'ai montré à certaines des conférences où j'ai parlé de ces choses qu'Adidas a aussi les leurs qu'ils utilisent pour toute leur marque travaille sur papier depuis près de deux ans maintenant. Ce qui est vraiment, vraiment remarquable. Mais Mark Simonson travaille également 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. Ça se passe en morceaux et morceaux 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 obtiendra une police variable presque tous les mois. Je veux dire, il a été vraiment incroyable sur ce qu'il a sorti. C'est comme 72 $ pour l'année ou quelque chose comme ça. Il a sorti toutes sortes de trucs vraiment magnifiques.

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 où quelqu'un pourrait revenir en arrière, les revoir et remplacer plusieurs fichiers de polices par une nouvelle implémentation basée sur une nouvelle version de police variable.

Jason: Oui, absolument. Voilà certaines 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 cherché, et bien sûr, pour deux des polices de caractères qu'ils utilisent, il existe des polices variables. Un peu de recherche nous a montré que nous pouvions remplacer quatre instances d'une police et trois de l'autre par deux fichiers de polices variables et supprimer plus de 70% de la taille du fichier en cinq requêtes. Je veux dire, ce serait une question de gagner du point de vue de la performance. Pour un site à très grande échelle, lorsque vous envisagez de supprimer près de 300 Ko de téléchargement de données sur des millions d'utilisateurs, cela représente en fait des économies réelles 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 une victoire importante pour eux en termes de performances, de temps de rendu de page, puis de coûts réels de bande passante pour eux.

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

Jason: C'est possible. Je pense que l'exemple parfait de cela est quelque chose que Google a laissé passer négligemment à 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é à surfer sur des sites Web qui utilisaient suffisamment d'instances où cela apporterait un avantage significatif. Ils ne l'ont dit à personne. Ils n'ont rien dit aux propriétaires du site. Personne ne devait rien faire. Parce qu'il avait la bonne cartographie de l'axe de poids afin que les valeurs par défaut fonctionnent tout simplement. 150 millions de fois par jour, c'est beaucoup de polices. Cela commence à leur donner une meilleure idée de ce à quoi ressemblerait ce paysage pour eux s'ils pouvaient commencer à changer les cinq meilleures polices Web qu'ils servent? Je suppose que Open Sans en fait probablement partie. Je sais que Lato est probablement là, Roboto.

Jason: Donc, si vous les regardez et regardez à quoi pourraient ressembler ces versions optimisées, vous pouvez voir qu'il y a des raisons très claires pourquoi Google serait intéressé par cela. Ensuite, si vous regardez de l'autre côté, juste l'espace de conception et combien plus fidèle à une voix de marque qu'une entreprise pourrait être si elle travaille avec toute la gamme de sa propre police de marque plutôt que d'avoir à en changer différentes ou à être plus limité dans leur 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 de typographie courageux et excitant et à des possibilités de faire du texte dans une sorte de sensibilité plus et de manière potentiellement plus créative sur le Web que ce que nous avons pu 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. Que se passe-t-il alors? 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 revient vraiment à savoir si nous avons une meilleure police et une meilleure façon de la servir, alors tous ces problèmes deviennent beaucoup moins importants. Donc, avoir cela en place, alors nous devenons beaucoup plus expressifs. Nous pouvons vraiment essayer de pousser la fin de la conception de cela et essayer d'être un peu plus créatif.

Drew: Parce que vous avez écrit récemment en quelque sorte pour exprimer le sentiment que peut-être le Web a dérivé vers un un piège de la conception d'un modèle d'article par site, peut-être avec quelques variantes pour quelques types de contenu différents. Mais tout le monde dérive vers ce style medium.com de colonne unique de texte 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 dites, c'était une copie assez bien composée. Il a une belle zone. Ce n'était pas bondé. Ce n'était pas à l'étroit et les barres latérales et toutes ces autres choses. Il y aura toujours des questions de modèle d’entreprise et ce qui soutiendra cela. C’est pourquoi une très belle refonte, je pense, du Seattle Times que Mike Monteiro pour Mule Design a réalisée il y a quelques années. Absolument magnifique jusqu'à son lancement. Ensuite, ils avaient ces énormes bannières de chaque côté de la colonne et cela a juste emporté tout cet espace. C'était vraiment dommage.

Jason: Je comprends que les entreprises doivent gagner de l'argent. Il y a des ramifications à cela. Il serait donc merveilleux d'avoir cette option. Pour avoir cette belle mise en page propre. Mais ce 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 une grille. Mais le fait que nous puissions faire des calculs dans le navigateur en CSS nous permet de faire des choses beaucoup plus intéressantes. Vous ajoutez à 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, sept ou huit. Si vous regardez vraiment comment ils présentent ces choses, il y a une énorme variabilité, mais cela joue dans un système.

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

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

Jason: Eh bien, je pense que c'est possible. Je pense que nous avons eu cette longue évolution sur le Web vers une meilleure convivialité. Mais je pense que l’une des victimes est celle où tout ce qui nous préoccupe, c’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 eu 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 affichages se sont améliorés. Les empattements sont donc revenus dans le mélange. Nous pourrions les utiliser à nouveau sur le Web. Ces choses ont ajouté de la vie. Ensuite, nous avons en quelque sorte optimisé le retour à tout le monde en utilisant un ou deux empattements San. C'est Open Sans ou Roboto ou Oswald ou autre. Nous sommes un peu de retour à 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 concepteurs UX qui sont souvent ceux qui conduisent beaucoup de tout cela sur la typographie. Tout ce qui concerne son expression, son impact sur l'humeur et le ton.

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

Drew: Especially when we talk about personality and about tone and mood. From a business point of view or from what we’re talking about is aspects of a brand. So in making everything look the same, are we losing the ability to communicate a brand to customers?

Jason:Absolutely. Not to dive into politics, but I think the whole… One of the major issues that we certainly experienced in the US, and I’m sure it’s not that different from what happened in the UK over the last few years. When all the news is consumed through a single platform, and everything looks the same, there’s no distinction of voice. So it’s something like 75% of adults in the US say that they get a significant portion of their news from Facebook. I mean, let’s set aside just how generally horrifying that is. But given that everything is presented uniformly, there’s no difference between an article from The Guardian, to New York Times, The Wall Street Journal, The Washington Post, and Joe’s right wing news. It’s all presented exactly the same.

Jason:When we see that logo, that type style, the Guardian is so characteristic. The Wall Street Journal is so characteristic. We recognize instantly when we see it, even just a headline. We know where that came from. Then there’s this automatic association with that brand and that authenticity. When you strip all of that away, you’re left with, “Okay, I’m going to evaluate this on a headline. Then it’s on, who wrote a better headline? That’s not a lot to go on. So I think that we have lost a tremendous amount. If you look at what Apple News Plus is trying to do, there are some efforts on a part of a few companies to try and reintroduce that. Blundell did a really interesting job of that in Europe. They launched in the US, but I’m not really sure they’re ever really that successful. 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.

(dm, ra, il)