Le Web universel

1.6 Polices sélectionnées

Choisir les polices de caractères selon des critères de lisibilité mesurables — hauteur d'x, ouvertures, distinction des caractères, espacement — plutôt que par leur nom, et accueillir avec un scepticisme éclairé les arguments marketing des « polices accessibles ».

7 min read

Cette page a été traduite avec l'aide d'une IA. L'original en anglais fait foi.

L'édition 2005 de ce chapitre faisait ce que faisait tout guide de son époque : elle citait des noms. Verdana, Georgia et leur cohorte — les polices web fondamentales de Microsoft, commandées pour l'écran — étaient les recommandations défendables à une époque où les designers ne pouvaient compter que sur les polices préinstallées sur les machines des utilisateurs. Vingt ans plus tard, la contrainte a disparu. Les polices web se chargent de manière fiable, les polices variables sont devenues courantes, et le catalogue des caractères disponibles est passé d'une douzaine à des dizaines de milliers. Dresser une courte liste n'est plus utile. Enseigner les critères l'est.

Ce basculement est aussi plus honnête. L'ancienne liste était bonne non parce que ces polices étaient magiques, mais parce qu'elles incarnaient des propriétés précises et vérifiables : hauteurs d'x généreuses, ouvertures larges, chasse ample, et des dessins de lettres conçus pour survivre à un rendu grossier. Ces propriétés — pour l'essentiel les critères de l'ère Boyarski que citait le chapitre original — demeurent le bon test, et elles peuvent être appliquées à n'importe quelle police candidate en quelques minutes.

Ce qui a changé depuis 2005

Trois choses. D'abord, le problème de la diffusion s'est dissous : @font-face et la compression WOFF2 ont banalisé la livraison d'une police choisie, si bien que « polices d'écran par défaut » et « polices embarquées » ne sont plus des catégories réellement distinctes, et l'anxiété liée aux licences que signalait le chapitre original a été largement absorbée par les normes de licence web et la typographie open source.

Ensuite, un genre de « polices accessibles » conçues à dessein a émergé. Certaines sont des efforts sérieux : Atkinson Hyperlegible, commandée par le Braille Institute, exagère les distinctions entre caractères couramment confondus pour les lecteurs malvoyants. Lexend a été dessinée autour de l'hypothèse qu'un espacement plus large et des proportions spécifiques améliorent la fluidité de lecture. APHont a été développée par l'American Printing House for the Blind pour l'impression et l'écran à destination des malvoyants. Luciole a été conçue en France spécifiquement pour les lecteurs déficients visuels. Ce sont de vrais projets menés par des gens qui ont étudié le problème.

Enfin — et c'est la mise en garde nécessaire — la base de preuves n'a pas suivi le rythme du marketing. Les études indépendantes sur la vitesse de lecture et la compréhension constatent généralement que les différences individuelles entre lecteurs éclipsent les différences entre polices raisonnables, et que la familiarité est en elle-même un facteur de lisibilité. Les affirmations très médiatisées autour des polices spécifiques à la dyslexie, en particulier, ont échoué à se répliquer de façon répétée dans les études contrôlées : les lecteurs dyslexiques n'y lisent généralement pas plus vite dans les polices spécialisées que dans une typographie ordinaire bien espacée, et préfèrent souvent des caractères familiers. « Conçu pour l'accessibilité » est une intention de conception, pas une garantie de résultat. Choisissez sur des propriétés visibles et vérifiables, pas sur l'étiquette.

Les critères qui comptent

