La typographie, c’est l’essentiel du webdesign : quatre réglages qui donnent à un site l’air voulu
Avant les couleurs, avant la mise en page, avant la moindre image : le texte. Quatre réglages séparent une page qui a l’air faite d’une page qui a l’air générée, et un assistant les applique tous les quatre quand on le lui demande.
Sur cette page
TL;DR
Demandez quatre choses : une échelle typographique fluide bâtie sur un seul ratio, une longueur de ligne de 55 à 70 caractères, un interlettrage négatif et un interlignage serré sur les grands titres, et au plus deux polices servies depuis votre propre site. Ajoutez un plancher : corps de 16 px, contraste AA, de vrais niveaux de titres. Rien de tout ça ne demande un designer. Tout doit être demandé, parce qu’un assistant garde par défaut les réglages du navigateur.
Pourquoi le texte porte la page
Un site web, c’est surtout du texte. Quoi que fasse la mise en page, un visiteur lit le titre, puis une ligne en dessous, et décide. Si le texte est bien réglé, une page presque vide a l’air voulue. S’il est mal réglé, aucune photo ne la sauve.
C’est aussi le signe le plus discret d’une page générée. Pas le hero centré, pas les trois cartes : un grand titre composé avec l’interlettrage par défaut du navigateur, et des paragraphes qui courent sur toute la largeur de l’écran. Les deux sont ce qu’un modèle produit quand personne n’a rien demandé, et les deux se corrigent en un message. Les autres signes sont ici ; cet article traite de celui qui compte le plus.
Réglage un : une échelle, pas des tailles
Une page dont les tailles sont choisies une par une, 14 ici, 18 là, 32 pour le titre, ne se pose jamais tout à fait. Une échelle règle ça : une taille de base, un ratio, et chaque taille de la page est un échelon dessus. Demandez un ratio entre 1,2 et 1,25 et six ou sept échelons, et que l’échelle soit fluide, pour que chaque échelon grandisse un peu entre un téléphone et un écran de bureau au lieu de sauter à un point de rupture.
| Échelon | Ce qu’il règle |
|---|---|
| Échelon -1 | Légendes, étiquettes, les petites lignes |
| Échelon 0 | Le corps de texte, 16 px au moins sur un téléphone |
| Échelons 1 à 2 | Chapeaux, titres de cartes, les questions de la FAQ |
| Échelons 3 à 4 | Les titres de sections |
| Échelons 5 à 6 | Le titre de la page, la seule ligne du hero |
Un assistant sait écrire ça avec clamp() en CSS. Ce qu’il ne fera pas, c’est décider de le faire. L’échelle est la première chose à demander, avant qu’aucune section n’existe, parce que tout ce qui suit en hérite.
Réglage deux : la mesure
La mesure, c’est la longueur d’une ligne de texte. Entre 55 et 70 caractères, l’œil trouve le début de la ligne suivante sans effort. Au-delà de 90, il se perd, et un paragraphe qui traverse un grand écran est la deuxième chose la plus fréquente qui cloche sur une page générée.
Le remède tient en une règle : plafonner les paragraphes, les chapeaux et les éléments de liste à environ 65 caractères, quelle que soit la largeur de la section autour. Un hero peut être large. Son texte, non.
Réglage trois : interlettrage et interlignage des titres
Les polices sont dessinées pour se lire en corps de texte. Agrandies en titre, leurs lettres s’écartent et leurs lignes flottent. Un grand texte de titrage veut un interlettrage négatif, autour de moins deux à moins quatre centièmes de cadratin, et un interlignage proche de 1. Le corps de texte veut l’inverse : un interlettrage normal et un interlignage de 1,5 à 1,6.
Ce seul réglage fait l’essentiel de la différence entre un titre qui a l’air composé et un titre qui a l’air tapé. Il coûte deux lignes de CSS, et aucun assistant ne les ajoute sans qu’on le lui demande.
Réglage quatre : deux polices, servies par le site
Deux polices au plus : une pour le titrage, une pour le texte, ou une seule famille en gras et en régulier. Une monospace en troisième texture convient quand le sujet est technique. Au-delà, une page se lit comme un catalogue d’échantillons.
D’où elles viennent compte autant que lesquelles. Une police tirée d’un service tiers au chargement bloque le premier rendu à chaque visite, et signale la présence de vos visiteurs à ce service. Demandez les deux fichiers auto-hébergés en woff2, dans les graisses réellement utilisées et aucune autre, avec font-display réglé sur swap pour que le texte s’affiche dans une police de repli pendant que la vraie arrive. Même règle que pour les images : le premier écran n’attend rien.
| Par défaut | Ce qu’il faut demander |
|---|---|
| Des tailles en pixels, choisies à la main | Un ratio, six échelons, fluides avec clamp() |
| Des paragraphes aussi larges que l’écran | Une mesure d’environ 65 caractères |
| Des titres à l’interlettrage et à l’interlignage par défaut | Moins 0,03 em, interlignage proche de 1 |
| Quatre familles depuis un service de polices | Deux, auto-hébergées en woff2, swap |
Le plancher
Sous les quatre réglages, un plancher sous lequel rien ne descend. Ce n’est pas une question de goût, c’est la question de savoir si certains visiteurs peuvent lire la page tout court.
- Un corps de texte de 16 px ou plus sur un téléphone, et rien sous 14 px nulle part
- Un contraste AA : 4,5 pour 1 entre le texte et son fond, gris sur gris compris
- Un seul h1, puis des h2 et des h3 dans l’ordre, pour qu’un lecteur d’écran et un moteur de recherche voient la même structure que vous
- Du texte qui reste du texte : jamais un titre cuit dans une image
- Une page qui fonctionne encore zoomée à 200 %, ce qui est la façon dont beaucoup de gens lisent
Le plancher est aussi le dernier axe de la grille de relecture : en dessous de 3, la page ne se publie pas encore.
Dites ceci
Règle la typographie avant tout le reste : une échelle typographique fluide sur un seul ratio entre 1,2 et 1,25, un corps de texte de 16 px minimum, des paragraphes et des listes plafonnés à environ 65 caractères par ligne, des grands titres avec un interlettrage négatif et un interlignage proche de 1, deux polices au plus, auto-hébergées en woff2 dans les graisses utilisées avec font-display swap, et un contraste AA partout. Puis montre-moi l’échelle choisie avant de construire les sections.
Questions fréquentes
Combien de polices un site web doit-il utiliser ?
Deux au plus : une pour le titrage et une pour le texte, ou une seule famille en deux graisses. Une monospace peut faire une troisième texture sur un sujet technique. Servez-les depuis votre propre site en woff2, dans les graisses réellement utilisées.
Quelle est la meilleure longueur de ligne pour lire sur le web ?
Entre 55 et 70 caractères par ligne. Plafonnez les paragraphes, les chapeaux et les éléments de liste à environ 65 caractères quelle que soit la largeur de la section, pour que l’œil trouve la ligne suivante sans effort.
Pourquoi les titres des sites générés par IA semblent-ils faux ?
Ils sont composés avec l’interlettrage et l’interlignage par défaut du navigateur, dessinés pour le corps de texte. Un grand texte de titrage a besoin d’un interlettrage négatif, autour de moins 0,03 em, et d’un interlignage proche de 1. Deux lignes de CSS qu’aucun assistant n’ajoute sans qu’on le lui demande.
Dois-je charger mes polices depuis Google Fonts ?
Mieux vaut pas au chargement : une police tierce bloque le premier rendu à chaque visite et dit à ce service qui vous a visité. Téléchargez les deux fichiers, hébergez-les vous-même en woff2 avec font-display réglé sur swap, et le premier écran n’attend rien.