De la vraie typographie pour le Web
Par Tim Brown
Maintenant que les navigateurs supportent l’inclusion de fontes dans les feuilles de style, et que des licences permettent d’utiliser ces jeux de caractères, il est temps de dépasser toute l'excitation autour des caractères du web pour réfléchir de façon pragmatique à la façon d'utiliser de véritables polices dans nos projets web. Après de nombreuses expériences avec la propriété @font-face, y compris un travail préliminaire avec le très attendu Typekit, j'en suis arrivé à une seule conclusion : je dois absolument connaître le rendu de ma police à l'écran, tel que les navigateurs l'interprètent. À cette fin, j'ai créé Web Font Specimen, une ressource web pratique et gratuite que les designers et typographes peuvent utiliser pour vérifier le rendu de leurs caractères sur Internet.
Il n'y a rien de nouveau dans le fait d'exploiter des exemples associant balises et styles pour effectuer des tests. Vous avez sûrement dans vos marque-pages une ressource vers laquelle vous tourner, que ce soit les exemples d'éléments HTML du W3C, ou autre méthode faite maison. Web Font Specimen ressemble beaucoup à ces fichiers d'exemples qu'on trouve ou qu'on fabrique, à deux importantes différences près : son seul objectif est de mettre en œuvre un jeu de caractères, et c'est à nous de le diffuser.
Web Font Specimen est disponible sous licence Creative Commons Attribution 3.0. Je lirai avec plaisir vos propositions de réglages, développements et améliorations. Nous y reviendrons quand nous parlerons de vente et d'achat de jeux de caractères.
Voyons rapidement à quoi ressemble Web Font Specimen et comment l'utiliser. Ensuite, nous discuterons des différentes façons d'analyser le rendu de la typographie du web, et nous verrons comment cette approche peut influencer les vendeurs, les concepteurs de fontes et les designers web.
Web Font Specimen
Rendez-vous sur le site de Web Font Specimen, téléchargez le dossier zippé, et ouvrez le fichier HTML dans un navigateur. Vous devriez voir quelque chose qui ressemble à cet exemple. Le rendu sera variable selon votre installation, mais le spécimen d'exemple devrait très bien passer (c'est la bonne vieille fonte Georgia, que la plupart d'entre vous a probablement déjà installé, et qui a été créée spécialement pour un bon rendu à l'écran).
En faisant défiler la page, vous verrez Georgia appliquée à des titres, des listes, et avec différentes variations. Il y a une comparaison des tailles de caractères, différents interlignages, une galerie de glyphes, différentes mesures (en largeur), différentes tailles avec des haut-de-casse ou des majuscules de début de phrase, du texte en niveau de gris, du texte clair sur fond sombre, ainsi qu'un assortiment de combinaisons de couleurs. Les raisons pour lesquelles nous avons intégré chacun de ces spécimens sont indiquées à côté d'une saisie d'écran commentée sur le site.
Fig.1 : Glyphes à 42px
Fig.2 : Titres, listes, emphase, graissage
Fig.3 : Niveaux de gris et couleurs, clair sur sombre
On teste !
Ensuite, vous allez remplacer Georgia par la fonte que vous voulez tester. Lisez le fichier README que vous avez téléchargé pour recevoir les instructions. Pour davantage d'information, lisez mes deux articles sur Nice Web Type : “Where to get web fonts” et “How to use CSS @font-face.”
Vous noterez que Web Font Specimen est construit à partir de 960.gs de Nathan Smith, ce qui constitue une excellente ressource pour des mises en page rapides. Tout comme je l'ai fait pour les chroniques des coups de cœur de Nice Web Type, le fichier text.css qui est proposé par 960.gs a été remplacé par un autre qui est mieux adapté à nos besoins.
Tout ce qu'il vous reste à faire est de tester le résultat, pour voir si le rendu de votre police est effectivement acceptable sur les différents navigateurs et systèmes d'exploitation.
Les conséquences pour les designers de fontes
Une des données importantes dans la mutation du secteur de la vente de fontes est que les vendeurs se retrouvent devant un immense marché pour leurs biens et services. Bien sûr, nous autres designers web avons toujours utilisé des fontes pour nos sites : les techniques de remplacement d'images, les images avec du texte alternatif, les polices pilotées par les CSS ont laissé libre cours à d'incroyables expériences typographiques (celles-ci, et beaucoup d'autres sont présentées sur Typesites). Néanmoins, nous travaillons rarement avec les fontes de la façon dont les imprimeurs travaillent ordinairement, parce que notre approche de la typographie pour le web a généralement plus à voir avec les moyens qu'avec la fin.
Fini de rire
Depuis des années, les designers web rêvent de mettre en œuvre les fonctions les plus esthétiques et traditionnelles de la typographie, tout en intégrant les données connues sur la qualité du balisage et de l'accessibilité. Mais nous nous heurtons à des barrières techniques pour intégrer nos fontes à des sites Internet, ce qui nous empêche d'avoir des attentes raisonnables quant à l'apparence des polices web.
On a consacré tant d'énergie à chercher comment intégrer les fontes sur nos sites que nous n'avons pas eu l'occasion de bien comprendre pourquoi elles ont finalement cet aspect-là une fois placées. Par conséquent, le rendu des polices web est largement demeuré un mystère. Plutôt que d'essayer de résoudre le problème, nous avons tout simplement traité la typographie comme un art mineur (avec quelques exceptions remarquables), et nos grognements de frustration résonnent encore ici et là.
On veut de la vraie typo
Tandis que les designers web travaillent à dépasser le complexe d'infériorité sur le thème de « l'impression-c'est-mieux-que-le-web », les vendeurs de fontes savent très bien qu'une masse de nouveaux clients vont s'attendre à un service de qualité quand il s'agit de voir en ligne, d'expérimenter ou d'utiliser des polices. Web Font Specimen est idéal quand les fontes que l'on veut tester sont en notre possession. Mais quand ces fontes sont protégées par des fournisseurs de catalogues de fontes en ligne, ou bien cachées dans un panier d'achat en ligne chez un vendeur de fontes, comment fait-on pour juger si elles conviennent pour être exploitées dans nos projets web ?
Les vendeurs de fontes doivent fournir un moyen de montrer la fonte dont ils vendent le droit d'usage avec la propriété CSS @font-face, dans le contexte qui a été prévu pour elle. Ils sont tout à fait autorisés (ils y sont même cordialement et légalement invités) à utiliser Web Font Specimen comme base pour fournir un service d'essai avant l'achat. J'espère qu'ils le feront, non seulement pour répondre à nos besoins de savoir à quoi ressembleront les polices sur le web, mais aussi parce que leurs modifications, évolutions et améliorations de fontes ne feront qu'améliorer Web Font Specimen. Les designers web seront là pour voir comment les pros de la typographie estiment que telle fonte devrait être utilisée, et nous affinerons nos spécimens dans la boîte à outils pour profiter de leur avis ; à moins qu'ils ne l'aient déjà fait à notre place en sortant une version améliorée de Web Font Specimen.
Conséquences pour les créateurs de fontes
Si les vendeurs de fontes ne parviennent pas ou renâclent à trouver des moyens de montrer leurs fontes en contexte sur le web, les designers de polices ne pourront pas faire connaître toutes les nuances des fontes sur lesquelles ils ont tant travaillé. Un défi considérable sera de répondre aux demandes des designers web en termes de rendu typographique. Il y a tout un millefeuille de complexité entre les superbes lettres que les designers de fontes dessinent et la typo que nous voyons tous sur les sites web, et cette complexité est mal documentée et pleine de variables.
Des glyphes à la typo web
En travaillant à partir de plusieurs fils de discussions sur Typophile avec des personnes très au fait du sujet, j'ai tenté de retracer le parcours du combattant qu'une fonte doit traverser depuis les points et courbes mathématiques des designers de fontes jusqu'aux formes de Web Font Specimen, faites de points lumineux alignés sur des grilles. Voici ma liste de points d'étape, qui a été améliorée par de nombreuses suggestions et finalement approuvée par David Berlow comme étant « pas trop mal dans l'ensemble. »
- Un glyphe est au départ une forme déterminée par des courbes de Béziers.
- Cette forme est fabriquée ou importée dans un programme de création de fontes tel que FontLab.
- Les caractéristiques telles que l'UPM (unités par em), les dimensions-clés (pour les mesures verticales comme la hauteur d'x, la hauteur de capitale, les ascendantes et descendantes), ainsi que les données métriques (pour les mesures horizontales comme la chasse ou les approches) vont déterminer comment la lettre va se comporter en tant que glyphe dans une fonte, c'est-à-dire quel espace elle occupera pour une taille donnée, et quel écartement la séparera des autres lettres.
- Des instructions sont ajoutées (automatiquement et/ou manuellement), qui peuvent fournir des indications afin de préserver l'esprit du dessin original de la fonte dans des environnements où le produit à fournir est loin d'être idéal.
- Le glyphe est exporté en tant qu'élément d'une fonte, soit en format OTF, soit en TTF (je laisse ici de côté les autres formats : mais dites-moi si vous pensez que c'est une erreur). Les indications pour le TrueType sont ignorées si la fonte est une OTF.
- Le glyphe est soumis à des algorithmes de rendu selon les différents systèmes d'exploitation et les différents navigateurs. Je suis toujours en train d'essayer de dresser une liste de ces combinaisons. Je voudrais parvenir à croiser des techniques comme Quartz et ClearType avec des entrées telles que : moteur de rendu par système d'exploitation, par navigateur, et résultat de la combinaison (les écrasements, ou bien les données de fontes qui sont ignorées).
- Les réglages individuels des utilisateurs (préférences du navigateur ou du système d'exploitation) peuvent modifier la façon et le moment où les moteurs de rendu interagissent avec les dossiers de fontes. Les utilisateurs de Windows peuvent activer ou non le ClearType. Certains utilisateurs peuvent carrément désactiver le lissage de police. Certaines préférences peuvent limiter la taille à laquelle le lissage peut s'appliquer. Dresser la liste de ces variables constitue un élément de plus sur ma liste de choses à faire.
- Enfin, il y a les qualités physiques du matériel des utilisateurs, comme le type de moniteur dont ils disposent, sa résolution, le fait qu'ils l'utilisent dans sa résolution native ou non, et leurs réglages de couleur et de luminosité.
Les points quatre à six sont importants et ne doivent pas être négligés. Ces facteurs peuvent constituer un fléau pour les designers web, surtout pour les petits indépendants. Aux yeux d'une clientèle nouvelle et qui ne jugera la qualité d'un jeu de caractères que par son rendu sur écran, il est essentiel de savoir ce que ce jeu va donner à travers différents systèmes d'exploitation et navigateurs.
Sans rentrer dans les détails techniques (on verra cela dans le forum de discussion), disons qu'en général les combinaisons possibles d'algorithmes de rendu mènent à deux conclusions : 1) le moteur de rendu ignore les instructions des designers de typo et fait à sa guise, en se rapprochant au mieux du design de la police et avec un résultat généralement correct (c'est le cas d'Apple) ; ou alors 2) le moteur de rendu suit les instructions complexes des designers de typo, tente d'utiliser cette information pour parvenir à une lisibilité idéale, mais le résultat n'est bon que si la police a été dessinée et annotée pour parvenir à ces fins (c'est le cas de Microsoft).
Que peuvent faire les designers de fontes ? À mon avis, trois choses. Ils peuvent concevoir leurs fontes afin que le rendu soit bon sur différents systèmes (malgré la difficulté et le temps que cela représente), ou bien ils peuvent mener campagne pour parvenir à des normes de rendu typographiques, ou encore ils peuvent faire faillite. Toutes ces options sont très mauvaises.
En revanche, si les designers se dirigent vers une sorte de projet de normalisation du rendu typographique, je ne doute pas qu'ils auront des soutiens compétents et passionnés de ce côté-ci du comptoir.
Conséquences pour les designers web
Nous avons déjà évoqué quelques rôles pouvant être tenus par les designers web. Nous devons dépasser le complexe de subordination de la typographie web, en établissant des attentes réalistes pour son rendu à l'écran, et (si les designers de fontes le jugent bon) nous pourrions finir par obtenir des changements dans ce domaine pour lesquels des normes seraient fort utiles.
Mais en attendant, il nous faut s'assurer dès aujourd'hui que les polices ont bel aspect dans nos sites.
Si nous passons notre fonte préférée dans notre programme Web Font Specimen, que nous le testons dans plusieurs navigateurs et sommes satisfaits du résultat, alors tout va bien ! Nous avons trouvé la fonte que nous allons utiliser. Oui, mais si nous ne sommes pas satisfaits ? Qu'est-ce qu'on fait ? Quelles solutions trouver ?
Si votre fonte a mauvaise mine
Si nous (et nos visiteurs) avons de la chance, peut-être pourrons-nous trouver une fonte différente, qui pour le coup rendra bien à l'écran. Malgré certaines perspectives sombres pour le design typo dans un marché émergeant, il existe déjà des fontes dont le rendu est très bon dans différentes situations, et d'autres vont suivre. En effet, si beaucoup de designers seront désavantagés faute d’expérience et de ressources pour améliorer leur production avec des instructions détaillées, d’autres vont prospérer.
C'est vrai qu'il est souvent décevant de devoir choisir une police différente de celle qu'on souhaitait, mais parfois cela peut même être catastrophique. Si votre projet se base entièrement sur l'utilisation d'une police particulière, comme lorsqu'il s'agit de suivre un cahier des charges associé à une marque, on risque encore de devoir recourir à des hacks de substitution.
En attendant que les choses évoluent sur la quantité de fontes inter-opérables sur les systèmes d'exploitation et les navigateurs (que le changement provienne des agents de rendu qui vont accepter une forme de standard ou une autre, ou bien d'une sélection accrue de fontes aux instructions détaillées), voici les choix réalistes que nombre d'entre nous auront à faire quand nous voudrons utiliser de vraies fontes avec @font-face :
- utiliser une quelconque forme de logique conditionnelle pour fournir différentes fontes à différents visiteurs,
- laisser notre fonte avoir un rendu peu satisfaisant pour certains visiteurs, ou encore
- continuer à utiliser des techniques de substitution.
Rien ne vaut un bon spécimen
Pour évoluer, le mieux que nous avons à faire consiste à avoir de solides arguments à avancer, et pour cela il faut d'abord bien comprendre les défis auxquels nous sommes confrontés. Pour voir le rendu d’une fonte sur le web, il suffit d’un bon spécimen. J'espère que cet article et Web Font Specimen pourront faciliter et alléger votre travail, que vous y trouverez quelque chose d'utile et que vous pourrez exploiter dans notre intérêt commun : celui de l'amélioration du style et de la pratique typographique.
http://www.alistapart.com/articles/real-web-type-in-real-web-context/