font-variant-numeric est une propriété CSS qui permet de contrôler la forme et le comportement typographique des chiffres (0–9) et de certains symboles numériques (fractions, ordinaux, zéros, etc.), si la police le permet.
Elle sert principalement à améliorer la lisibilité, l’alignement et la cohérence visuelle des nombres dans les interfaces (tableaux, statistiques, prix, dashboards).
Valeurs principales
tabular-nums
Chaque chiffre occupe la même largeur
idéal pour tableaux, prix, KPI
font-variant-numeric: tabular-nums;proportional-nums
Chaque chiffre a une largeur proportionnelle à sa forme
plus esthétique dans le texte courant
font-variant-numeric: proportional-nums;lining-nums
Chiffres alignés sur la hauteur des majuscules
cohérence visuelle dans les interfaces modernes
font-variant-numeric: lining-nums;oldstyle-nums
Chiffres avec hampes et jambages (style ancien)
plutôt pour l’édition / print
font-variant-numeric: oldstyle-nums;
font-variant-numeric: lining-nums;slashed-zero
Zéro barré pour éviter la confusion avec la lettre O
font-variant-numeric: slashed-zero;
ordinal
Formes typographiques pour les ordinaux
(ex : 1ᵉʳ, 2ᵉ)
font-variant-numeric: ordinal;
diagonal-fractions / stacked-fractions
Affichage typographique des fractions
font-variant-numeric: diagonal-fractions;
Combinaisons possibles
font-variant-numeric: tabular-nums lining-nums;
chiffres alignés et à hauteur uniforme