Règles de base de la typographie web

La typographie web obéit à des contraintes différentes du print. L'écran fatigue davantage l'œil, la distance de lecture varie, les tailles d'écran changent et le rendu dépend du navigateur et du système d'exploitation. Un texte parfaitement composé dans InDesign peut devenir illisible dans un navigateur si tu ne tiens pas compte de ces spécificités.

Taille du corps de texte

16px minimum. C'est le seuil de lisibilité confortable sur la majorité des écrans. En dessous, le lecteur plisse les yeux ou zoome — dans les deux cas, tu as perdu. Pour un site à dominante textuelle (blog, documentation, article long), 18px est préférable.

Pense en rem plutôt qu'en pixels pour que les tailles s'adaptent aux préférences du navigateur de l'utilisateur. 1rem = la taille de base définie sur l'élément html (16px par défaut).

Interlignage

1.5 à 1.6 pour le corps. C'est la plage qui offre le meilleur confort de lecture à l'écran. Un interlignage de 1.4 fonctionne sur des colonnes étroites. Au-delà de 1.8, les lignes semblent déconnectées et l'œil perd le fil.

Pour les titres, resserre à 1.1–1.2. Un titre en 48px avec un line-height de 1.5 crée un blanc vertical excessif entre les lignes.

Longueur de ligne

50 à 75 caractères par ligne. C'est la plage optimale pour la lecture continue. En dessous de 50, l'œil revient trop souvent à la ligne suivante. Au-dessus de 75, il perd la ligne en cours.

En pratique, limite la largeur de ton conteneur de texte à environ 680–720px pour un corps en 16-18px. En CSS : max-width: 70ch; est un raccourci élégant qui s'adapte à la police utilisée.

Nombre de polices

2 polices maximum sur un site. Une pour les titres, une pour le corps. Trois polices sont acceptables si la troisième a un rôle spécifique (code, navigation, accent). Au-delà, le site perd sa cohérence visuelle et son temps de chargement augmente.

Une seule famille avec plusieurs graisses fonctionne très bien. Inter en Regular, SemiBold et Bold couvre tous les besoins d'un site standard.

Chargement des polices

Chaque police ajoutée est une requête HTTP supplémentaire. Chaque graisse est un fichier supplémentaire. L'impact sur la performance est réel.

Ne charge que ce que tu utilises. Si ton site utilise Regular et Bold, ne charge pas les 10 graisses de la famille. En Google Fonts, sélectionne explicitement les graisses nécessaires.

Utilise font-display: swap. Ça affiche le texte immédiatement avec une police système, puis remplace par ta police custom une fois chargée. Le visiteur voit du texte dès la première seconde au lieu d'un espace vide.

Privilégie les variable fonts. Un seul fichier contient toutes les graisses et styles. Inter, Source Sans 3, Outfit sont disponibles en variable. C'est plus léger que 4 fichiers séparés.

Contraste et couleur du texte

Ratio de contraste minimum 4.5:1 entre le texte et le fond (norme WCAG AA). En pratique, du texte noir sur fond blanc donne un ratio de 21:1 — largement suffisant. Du gris moyen (#777) sur fond blanc donne 4.5:1 — c'est la limite basse.

Ne fais pas de texte gris clair sur fond blanc pour « faire design ». Si le texte est là pour être lu, il doit être lisible. Les tons entre #333 et #555 sur fond blanc offrent un bon équilibre entre douceur et lisibilité.

Alignement

Texte aligné à gauche (fer à gauche). C'est le standard du web. Le bord gauche régulier guide l'œil au retour de ligne. Le texte justifié crée des « rivières » de blanc entre les mots parce que les navigateurs ne gèrent pas les césures aussi bien qu'InDesign. Évite-le sauf avec la propriété CSS hyphens: auto; et un rendu vérifié.

Le texte centré est acceptable pour les titres courts, les citations et les accroches. Pas pour les blocs de texte — le bord gauche irrégulier rend la lecture pénible au-delà de 3 lignes.