Lorsqu’on affiche des chiffres dans une interface (app, site web, TV), le choix de la police peut impacter la lisibilité et l’expérience utilisateur.
Définitions
- Police proportionnelle : chaque caractère occupe seulement l’espace nécessaire.
- Police monospace : chaque caractère occupe exactement le même espace horizontal.
Exemple visuel :
- Proportionnelle : (largeur variable)
- Monospace : (largeur identique)
Le problème : les chiffres qui “wigglent”
Si une police proportionnelle est utilisée pour des chiffres animés (compteurs, chronomètres, téléchargements…), l’étiquette change de largeur à chaque mise à jour.
Résultat : le texte “wiggle” horizontalement, ce qui gêne la lecture et perturbe l’œil.
Quand utiliser chaque type
| Type de label | Exemple | Police recommandée |
|---|---|---|
| Dynamique | Compteur de téléchargement, chronomètre, durée d’appel | Monospace pour éviter le wiggle |
| Statique | Date, téléphone, email, URL | Proportionnelle pour un rendu plus naturel |
Exemples dans la vraie vie
- Bonne pratique : iOS Music App, iOS Clock App (Stopwatch)
- À éviter : Facebook vidéo sur navigateur, Spotify app, certaines horloges TV
Comment activer les chiffres monospaces
iOS (UIKit)
myLabel.font = UIFont.monospacedDigitSystemFont(ofSize: 42.0, weight: .medium)
- Pour une solution générique : utiliser une extension de police avec
.withMonospacedDigitFont. - Polices monospace classiques : Courier, Menlo.
iOS (SwiftUI)
Text("0123456789")
.monospacedDigit()
- Avec police personnalisée :
Text("0123456789")
.font(.custom("Custom-Font-Name", size: 20))
.monospacedDigit()
React Native
<Text style={{fontVariant: 'tabular-nums'}}>0123456789</Text>
Web (CSS)
.yourcssclass {
font-variant-numeric: tabular-nums;
}
Résumé
- Dynamic labels → monospace → pas de wiggle
- Static labels → proportionnel → rendu naturel
- Adapter le choix de police à l’usage améliore lisibilité et confort visuel sur toutes les plateformes (mobile, web, TV).
Si tu veux, je peux te faire un petit schéma visuel comparant proportionnel vs monospace, avec exemples et contextes d’usage, pour que ce soit encore plus clair et rapide à comprendre.
Veux‑tu que je fasse ça ?
