Version 2.0 — Revue et augmentée, 2026

Le Web universel.

Principes typographiques pour l'accessibilité du texte à l'écran. Entrepris à la Rhode Island School of Design avec le soutien de la Markle Foundation, et révisé ici pour le web moderne : écrans haute densité, polices variables, WCAG 2.2 et deux décennies de nouvelles recherches sur la lisibilité.

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

Sommaire

  1. 01IntroductionUne révision, vingt ans après, des recommandations Universal Web : les constats d'accessibilité typographique de 2005 remis à l'épreuve des écrans haute densité, des polices variables, de WCAG 2.2 et du web responsive moderne.6 min read
  2. 021.0 La lettreLes facteurs de conception qui gouvernent la lisibilité des lettres à l'écran — style, graisse, inclinaison, largeur et espacement — mis à jour pour le rendu haute densité, la recherche sur les ouvertures et les axes des polices variables.7 min read
  3. 031.1 Style de caractèresPourquoi la règle de 2005 « utilisez une linéale à l'écran » ne tient plus sur les écrans haute résolution — et ce qu'il faut évaluer à la place : hauteur d'x, ouvertures, distinction des lettres et qualité de rendu.7 min read
  4. 041.2 Taille des caractèresD'un minimum fixe de 14 points à un système résilient : 16px comme plancher du texte courant, un dimensionnement en rem qui honore les préférences de l'utilisateur, les exigences de redimensionnement de WCAG 1.4.4, et la mise à l'échelle fluide avec clamp().7 min read
  5. 051.3 Graisse des caractèresLa règle du romain au demi-gras, reconstruite pour 2026 : axes de graisse variables et continus, compensation de graisse en mode sombre grâce aux grades, le problème de la mode des graisses fines, et l'interaction entre graisse et contraste WCAG.7 min read
  6. 061.4 Inclinaison des caractèresLes lettres romaines droites restent le bon choix pour le texte continu ; l'italique a sa place dans de courts passages d'emphase, et les vrais italiques l'emportent à tous les coups sur les obliques synthétiques.7 min read
  7. 071.5 Chasse des caractèresLes chasses normales à légèrement étroites restent les plus lisibles ; l'axe variable wdth fait désormais de la chasse un outil de design responsive, à condition de ne jamais la simuler par une mise à l'échelle horizontale.7 min read
  8. 081.6 Polices sélectionnéesChoisir 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
  9. 092.0 Le motLa lisibilité au niveau du mot pour la lecture à l'écran — casse, espacement, mesure, hiérarchie et écriture claire — fondée sur la compréhension moderne de la façon dont les yeux et l'esprit lisent réellement.8 min read
  10. 102.1 La casseLa casse de phrase reste le bon choix pour le texte continu — mais l'explication par la silhouette des mots est morte ; les lecteurs reconnaissent les lettres en parallèle, et le tout-capitales se lit plus lentement pour des raisons de pratique et de similarité des lettres, non de silhouette.8 min read
  11. 112.2 Crénage et espacement des motsComment le crénage et l'espacement des mots façonnent la lecture à l'écran, pourquoi le texte justifié échoue toujours sans césure, et ce que WCAG 1.4.12 exige de vos décisions d'espacement.7 min read
  12. 122.3 L'approcheL'approche dépend du corps : elle aide les petites capitales et les étiquettes, nuit généralement au texte courant, et doit tolérer les réglages utilisateur que garantit WCAG 1.4.12.7 min read
  13. 132.4 L'interlignageL'interlignage pour la lecture à l'écran : la valeur CSS line-height sans unité, l'exigence WCAG 1.4.12 de tolérer 1,5, et pourquoi la bonne valeur dépend de la longueur de ligne.7 min read
  14. 142.5 La longueur de ligneLa mesure de 55–65 caractères tient toujours vingt ans plus tard, désormais exprimable directement en CSS avec l'unité ch et bornée par la recommandation WCAG des 80 caractères et l'exigence de redistribution à 320 px.7 min read
  15. 152.6 Hiérarchies typographiquesLa hiérarchie typographique en 2026 : des échelles modulaires et fluides avec clamp(), la sémantique structurelle des titres exigée par WCAG 1.3.1, et une hiérarchie construite sur la graisse et l'espace plutôt que sur la seule taille.8 min read
  16. 163.0 Couleur et contrasteComment fonctionnent les rapports de contraste, où les calculs de WCAG 2.x montrent leurs limites, et pourquoi davantage de contraste n'est pas toujours préférable pour tous les lecteurs.7 min read
  17. 173.1 Mode sombre et surfaces de lectureCe que la recherche sur la polarité d'affichage dit des surfaces de lecture claires et sombres, à qui chacune s'adresse, et comment construire un thème sombre qui reste lisible.7 min read
  18. 183.2 Les polices variablesComment les polices variables font de la graisse, de la largeur et de la taille optique des instruments continus au service de la lisibilité, de la performance et de la personnalisation par le lecteur.7 min read
  19. 193.3 Typographie fluide et responsiveComment les échelles typographiques fluides, les container queries et les contrôles textuels du CSS moderne peuvent servir tous les écrans sans passer outre les réglages propres du lecteur.7 min read
  20. 203.4 Mouvement et lecturePourquoi un texte en mouvement est un texte illisible, comment l'animation peut nuire physiquement aux lecteurs sensibles sur le plan vestibulaire, et à quoi ressemble un mouvement respectueux.8 min read
  21. 213.5 Lecture et cognitionL'accessibilité cognitive du texte : le langage clair, l'état honnête des preuves sur les polices pour dyslexiques, et la personnalisation comme véritable frontière.8 min read