Checklist typographie web : 28 règles pour un site qui se lit vraiment

Règle 1. Le corps de texte fait au minimum 16 pixels sur desktop, 17 sur mobile. En dessous, l'œil fatigue et le visiteur scrolle plus vite, perdant l'argument que vous tenez à faire passer. La tendance des sites « minimalistes » avec du texte à 13-14px est une erreur de débutant. Les sites de référence (Apple, Stripe, Linear) ne descendent jamais sous 17px sur leur corps de texte.

Règle 2. La largeur d'une ligne de texte tient entre 50 et 75 caractères. Au-delà, l'œil saute à la mauvaise ligne en revenant à gauche. C'est mesurable : avec une font à 18px, ça correspond à environ 600-700 pixels de largeur de colonne. Sur les pages éditoriales, on cale donc le contenu principal à `max-width: 65ch` ou équivalent.

Règle 3. L'interligne du corps de texte se situe entre 1.5 et 1.7. Un interligne à 1.2 (valeur par défaut de beaucoup de browsers) rend les longues sections difficiles à lire. Pour des paragraphes éditoriaux longs, on monte à 1.6-1.7. Pour des titres ou des blocs courts, on peut descendre à 1.1-1.2.

Règle 4. Le contraste entre texte et fond respecte au minimum un ratio de 4.5:1 (WCAG AA). Un texte gris clair sur fond blanc est élégant pour le designer mais illisible pour 20% de vos visiteurs (presbytes, daltoniens, écrans bas de gamme, lumière du jour). L'outil WebAIM Contrast Checker vérifie ce ratio en 5 secondes.

Règle 5. Le texte de petite taille (< 14px) ou en gras passe à un ratio 3:1. Cette tolérance est utilisée par les normes WCAG pour les « grands textes » uniquement. Pour le corps de texte standard, restez à 4.5:1 minimum.

