Typographie d’interface : les réglages qui changent tout
La police compte moins qu’on ne le croit : échelle, interligne, approche et longueur des lignes font la différence entre un écran fini et approximatif.
On choisit souvent une police d’interface en quelques minutes, puis on passe des semaines à se demander pourquoi l’écran paraît « pas fini ». La plupart du temps, la police n’y est pour rien : ce sont les réglages autour qui font la différence.
Une échelle, pas des tailles
Je ne choisis jamais une taille au cas par cas. Je pose une échelle de quelques valeurs, et chaque texte en prend une. Moins de tailles, c’est plus de hiérarchie.
| Rôle | Taille | Interligne |
|---|---|---|
| Étiquette, méta | 12 px | 1,4 |
| Texte courant | 15 à 17 px | 1,6 |
| Titre de section | 24 à 28 px | 1,2 |
| Titre de page | 40 à 56 px | 1,05 |
L’interligne suit la taille
Plus un texte est grand, plus son interligne doit être serré. Un paragraphe respire à 1,6 ; un grand titre à 1,6 paraît éclaté et se lit en morceaux.
Resserrer les grands titres
Les polices sont dessinées pour être lues à taille de texte. À 48 px, l’espace entre les lettres devient trop large : je le resserre légèrement, entre −2 et −4 %.
.title {
font-size: 3rem;
line-height: 1.05;
letter-spacing: -0.04em;
}
Limiter la longueur des lignes
Au-delà de 75 caractères, l’œil se perd en revenant à la ligne. Je bride les paragraphes autour de 65 caractères, même quand la mise en page est large.
- caractères par ligne
- 45–75
- interligne du texte courant
- 1,6
- graisses suffisent souvent
- 2
Deux graisses, pas cinq
Regular pour le texte, Medium pour l’accent. Le gras franc est rarement nécessaire dans une interface : la taille et la couleur suffisent à créer la hiérarchie.
Ma checklist typographique
- Une échelle de 5 à 7 tailles maximum
- Interligne qui diminue quand la taille augmente
- Grands titres légèrement resserrés
- Paragraphes bridés autour de 65 caractères
- Deux graisses, et des chiffres tabulaires pour les données
En résumé
- Une échelle de tailles plutôt que des valeurs au cas par cas.
- Un interligne qui s’adapte à la taille.
- Des titres resserrés, des lignes courtes.
- Peu de graisses, une hiérarchie portée par la taille et la couleur.
Une interface qui paraît « propre » sans qu’on sache dire pourquoi, c’est très souvent une typographie bien réglée, et un espace blanc bien dosé.
