Explorer
KNOW-ANT-WEB-005

Micro-typographie décorative illisible

Domaine
web-uiux
Type
anti-pattern
Priorité
P0

Micro-typographie décorative illisible

Problème

Une interface devient pénible à lire lorsque plusieurs contraintes sont cumulées : corps inférieur à 12 px, contraste faible, capitales, chasse large, graisse légère et police monospace. Ce traitement est fréquent dans les interfaces artificiellement « techniques », mais il transforme les informations secondaires en décoration et exclut les utilisateurs ayant une vision réduite, un écran dense ou de mauvaises conditions d'affichage.

Signaux à bannir

  • Labels, statuts, compteurs, métadonnées ou éléments de navigation sous 12 px sur un écran standard.
  • Texte utile affiché avec une couleur trop proche du fond.
  • Cumul petite taille + capitales + forte chasse ; la chasse ne compense jamais un corps trop petit.
  • Monospace appliqué à tous les labels pour fabriquer une esthétique « système » ou « terminal ».
  • Hiérarchie obtenue en rendant le secondaire presque invisible.
  • Valeurs exprimées uniquement en rem sans vérifier leur taille calculée et leur rendu réel.

Règle de correction

  1. Utiliser 12 px comme plancher interne pour les métadonnées réellement secondaires, et viser 14 à 16 px pour tout texte à lire couramment.
  2. Utiliser la sans-serif principale pour la navigation, les labels, statuts et phrases. Réserver le monospace au code, aux identifiants techniques, aux tableaux de données et aux chiffres nécessitant un alignement fixe.
  3. À 12 px, limiter les capitales et garder une chasse modérée (letter-spacing proche de 0 à 0.06em).
  4. Vérifier le contraste dans l'état normal, au survol et sur les surfaces claires comme sombres.
  5. Tester à 100 % et 200 % de zoom, sur mobile réel, puis lire l'interface sans effort à une distance normale.

Critère de validation

Un texte secondaire peut être discret, mais doit rester immédiatement déchiffrable sans zoom ni concentration particulière. Si sa présence est utile, il doit être lisible ; sinon, il doit être supprimé.

Exception

Une taille inférieure à 12 px n'est tolérée que pour un détail purement graphique non nécessaire à la compréhension, jamais pour une information ou une action.