La checklist de typographie web

Ouvrez une page que vous avez publiée cette année et évaluez-la face aux vingt vérifications ci-dessous. La plupart des pages en échouent cinq ou plus. Un audit typique ressemble à ceci : taille de base 15px, interligne du corps de texte 1,3, lignes de quatre-vingt-dix caractères, trois familles de polices, guillemets droits, onze fichiers de polices. Cela fait six échecs avant même d’atteindre les détails — et pas un seul n’était une décision. C’étaient des valeurs par défaut que personne n’a remplacées.

Une checklist de typographie web est un audit exécutable : vingt vérifications en une ligne réparties en cinq groupes — fondations, lecture, polices, détails, livraison — chacune avec un chiffre concret à vérifier. La typographie échoue rarement à cause d’une seule grosse erreur ; elle échoue par accumulation de petites valeurs par défaut, et une checklist repère ce que le jugement oublie de regarder. Cet article conclut notre guide de typographie en condensant ses règles en une liste que vous pouvez parcourir en vingt minutes.

Une analogie utile vient de l’aviation : les pilotes suivent des checklists non pas parce qu’un élément est difficile, mais parce que la routine rend les éléments triviaux faciles à oublier — et les défaillances qui suivent ressemblent à de la malchance. Chaque vérification ci-dessous est triviale prise isolément. C’est leur somme qui fait le métier.

Les fondations sont-elles en place ?

1. La taille de base est de 16px ou plus. Le corps de texte à 16px et plus — des bases plus petites font que chaque chiffre en aval se bat contre le lecteur.
2. Chaque taille provient d’une échelle. Chaque taille de police égale base × ratioⁿ — aucune valeur orpheline de 15px ou 22px qui ne répond de rien.
3. Les tailles sont en rem, pas en px. Le texte s’adapte quand un lecteur augmente la valeur par défaut de son navigateur ; le px passe outre ce choix en silence.
4. Les interlignes tombent sur une unité de ligne de base. Chaque interligne est un multiple de 4 ou 8px — 16/24, 21/28, 28/36 — pour que le rythme vertical survive à l’empilement.

Le corps de texte est-il confortable à lire ?

5. La longueur de ligne est de 45 à 75 caractères par ligne. Comptez une ligne réelle ; ~66 est le juste milieu confortable souvent cité.
6. L’interligne du corps de texte est d’environ 1,5. 24px sur un texte de 16px ; plus serré convient aux titres, pas aux paragraphes.
7. L’espacement entre paragraphes dépasse l’espacement entre lignes. L’écart entre les paragraphes doit se lire comme nettement plus grand que l’écart entre les lignes.
8. Le contraste du corps de texte est d’au moins 4,5:1. Le chiffre WCAG AA pour le texte de taille normale — mesurez-le, ne l’estimez pas à l’œil.

Les polices tiennent-elles la route ?

9. Deux familles au maximum. Une pour l’affichage, une pour le texte — une troisième exige une raison écrite.
10. Les graisses de la hiérarchie sont espacées de deux crans. 400 face à 600 se lit comme une structure ; 400 face à 500 se lit comme un défaut de rendu à la même taille.
11. Les polices d’affichage n’apparaissent qu’aux tailles d’affichage. Les polices à fort contraste ou décoratives restent au-dessus d’environ 28px, là où leurs détails survivent.
12. Les caractères confondables sont testés. Il1 et rn/m vérifiés à la plus petite taille que vous publiez.

Ouvrez un système qui passe ces trois premiers groupes — une hiérarchie dérivée d’une échelle, avec des interlignes sur une ligne de base de 8px, deux familles et des graisses espacées de deux crans, présentée dans un texte spécimen en direct. C’est l’image de référence : votre audit est un diff par rapport à elle.

Les détails sont-ils réglés ?

13. L’interlettrage suit la taille. Plus serré à l’affichage (−0,01 à −0,02em), nul au corps de texte, plus lâche pour les capitales et les petites étiquettes (+0,02 à +0,08em).
14. Les guillemets sont de vrais guillemets. Des guillemets courbes “ ” et ’ — le ” droit est un vestige de la machine à écrire, pas de la typographie.
15. Pas de faux gras ni de faux italique. Seulement les graisses et les styles que les fichiers embarquent réellement ; les navigateurs simulent le reste en étalant ou en inclinant les contours.
16. Le texte long gère son drapeau. Césure sur les colonnes étroites, pas de lézardes dans le texte justifié, pas de dernière ligne d’un seul mot dans les titres.

La livraison est-elle propre ?

17. WOFF2 uniquement sur le réseau. Tous les navigateurs actuels le lisent ; rien d’autre ne justifie ses octets.
18. font-display: swap est défini. Le texte s’affiche immédiatement dans une police de repli au lieu de clignoter invisible.
19. Quatre fichiers de polices ou moins. Chaque famille × graisse × style est un fichier ; une page qui en exige plus a généralement un problème de hiérarchie, pas un problème de police.
20. La police de repli correspond à peu près. Une police système de repli, ajustée métriquement avec size-adjust là où votre outillage le permet, pour que le swap déplace à peine la page.

Que faire du résultat ?

Corrigez d’abord les fondations, car elles se propagent en cascade : mettre les tailles sur une échelle répare les valeurs orphelines, des interlignes alignés sur la ligne de base réparent le rythme, et les deux réduisent d’eux-mêmes les groupes polices et livraison — une page dotée d’une vraie hiérarchie a rarement besoin d’une troisième famille ou d’un onzième fichier. Le groupe des détails vient en dernier pour une raison : de vrais guillemets sur une ligne de quatre-vingt-dix caractères, c’est du vernis sur un problème.

Pour le raisonnement derrière les détails en particulier, Practical Typography de Matthew Butterick est une référence largement recommandée — la plupart de ces vérifications condensent des arguments développés là-bas, à l’échelle d’un livre, et ailleurs.

Ensuite, rendez l’audit concret plutôt que mental. Reconstruisez les chiffres de votre page dans Scale Composer — définissez votre base et votre ratio réels, attribuez vos graisses et vos interlignes, et comparez le résultat à ce que vous avez publié. Chaque vérification que le système reconstruit passe et que votre page échoue est une correction en une ligne que vous pouvez nommer — ce qui est tout l’intérêt de suivre une checklist.