Pourquoi la typographie de votre UI fait junior : 6 correctifs avec les valeurs exactes
Six erreurs de typographie qui donnent à une interface un air junior, et le correctif senior pour chacune avec les chiffres exacts : une échelle typographique, une seule famille, un gris lisible, les capitales, l'interligne et la hiérarchie.
Une typographie junior est rarement une grosse erreur. Ce sont six petites, chacune décidée au feeling : une taille qui avait l'air bien, une police qui semblait fun, un gris qui paraissait élégant. Une typo senior paraît calme parce que chacun de ces choix suit une règle. Voici les six, avec les chiffres.
1. Utilisez une échelle typographique
✕ Junior : tailles choisies au feeling
✓ Senior : un seul ratio, 1,25 à partir de 16
À gauche, chaque taille a été choisie isolément : 31, 27, 22, 17, 15, 13. Les écarts sont inégaux, donc certains niveaux se ressemblent presque et d'autres font un grand saut. À droite, chaque taille est la précédente multipliée par 1,25 : 16, 20, 25, 31, 39. Les écarts sont réguliers, donc chaque niveau se distingue nettement du suivant.
Un ratio entre 1,2 et 1,333 convient à la plupart des interfaces. Choisissez-en un, notez-le, et ne tapez jamais une taille qui n'est pas dans la liste. En CSS, c'est un petit jeu de variables, et dans Figma un ensemble de styles de texte. Notre guide sur l'échelle typographique modulaire explique comment choisir le ratio.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. Une famille, deux graisses
Week-end à Lisbonne
un petit carnet de voyageTrois jours, deux quartiers et un très long trajet en tramway.
LIRE LA SUITE✕ Junior : quatre polices sur une carte
Week-end à Lisbonne
Un petit carnet de voyageTrois jours, deux quartiers et un très long trajet en tramway.
Lire la suite✓ Senior : une famille, regular et bold
Chaque nouvelle police apporte sa propre personnalité, et quatre personnalités sur une carte, ça se dispute. Le lecteur ne sait plus laquelle est la marque. Une famille en deux graisses, regular pour la lecture et bold pour les titres, suffit à construire tous les niveaux dont un écran a besoin.
Si vous voulez une seconde famille, donnez-lui un seul rôle, comme les titres uniquement, et gardez-le partout. N'ajoutez jamais une police pour rendre un élément « spécial ».
3. Un gris que l'on peut lire
Votre commande est en route
Arrivée entre 14h20 et 14h40.Nous vous enverrons un SMS quand le livreur sera proche.
✕ #B0B0B0 sur blanc : difficile à lire
Votre commande est en route
Arrivée entre 14h20 et 14h40.Nous vous enverrons un SMS quand le livreur sera proche.
✓ #6B6B6B sur blanc : facile à lire
Un gris clair paraît raffiné dans un fichier de design sur un écran lumineux. Sur un téléphone en plein air, il disparaît. L'heure d'arrivée à gauche est la ligne la plus utile de la carte et la plus difficile à lire.
#6B6B6B reste discret à côté du titre noir, et il reste lisible. En règle générale, un texte secondaire sur blanc ne devrait pas être plus clair qu'environ #767676, le gris le plus clair qui passe le minimum d'accessibilité pour le texte courant.
4. Des capitales uniquement pour les libellés
Nous avons mis à jour nos conditions. Veuillez consulter les changements avant votre prochaine commande.
✕ Junior : une phrase en capitales
MISE À JOUR
Nous avons mis à jour nos conditions
Veuillez consulter les changements avant votre prochaine commande.
✓ Senior : un libellé en capitales, texte en casse de phrase
Les capitales effacent la forme des mots. En minuscules, les lettres hautes et basses donnent à chaque mot un contour que votre œil reconnaît ; en capitales, chaque mot est un rectangle, donc une phrase se lit lettre par lettre. C'est pourquoi un paragraphe en capitales donne l'impression de crier et prend plus de temps à lire.
Les capitales fonctionnent pour ce pour quoi elles ont été faites : des libellés courts de un à trois mots, comme une étiquette de section, un statut ou un bouton. Tout ce qui est plus long se met en casse de phrase.
5. Titres serrés, corps aéré
L'espacement fait partie de la typo
Un interligne serré transforme un paragraphe en mur. Laissez le texte courant respirer et gardez les titres compacts.
✕ Junior : titre lâche, corps tassé
L'espacement fait partie de la typo
Un interligne serré transforme un paragraphe en mur. Laissez le texte courant respirer et gardez les titres compacts.
✓ Senior : titre à 1,1, corps à 1,5
L'interligne a des rôles opposés selon les tailles. Les grands titres ont déjà beaucoup d'espace à l'intérieur de leurs lettres, donc un titre à 1,1 tient ensemble comme une seule forme. Le petit texte courant a besoin d'air entre les lignes pour que l'œil retrouve le début de la suivante, donc il reçoit 1,5.
La version junior fait l'inverse, souvent parce qu'un seul interligne a été appliqué à tout. Définissez deux valeurs et utilisez-les partout : environ 1,1 à 1,2 pour les titres, 1,4 à 1,6 pour le texte courant.
6. Taille, graisse, couleur, espace
Commande n° 2841
LivréeAujourd'hui, 14h203 articlesTotal 42,80 $
✕ Junior : tout en gras, une seule taille
● Livrée
Commande n° 2841
Aujourd'hui, 14h20 · 3 articlesTotal 42,80 $
✓ Senior : quatre outils, un ordre clair
Quand tout est en gras, rien ne l'est. La carte junior a cinq lignes de même taille et de même graisse, donc le lecteur doit toutes les lire pour trouver celle qui compte.
La carte senior utilise quatre outils, chacun un peu : le numéro de commande est plus grand, le statut reçoit une couleur et un point, les détails passent en gris, et l'espace isole le total. Aucun outil n'est poussé fort, c'est pourquoi le résultat paraît calme. Plus de détails dans la hiérarchie typographique.
Les six correctifs en un tableau
| Junior | Senior | La valeur |
|---|---|---|
| Tailles choisies au feeling | Une échelle typographique | 1,25 à partir de 16 : 20, 25, 31, 39 |
| Plusieurs polices | Une famille, deux graisses | Regular et bold |
| Texte gris clair | Un gris lisible | #6B6B6B sur blanc, jamais plus clair que #767676 |
| Phrases en capitales | Capitales pour les libellés courts | Un à trois mots |
| Un seul interligne pour tout | Deux interlignes | Titres 1,1, corps 1,5 |
| Tout en gras | Quatre outils de hiérarchie | Taille, graisse, couleur, espace |
FAQ
Quelle est une bonne échelle typographique pour une UI ?
Un ratio entre 1,2 et 1,333 sur une base de 16 px. Un ratio de 1,25 donne 16, 20, 25, 31 et 39 px, assez de niveaux pour la plupart des écrans.
Combien de polices une UI doit-elle utiliser ?
Une seule famille suffit, utilisée en deux graisses. N'ajoutez une seconde famille que pour un rôle fixe, comme les titres, et utilisez-la de la même façon partout.
Quel interligne pour le texte courant ?
Environ 1,5 pour le texte courant et environ 1,1 à 1,2 pour les grands titres.
Quel gris est lisible sur blanc ?
#767676 est le gris le plus clair qui passe le minimum WCAG pour le texte courant sur blanc. #6B6B6B donne un peu plus de marge et reste perçu comme secondaire.
Le texte d'une UI doit-il être tout en capitales ?
Seulement pour des libellés courts de un à trois mots. Un texte plus long en capitales se lit plus lentement parce que les mots perdent leur forme.
Sources
- Échelle typographique : 16 × 1,25ⁿ = 20, 25, 31,25 et 39,06, présentés arrondis.
- Contraste sur blanc, calculé avec la formule WCAG 2 : #B0B0B0 2,2 pour 1, #767676 4,5 pour 1, #6B6B6B 5,3 pour 1. WCAG demande 4,5 pour 1 pour le texte courant (1.4.3 Contrast (Minimum)).
- D'abord publié sous forme de carrousel sur UX Brainy.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
