Un interlignage trop serré fatigue les yeux en quelques paragraphes. Une taille de police trop petite sur mobile force l’utilisateur à zoomer. Un contraste insuffisant exclut 8% des hommes daltoniens. La typographie en UI design n’est pas affaire de goût : ce sont des décisions techniques avec des conséquences mesurables sur la lisibilité et l’accessibilité.
Les règles de base de lisibilité
Quelques chiffres qui orientent les décisions :
- Taille de police : minimum 16px pour le corps de texte sur desktop, 14px au strict minimum sur mobile. En dessous, la lecture devient un effort.
- Interlignage : entre 1.5 et 1.7 fois la taille de la police pour le corps de texte. Un paragraphe avec un interlignage de 1.2 est plus rapide à mettre en page, mais fatigant à lire.
- Longueur de ligne : entre 55 et 75 caractères par ligne. En dessous, la lecture devient saccadée. Au-dela, l’oeil perd le fil au retour à la ligne.
- Nombre de polices : deux maximum par interface, une idéalement. Chaque police supplémentaire crée de la dissonance visuelle sans apporter de valeur réelle.
Hiérarchie typographique : guider sans signaler
Une hiérarchie typographique efficace guide l’oeil sans que l’utilisateur réalise qu’il est guidé. Titres, sous-titres, corps de texte, labels, légendes : chaque niveau doit être immédiatement distinguable du suivant.
Les leviers disponibles pour créer cette hiérarchie :
- Taille : le levier le plus puissant. Un écart minimal de 4px entre deux niveaux adjacents pour qu’ils soient visuellement distincts.
- Graisse : semibold ou bold pour les titres, regular pour le corps. Éviter l’italic pour des blocs entiers : il ralentit la lecture.
- Couleur : un texte secondaire peut être grisé, mais jamais en dessous des seuils de contraste WCAG.
- Espacement : plus d’espace au-dessus d’un titre qu’en dessous, pour que l’oeil rattache le titre à ce qui suit.
Une hiérarchie typographique réussie se teste simplement : regarder la page en retirant les couleurs. Si on comprend encore ce qui est important, la hiérarchie fonctionne. Si tout se ressemble, elle est inexistante.
Les polices variables : une évolution structurante
Les polices variables encodent un espace continu de variations dans un seul fichier WOFF2 : graisse, largeur, inclinaison, taille optique. La où il fallait charger une police en regular, bold et italic (trois fichiers), une police variable couvre toutes ces variations dans un seul fichier plus léger.
Pour l’UI design, l’avantage va plus loin que la performance. La graisse peut varier de façon fluide selon le contexte : un peu plus lourde sur un fond coloré pour maintenir le contraste, un peu plus légère dans un label secondaire. Des ajustements fins qui étaient impossibles avec des polices statiques.
Les polices variables utilisables en production en 2026 couvrent tous les besoins courants. Inter, Roboto Flex, Source Sans 3, Nunito : tous disponibles en variable, sur Google Fonts, gratuitement.
Contraste et accessibilité : maintenant obligatoire
Depuis juin 2026, l’European Accessibility Act est en vigueur pour les produits numériques vendus dans l’UE. La typographie n’y échappe pas : les exigences de contraste des normes WCAG 2.1 niveau AA sont désormais une obligation légale pour une large partie des produits et services numériques.
Les seuils à respecter :
- Texte courant : ratio de contraste de 4.5:1 minimum entre la couleur du texte et l’arrière-plan
- Grand texte (au-dessus de 18pt ou 14pt en gras) : ratio de 3:1 minimum
- Composants UI interactifs : 3:1 pour les bordures et indicateurs d’état
| Erreur typographique courante | Conséquence | Correction |
|---|---|---|
| Corps de texte en 13px | Lecture difficile sur mobile, non-conforme WCAG | 16px minimum pour le corps |
| Texte gris clair sur fond blanc (#999 sur #fff) | Ratio 2.85:1, non conforme | #767676 minimum pour atteindre 4.5:1 |
| Texte en italic pour des paragraphes entiers | Vitesse de lecture réduite de 20 à 30% | Italic réservé aux courtes citations ou termes techniques |
| Interlignage à 1.2 sur un long article | Fatigue oculaire rapide | 1.5 à 1.7 pour le corps de texte |
Typographie dans un design system
Dans un design system, la typographie se définit comme un ensemble de tokens : tailles, graisses, interlignes, espacements de lettres, tout est codifié avec des noms sémantiques plutôt que des valeurs brutes.
Au lieu de « font-size: 16px », on définit un token « body-md » qui vaut 16px. Si la décision change et que le corps passe à 17px, un seul changement met à jour l’ensemble du produit. Sans tokens, c’est une recherche-remplace manuelle dans tous les composants.
Cette organisation en tokens est aussi ce qui rend les thèmes possibles (mode sombre, marque partenaire) sans reconstruire la typographie de zéro à chaque fois.
La typographie en UI n’est pas une décision prise une fois. C’est un système vivant qui doit rester cohérent à travers des dizaines d’écrans, de contextes et de mises à jour. Les tokens sont ce qui rend cette cohérence gérable.