La liste de la Version 1 tient remarquablement bien ; la voici, mise à jour et rendue testable.

  • Distinction des caractères. Tapez la chaîne Il1, puis 0O, puis rn à côté de m, puis cl à côté de d. La capitale I, le l bas de casse et le chiffre 1 doivent être distinguables d'un coup d'œil — grâce à des empattements, un l à queue ou un 1 à sommet plat. C'est le critère éliminatoire le plus rapide, et bien des linéales géométriques populaires y échouent.
  • Ouvertures larges. Les ouvertures du a, du c, du e et du s doivent être amples. Des ouvertures fermées font que le e s'effondre vers le o sous l'effet du flou, des petits corps ou d'une basse vision.
  • Hauteur d'x généreuse, dans la limite du raisonnable. Une grande hauteur d'x agrandit la partie de la lettre qui porte l'essentiel de son identité. Les extrêmes se retournent contre elle : quand la hauteur d'x étouffe les ascendantes, h et n commencent à converger, et d et a perdent leur séparation.
  • Chasse confortable. Un espacement légèrement ample aux corps de texte vaut mieux qu'un espacement serré à la mode. Vérifiez aussi que la police tolère les augmentations d'approche appliquées par l'utilisateur (WCAG 1.4.12) sans se déliter.
  • Contraste de trait modéré et jonctions solides. Les didones à fort contraste perdent leurs déliés aux petits corps et aux basses résolutions. Les graisses moyennes, presque monolinéaires, se rendent de manière fiable.
  • Un a à deux étages, un g distinguable, des formes sans ambiguïté. Les lettres doivent différer par leur construction, pas seulement par des nuances. Les paires en miroir (b/d, p/q) gagnent à des détails asymétriques.
  • Un vrai italique et un gras utilisable. Conformément aux chapitres 1.3 et 1.4, il vous faudra des styles d'emphase honnêtes ; une famille qui en est dépourvue impose la synthèse.
Empattement contre sans empattement, soit dit en passant, reste un match nul. Le consensus de la recherche est qu'aucune des deux catégories ne détient d'avantage général de lisibilité sur les écrans modernes ; les propriétés ci-dessus traversent la frontière. Georgia passe la plupart de ces tests ; une linéale humaniste bien dessinée aussi.

Piles système et dividende de familiarité

La pile de polices système moderne — San Francisco sur les plateformes Apple, Segoe UI sur Windows, Roboto sur Android, rendue via font-family: system-ui — mérite un éloge spécifique. Ces caractères ont été conçus pour le rendu de leur plateforme, sont livrés avec des gammes de graisses complètes et de vrais italiques, ne coûtent rien à charger (un gain de performance qui est en soi un gain d'accessibilité sur les connexions lentes), et sont les caractères que les lecteurs voient toute la journée. La familiarité est un capital de lisibilité mesurable. Une pile système n'est jamais le choix excitant, mais pour l'interface applicative et le texte utilitaire, elle est presque inattaquable.

Pour une voix éditoriale, la position honnête est que beaucoup de polices de labeur ordinaires et bien faites — linéales humanistes comme sérifs de texte robustes — satisfont tous les critères ci-dessus. Les polices axées sur l'accessibilité citées plus haut sont aussi des candidates raisonnables, en particulier Atkinson Hyperlegible lorsque les lecteurs malvoyants constituent un public primaire. Ce qui compte, c'est que le choix soit testé contre les critères et contre vos cibles de rendu réelles, à vos corps réels.

Handgloves 123 composé en Georgia, Verdana et Tahoma — les polices système ne coûtent aucun octet, ne provoquent aucun échange de police et sont familières à chaque lecteur.

En CSS

/* Criteria first, then names: distinct Il1/0O, open apertures */
body {
  font-family: "Atkinson Hyperlegible", Seravek, Verdana,
    system-ui, sans-serif;
  font-size-adjust: 0.53;   /* keep fallback x-heights consistent */
}

Recommandations

  • Choisissez selon des critères, pas selon un nom ni un label « accessible » : testez vous-même Il1, 0O, rn/m, l'ouverture des lettres et la chasse.
  • Traitez les polices d'accessibilité spécialisées comme des candidates devant passer les mêmes tests — plusieurs (Atkinson Hyperlegible, Lexend, APHont, Luciole) sont crédibles ; aucune n'est une solution miracle.
  • Soyez sceptique face aux affirmations des polices pour dyslexiques ; les études contrôlées n'ont pas confirmé de gains de vitesse de lecture, et une typographie ordinaire bien espacée fait aussi bien.
  • Empattement ou sans empattement n'est pas la question ; la qualité de construction l'est.
  • Utilisez les piles de polices système en toute confiance pour l'interface et le texte utilitaire — la familiarité et la qualité de rendu sont des avantages réels.
  • Exigez un vrai italique et au moins un gras solide dans toute famille que vous adoptez.
  • Vérifiez que votre choix survit aux ajustements d'espacement du texte des WCAG, au zoom à 200 % et à votre plus petit corps de production avant de vous engager.
  • Retestez quand la police, l'environnement de rendu ou le public change — les critères sont stables, mais la liste des reçus ne l'est pas.

Pour aller plus loin