123 Design StudioLa typographie web est l'endroit où se gagne ou se perd l'essentiel de la qualité perçue d'une interface, car le texte constitue le gros de presque chaque écran. Une bonne typo ne tient pas à des polices exotiques ; elle tient à l'échelle, au rythme, à la justification et à la performance qui travaillent ensemble. Ce guide pratique couvre les décisions qui rendent le corps de texte confortable et les titres pertinents.
Construire une échelle typographique, pas une liste de tailles
Partez d'une échelle typographique définie plutôt que de choisir des tailles au coup par coup. Une échelle est un petit ensemble de tailles dérivées d'une base (souvent 16px pour le corps) multipliée par un ratio constant. Un ratio modeste donne des interfaces calmes et denses en contenu ; un ratio plus large crée un contraste éditorial spectaculaire.
- Ancrez le texte courant autour de 16–18px pour une lecture confortable.
- Dérivez les titres du même ratio pour que les relations semblent intentionnelles.
- Exposez l'échelle en design tokens pour que design et code ne divergent jamais.
Longueur de ligne et justification
La justification — le nombre de caractères par ligne — affecte fortement la lisibilité. La recommandation typographique de longue date, reprise par le Nielsen Norman Group, est de maintenir le corps de texte dans une plage confortable, environ 45 à 75 caractères par ligne. Trop large, l'œil se perd en revenant à la ligne suivante ; trop étroit, la lecture devient hachée.
- Limitez les conteneurs de texte avec
max-widthen unitésch(ex.65ch). - Ne laissez pas les paragraphes s'étirer pleine largeur sur grand écran.
Rythme vertical et espacement
L'interligne et l'espacement créent la texture d'une page. Le corps de texte se lit généralement bien avec un interligne autour de 1,5 ; plus serré pour les grands titres, plus aéré pour les petits caractères. Établissez une échelle d'espacement cohérente et reliez l'espacement des paragraphes à l'interligne pour que la page respire uniformément.
La typographie est surtout de l'espace négatif. Les relations entre lettres, lignes et blocs comptent plus que les formes elles-mêmes.
Polices variables
Les polices variables condensent toute une famille — graisses, largeurs, parfois tailles optiques — dans un seul fichier doté d'axes continus. Cela ouvre un contrôle fin : régler exactement la graisse d'un titre, animer la graisse au survol, ou utiliser l'axe de taille optique pour que petit texte et grand affichage soient chacun dessinés correctement. Une seule police variable bien choisie peut remplacer plusieurs fichiers statiques tout en réduisant le poids total.
Chargement des polices et performance
La typo est un enjeu de Core Web Vitals. Des polices mal chargées provoquent un texte invisible passager ou, pire, un décalage de mise en page quand le repli et la police web ont des métriques différentes.
Checklist performance
- Hébergez vos polices et faites un
preloaddes plus critiques. - Utilisez
font-display: swappour éviter le texte invisible. - Sous-ensemblez les polices aux caractères réellement utilisés.
- Alignez les métriques du repli avec
size-adjustpour réduire le décalage. - Préférez le
woff2moderne et limitez le nombre de graisses.
Associer des polices
La plupart des interfaces n'ont besoin que d'une ou deux polices. Une approche fiable et courante consiste à utiliser une seule famille polyvalente dans tout le système, la graisse et la taille assurant la différenciation. Si vous associez, cherchez le contraste dans l'harmonie : une serif de caractère pour les titres face à une sans nette pour le corps, ou deux familles aux proportions proches mais à la voix différente. Évitez d'associer deux polices presque identiques ; la tension se lit comme une erreur.
Mettre en pratique
Une typographie web solide est systématique, pas décorative. Définissez une échelle, maîtrisez votre justification, posez un rythme cohérent, exploitez les polices variables là où elles aident, et chargez tout sans jamais bloquer le rendu ni décaler la mise en page. Maîtrisez ces fondamentaux et même une seule police bien réglée donnera à votre travail un air réfléchi et digne de confiance.