Règle 6. Ne pas utiliser du noir pur (#000) sur fond blanc pur (#FFF). Ce contraste extrême fatigue l'œil et donne un rendu froid et impersonnel. Préférez du gris très foncé (#111 ou #1A1A1A) sur fond crème ou off-white (#FAFAFA, #F8F7F4). Apple, le New York Times, Medium : aucun n'utilise du noir pur en mode clair.

Règle 7. Utiliser au maximum 2 familles de fontes sur un site. Une pour les titres, une pour le corps, parfois une troisième en accent (logo, badge, citation). Au-delà, vous perdez en cohérence et la marque devient illisible. Si la famille principale a des graisses suffisantes (light, regular, medium, bold), on peut même n'en utiliser qu'une seule.

Règle 8. L'écart entre H1 et corps de texte doit être visuellement franc. La règle classique : H1 = 2.5 à 4x la taille du corps, H2 = 1.5 à 2x, H3 = 1.2 à 1.5x. En CSS moderne, on utilise `clamp()` pour des tailles fluides : par exemple `font-size: clamp(2.5rem, 5vw, 4.5rem)` pour un H1 qui s'adapte au viewport.

Règle 9. Les graisses font la moitié du travail de hiérarchie. Un H2 en regular n'a pas de présence. Un H2 en bold 700 ou plus annonce clairement une nouvelle section. Sur Flow Studio, les titres importants sont en 700-800, le corps en 300-400 (light), avec une variante 500 pour les sous-éléments. L'écart de graisse crée la hiérarchie même sans changement de taille.

Règle 10. Privilégier les fontes système ou les Google Fonts populaires sur les fontes obscures payantes. Inter, IBM Plex, Manrope, Space Grotesk, Geist : toutes gratuites, toutes excellentes, toutes optimisées pour le web. Les fontes payantes ne se justifient que pour les marques qui ont besoin d'une identité typographique forte et différenciante (presse, luxe, mode).

Règle 11. Une fonte sans-serif moderne pour le corps de texte digital. Les serif sont parfaites pour le print et l'édition longue, mais en digital, la majorité des écrans bas et moyen de gamme rendent mal les empattements. Si vous tenez à un serif, choisissez une famille spécifiquement designée pour l'écran : Source Serif, Lora, Newsreader, ou Charter.

Règle 12. Évitez les fontes trop tendances qui dateront en 2 ans. Les fontes "variable" avec des effets extrêmes (Pangram Sans Rounded, Aeonik Mono italic) sont magnifiques mais signent leur époque. Si vous voulez un site qui tient 5 ans visuellement, choisissez des fontes éprouvées (Inter, IBM Plex, GT America, Söhne, Suisse Int'l).

Règle 13. L'espace entre deux paragraphes est égal à au moins une fois la hauteur de ligne. Un texte serré sans respiration est anxiogène à lire. En CSS, c'est `margin-bottom: 1.5em` ou équivalent. Pour les sections critiques (introduction, conclusion), on peut doubler à 2em pour créer du rythme.

Règle 14. Les sections H2 sont précédées d'un espace deux à trois fois plus grand que les paragraphes simples. Le scan visuel d'un lecteur s'appuie sur ces respirations pour comprendre la structure du document. Trop peu d'espace, et l'utilisateur perd le fil. Trop d'espace, et le contenu paraît fragmenté.

Règle 15. Le `text-align: justify` est à proscrire en web. Les browsers ne gèrent pas les césures correctement, ce qui produit des rivières de blanc disgracieuses entre les mots. Préférez `text-align: left` (ou `start` pour les langues RTL). Le justifié reste valable en print uniquement.

Règle 16. Les guillemets droits (") sont remplacés par des guillemets typographiques. En français, ce sont les chevrons « » avec espaces insécables. En anglais, ce sont les courbes “ ”. Tous les sites professionnels passent par cette substitution. C'est l'un des signaux les plus immédiats du niveau de soin apporté au site.

Règle 17. L'apostrophe droite (') devient une apostrophe courbe (’). Cette substitution est automatique dans la plupart des CMS modernes, mais à vérifier sur les sites custom. Voir un apostrophe droite dans le texte trahit le manque de finition.

Règle 18. Pas d'em dash (—) ni d'en dash (–) dans le texte courant en français. L'em dash est une convention anglo-saxonne. En français, on utilise les deux points, les virgules, les parenthèses ou les tirets longs avec espaces. Voir un em dash dans un texte français signale un contenu généré par IA mal relu, ou un copier-coller d'un brief anglais.

Règle 19. Le texte mobile démarre à 17 ou 18 pixels minimum. Sur un écran de smartphone tenu à 30 cm des yeux, 16px paraît plus petit que 17px sur desktop à 60 cm. Les sites Apple, Notion et Stripe tournent à 17-18px sur mobile.

Règle 20. Les titres H1 sont plus petits sur mobile que sur desktop. Un H1 à 80px sur desktop devient illisible à 80px sur mobile. Avec `clamp()`, on cale typiquement entre 32px (mobile) et 80px (desktop), avec une interpolation fluide en `vw`.

Règle 21. Les boutons et liens touchables font au moins 44 pixels de haut. C'est la zone tactile minimale recommandée par Apple et Google pour qu'un pouce moyen tape avec précision. En dessous, le taux d'erreur de tap explose et frustre l'utilisateur. Cette règle inclut le padding du bouton, pas juste la hauteur du texte.

Règle 22. Limiter à 4 fichiers de fonte chargés maximum. Chaque variante (graisse + style) ajoute 30 à 100 KB et un appel réseau supplémentaire. En pratique, 4 variantes suffisent largement : light, regular, medium, bold pour le corps + une éventuelle italique. Toute déclinaison supplémentaire doit être justifiée par un cas d'usage réel.

Règle 23. Préférer les formats WOFF2 et le `font-display: swap`. WOFF2 réduit la taille de 30% par rapport au WOFF classique. La propriété `font-display: swap` affiche le texte immédiatement avec une fonte système le temps que la fonte personnalisée charge, évitant l'effet « invisible text flash » qui pénalise le score Lighthouse.

Règle 24. Précharger uniquement les fontes critiques (above the fold). Précharger toutes les fontes du site avec `<link rel="preload">` est contre-productif : ça force des téléchargements même pour les variantes peu utilisées. On précharge seulement la fonte du H1 et celle du corps de texte initial. Le reste se charge à la demande.

Règle 25. Un seul H1 par page, et il décrit le sujet principal. Un site avec plusieurs H1 sur la même page confond les moteurs de recherche et les lecteurs d'écran. Le H1 est aussi le titre indexé par Google pour le résumé en SERP, donc son contenu compte énormément pour le SEO.

Règle 26. La hiérarchie H2 → H3 → H4 se respecte sans saut. Passer d'un H2 à un H4 sans H3 cassé la structure logique du document, pénalise l'accessibilité, et confond le crawler. Si vous avez besoin d'un visuel plus discret qu'un H3, c'est probablement un `<p>` avec une classe de style, pas un H4.

Règle 27. Le texte alternatif des images contient une description, pas un mot-clé. Un alt qui dit « SEO Belgique » est un signal de spam. Un alt qui dit « Capture d'écran du dashboard Flow Studio montrant le score Lighthouse » est lisible par les lecteurs d'écran et indexable proprement.

Règle 28. Tester chaque page avec le zoom du browser à 200%. C'est une exigence WCAG 1.4.4. Si le texte casse la mise en page, déborde, ou devient illisible, votre site n'est pas accessible aux 15% d'utilisateurs qui activent un zoom système (presbytie, basse vision, fatigue oculaire).

Au-delà de cette checklist, le vrai test est subjectif : imprimez une de vos pages en PDF, attendez 24h, relisez-la fraîche. Si vous trébuchez sur un mot, une transition, un manque de respiration : c'est là qu'il faut retoucher. La typographie web bien faite ne se voit pas. Elle se sent.