Le Web universel

1.1 Style de caractères

Pourquoi 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

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

L'édition de 2005 de ces recommandations donnait ici son instruction la plus abrupte : l'écran est un environnement de lecture hostile, utilisez donc des polices sans empattement. Les empattements, avertissait-elle, se transforment en bruit visuel aux tailles de labeur ; les traits fins et les nuances ne se rendent pas. Pour les écrans de cette époque, le conseil était fondé. Pour ceux d'aujourd'hui, il doit être retiré en tant que règle et remplacé par le raisonnement qui l'a toujours sous-tendu.

Ce qui a changé depuis 2005

La recommandation originale n'a jamais vraiment porté sur les empattements. Elle portait sur les pixels. Sur une dalle à 96 DPI, un empattement de deux ou trois pixels physiques soit s'accrochait à la grille comme un pavé maladroit, soit se dissolvait en brouillard anticrénelé. Les traits fins se brisaient ; les courbes à congés devenaient des marches d'escalier. Les linéales dessinées pour l'écran — Verdana, Tahoma et leurs semblables, tracées avec des traits monolinéaires robustes et une chasse généreuse — contournaient tout cela. Les recommander était du design défensif face à un moteur de rendu incapable de dessiner un empattement.

Cette contrainte s'est largement dissoute. Les écrans à haute densité rendent deux à trois pixels physiques par pixel CSS, assez pour dessiner des empattements fins, une modulation des pleins et des déliés et des jonctions subtiles avec une fidélité proche de l'imprimé. L'anticrénelage moderne en niveaux de gris à ces densités traite proprement les courbes et les diagonales. Sur de tels écrans, un bon caractère de labeur à empattements et une bonne linéale composés à la même taille effective sont tous deux pleinement lisibles, et la recherche générale sur la lecture le reflète : lorsque la hauteur d'x, la taille et l'espacement sont contrôlés, les différences mesurées de vitesse de lecture et de compréhension entre styles avec et sans empattement sont faibles et inconstantes. La variable empattement/linéale, isolée de tout ce qui l'accompagnait autrefois, n'explique pas grand-chose.

Deux réserves empêchent de simplement inverser l'ancienne règle. Premièrement, les moniteurs à densité standard restent courants sur les bureaux, et sur eux les empattements délicats se dégradent toujours — tout caractère choisi pour le texte courant doit être vérifié en rendu 1x, où la qualité du hinting et la robustesse du trait continuent de faire leurs preuves. Deuxièmement, et c'est plus important pour ce projet, le cas de la basse vision n'est pas le cas moyen.

Ce qui prédit réellement la lisibilité

Si la classification stylistique est disqualifiée comme critère de sélection, ce qui la remplace est une courte liste de contrôle structurelle — la même que celle introduite au chapitre 1.0, appliquée ici au choix entre caractères candidats.

La hauteur d'x d'abord. Un caractère à grande hauteur d'x paraît plus grand et survit mieux aux petites tailles que sa taille nominale ne le suggère, qu'il porte ou non des empattements. Beaucoup de caractères de labeur à empattements contemporains sont dessinés avec des hauteurs d'x aussi généreuses que n'importe quelle linéale d'écran.

Les ouvertures ensuite. Des contrepoinçons ouverts et des ouvertures dégagées dans le a, le c, le e et le s préservent l'identité des lettres sous le flou et la faible acuité. Cela transcende la classification : il existe des caractères à empattements ouverts et lisibles, et des linéales fermées et ambiguës. Le genre des linéales géométriques — très en vogue — est un contrevenant fréquent, avec des formes de lettres quasi circulaires qui convergent les unes vers les autres.

La distinction des lettres en troisième. Faites le test Il1 : composez ensemble le I capital, le l bas de casse et le chiffre 1. Beaucoup de linéales populaires y échouent d'emblée, rendant I et l comme des traits identiques — un danger réel dans les mots de passe, les codes et les noms. Les caractères à empattements, ironiquement, tendent à réussir automatiquement, car les empattements différencient précisément ces lettres. Vérifiez aussi les miroirs b/d et p/q, ainsi que la paire r n, qui peut fusionner en m lorsqu'elle est serrée.

La qualité de rendu enfin. Un caractère de labeur destiné aux interfaces doit être testé là où il vivra : aux tailles cibles, sur écrans haute densité comme à densité standard, en modes clair et sombre. Les polices varient dans le soin apporté à la production de leurs fichiers — hinting pour la rastérisation à basse densité, espacement aux petites tailles — et cette dimension artisanale compte davantage que la présence ou l'absence d'empattements.

Les lettres aegs composées dans un caractère à empattements et dans une linéale, à peu près égales en lisibilité aux tailles de labeur — les vrais prédicteurs sont la hauteur d'x, les ouvertures, des lettres distinctes et l'espacement.

La nuance de la basse vision

Pour les lecteurs malvoyants, la précaution de 2005 conserve une force réelle, sous forme adoucie. La faible acuité agit comme un filtre de flou, et sous le flou, le détail fin est la première victime. Les dessins à empattements très contrastés — ceux aux déliés filiformes et aux empattements délicats — perdent leurs traits fins et, avec eux, la structure de la lettre. Un caractère robuste et peu contrasté se dégrade plus gracieusement, et la plupart des caractères répondant à cette description sont des linéales ou des dessins proches des mécanes. Ainsi, si la règle catégorique a disparu, le centre de gravité pratique pour le texte courant destiné à la basse vision reste un caractère robuste, ouvert, uniformément pondéré — qui sera souvent, mais pas nécessairement, une linéale.

L'avertissement de 2005 contre les polices ornementales et très stylisées pour le texte continu tient sans révision. Les caractères décoratifs sacrifient la structure des lettres au style, et les lecteurs disposant de la plus faible marge visuelle en paient le prix le plus élevé. L'usage en titrage aux grandes tailles est un contexte différent, plus indulgent.

Une note moderne supplémentaire : les affirmations selon lesquelles certains styles seraient universellement meilleurs pour les lecteurs dyslexiques doivent être accueillies avec prudence. Les polices spécialisées n'ont pas démontré d'avantages objectifs constants dans les études contrôlées ; les caractéristiques qui aident réellement — distinction des lettres, espacement généreux, taille suffisante — sont disponibles dans de nombreux caractères bien dessinés de toute classification, et des réglages ajustables par l'utilisateur aident davantage que n'importe quel choix de police unique.

En CSS

/* Screen for structure, not classification */
body {
  /* Georgia: large x-height, open apertures, screen-hinted */
  font-family: Georgia, Charter, "Bitstream Charter", serif;
}
.ui {
  font-family: system-ui, sans-serif;  /* the platform's proven face */
}

Recommandations

  • Retirer la règle « linéale uniquement » ; évaluer les caractères candidats de façon structurelle à la place.
  • Exiger une grande hauteur d'x, des ouvertures dégagées et un contraste de trait régulier et modéré pour le texte courant.
  • Appliquer les tests Il1 et b/d/p/q ; rejeter les caractères dont les lettres convergent.
  • Pour les contextes critiques en basse vision, éviter les dessins très contrastés aux déliés filiformes ; privilégier les constructions robustes et peu contrastées.
  • Vérifier le rendu aux tailles réelles sur écrans à densité standard comme sur écrans haute densité, en modes clair et sombre.
  • Continuer d'exclure les caractères ornementaux et très stylisés du texte continu.

Pour aller plus loin