Aligner les nombres en CSS font-variant-numeric et font-feature-settings

Quand on affiche des prix, des statistiques ou des tableaux en CSS, un détail saute vite aux yeux : les chiffres ne sont pas toujours parfaitement alignés. Résultat, vos colonnes peuvent paraître légèrement désordonnées, même avec un design propre. Heureusement, CSS propose des solutions simples et élégantes pour aligner les nombres avec font-variant-numeric et font-feature-settings.

Dans ce tutoriel CSS, vous allez apprendre à aligner correctement des nombres, comprendre la différence entre chiffres proportionnels et tabulaires, et découvrir comment améliorer instantanément la lisibilité de vos interfaces.

Que vous codiez un tableau HTML, un dashboard ou une liste de prix, ces propriétés CSS peuvent vraiment faire la différence.

• Donner un rendu beaucoup plus propre à vos tableaux, prix et statistiques grâce à des chiffres parfaitement alignés en CSS.
• Comprendre la différence entre chiffres proportionnels et tabulaires pour améliorer instantanément la lisibilité de vos interfaces.
• Apprendre à utiliser font-variant-numeric et font-feature-settings avec des exemples concrets faciles à réutiliser dans vos projets web.

Un 1 prend souvent moins de place qu’un 8. Résultat, vos colonnes semblent légèrement bancales. Rien de dramatique, bien sûr, mais visuellement, cela donne parfois cette petite impression de désordre qui agace l’œil sans qu’on sache vraiment pourquoi.

CSS propose des outils très pratiques pour corriger cela : font-variant-numeric et font-feature-settings.

Pourquoi les nombres ne s’alignent pas toujours ?

Avant de parler de CSS, regardons le problème.

Dans beaucoup de polices modernes, les chiffres sont dits “proportionnels”. Cela signifie que chaque chiffre occupe une largeur différente.

<p>1111</p>
<p>8888</p>
<p>1234</p>

Même si chaque ligne contient quatre chiffres, elles peuvent ne pas avoir exactement la même largeur à l’écran.

Le chiffre 1 est souvent plus fin. Le chiffre 8, lui, est plus large. C’est très bien pour du texte classique, car cela donne un rendu plus naturel. Mais pour des données numériques, c’est moins pratique.

Imaginez un tableau de prix :

<table>
  <tr>
    <td>9,99 €</td>
  </tr>
  <tr>
    <td>119,99 €</td>
  </tr>
  <tr>
    <td>1 888,00 €</td>
  </tr>
</table>

Ce qui donnera :

Si les chiffres n’ont pas la même largeur, l’alignement peut sembler légèrement irrégulier. Et sur une interface professionnelle, ce petit détail peut faire toute la différence.

C’est là que font-variant-numeric entre en scène.

Comprendre font-variant-numeric

La propriété CSS font-variant-numeric permet de contrôler l’apparence des nombres dans une police.

Elle agit sur certaines fonctionnalités typographiques avancées, disponibles dans les polices compatibles OpenType.

Dit plus simplement : certaines polices embarquent plusieurs façons d’afficher les chiffres. CSS peut demander à la police d’utiliser une variante plutôt qu’une autre.

Vous pouvez demander :

.prix {
  font-variant-numeric: tabular-nums;
}

Ici, tabular-nums indique au navigateur : “Merci d’afficher les chiffres avec une largeur identique, pour qu’ils s’alignent bien.”

C’est exactement ce dont nous avons besoin pour les tableaux de nombres.

Les chiffres proportionnels et tabulaires

Les chiffres proportionnels

Les chiffres proportionnels sont les chiffres “naturels” dans beaucoup de polices.

• Chaque chiffre prend la largeur dont il a besoin.

.exemple-proportionnel {
  font-variant-numeric: proportional-nums;
}

Ce rendu est agréable dans un paragraphe classique :

<p class="exemple-proportionnel">
  En 2026, environ 12 500 visiteurs ont consulté cette page.
</p>

Dans une phrase, les chiffres proportionnels s’intègrent bien au texte. Ils ne donnent pas un effet trop mécanique.

En revanche, pour une liste de valeurs, ce n’est pas toujours idéal.

Les chiffres tabulaires

• Les chiffres tabulaires ont tous la même largeur.

Le 1, le 5, le 8 et le 0 occupent exactement le même espace. C’est parfait pour aligner des montants, des scores, des statistiques ou des colonnes de tableau.

.exemple-tabulaire {
  font-variant-numeric: tabular-nums;
}

Exemple concret :

<div class="stats">
  <p>Visites : 1 215</p>
  <p>Ventes : 98</p>
  <p>Panier moyen : 490</p>
</div>

.stats {
  font-variant-numeric: tabular-nums;
}

Avec cette règle, les chiffres deviennent plus réguliers. L’affichage paraît plus propre, plus stable, plus sérieux.

Ce n’est pas spectaculaire comme une animation CSS avec des confettis. Mais dans une vraie interface, c’est souvent ce genre de détail qui donne une impression de qualité.

Exemple : aligner une liste de prix

Prenons un exemple simple.

<div class="liste-prix">
  <p>9,99 €</p>
  <p>19,90 €</p>
  <p>889,00 €</p>
  <p>1 111,99 €</p>
</div>

Sans style particulier, l’alignement peut varier selon la police utilisée :

Ajoutons maintenant un peu de CSS :

.liste-prix {
  font-family: Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.liste-prix p {
  width: 120px;
  text-align: right;
}

Ici, deux choses importantes se passent.

D’abord, font-variant-numeric: tabular-nums; force l’utilisation de chiffres de même largeur, si la police le permet.

Ensuite, text-align: right; aligne les montants à droite. C’est une bonne habitude pour les valeurs numériques, car les unités, dizaines, centaines et milliers deviennent plus faciles à comparer.

Avec ce duo, vos prix gagnent tout de suite en lisibilité.

Utiliser font-variant-numeric dans un tableau HTML

Les tableaux sont probablement l’un des meilleurs cas d’usage.

Voici une structure HTML simple :

<table class="tableau-ventes">
  <thead>
    <tr>
      <th>Produit</th>
      <th>Ventes</th>
      <th>Chiffre d’affaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Formation HTML</td>
      <td>98</td>
      <td>1 470,00 €</td>
    </tr>
    <tr>
      <td>Formation CSS</td>
      <td>123</td>
      <td>2 337,00 €</td>
    </tr>
    <tr>
      <td>Formation JavaScript</td>
      <td>1 024</td>
      <td>18 432,00 €</td>
    </tr>
  </tbody>
</table>

Et maintenant le CSS :

.tableau-ventes {
  width: 100%;
  border-collapse: collapse;
  font-family: system-ui, sans-serif;
}

.tableau-ventes th,
.tableau-ventes td {
  padding: 0.75rem;
  border-bottom: 1px solid #ddd;
}

.tableau-ventes td:nth-child(2),
.tableau-ventes td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Produit	Ventes	Chiffre d’affaires
Formation HTML	98	1 470,00 €
Formation CSS	123	2 337,00 €
Formation JavaScript	1 024	18 432,00 €

Regardons tranquillement.

La règle suivante cible les deuxième et troisième colonnes :

.tableau-ventes td:nth-child(2),
.tableau-ventes td:nth-child(3)

Ce sont les colonnes qui contiennent des nombres.

Puis on applique :

text-align: right;
font-variant-numeric: tabular-nums;

Le texte est aligné à droite, et les chiffres utilisent une largeur régulière.

C’est une petite amélioration, mais pour un tableau de données, elle change vraiment le confort de lecture.

👉 Pour aller plus loin : 5 Exemples de tableau responsive

Les principales valeurs de font-variant-numeric

La propriété font-variant-numeric ne sert pas uniquement à aligner des nombres. Elle peut aussi modifier l’apparence des fractions, des indices ou des zéros.

Voyons les valeurs les plus utiles.

tabular-nums

C’est la valeur que vous utiliserez le plus souvent pour aligner des nombres.

.chiffres {
  font-variant-numeric: tabular-nums;
}

Elle est idéale pour :

• prix
• factures
• statistiques
• scores
• tableaux
• interfaces admin
• dashboards
• compteurs

proportional-nums

Cette valeur demande à la police d’utiliser des chiffres proportionnels.

.texte {
  font-variant-numeric: proportional-nums;
}

Elle convient mieux dans un paragraphe classique, lorsque les nombres sont intégrés dans une phrase.

oldstyle-nums

Les chiffres “old style” ont des hauteurs différentes. Certains descendent légèrement sous la ligne, un peu comme les lettres g ou p.

.article {
  font-variant-numeric: oldstyle-nums;
}

Cela donne un style plus littéraire, plus éditorial. Pour un blog, cela peut être joli dans certains textes, mais ce n’est pas recommandé pour des tableaux de données.

lining-nums

Les chiffres “lining” ont tous la même hauteur et s’alignent bien sur la ligne de base.

.interface {
  font-variant-numeric: lining-nums;
}

C’est souvent le rendu le plus adapté aux interfaces modernes.

Vous pouvez aussi combiner plusieurs valeurs :

.montants {
  font-variant-numeric: lining-nums tabular-nums;
}

Ici, on demande des chiffres bien alignés verticalement et de largeur identique.

slashed-zero

Cette valeur affiche un zéro barré, si la police le permet.

.code {
  font-variant-numeric: slashed-zero;
}

C’est utile lorsqu’il faut distinguer clairement le chiffre 0 de la lettre O.

Par exemple :

<p class="code">Code : O0A10</p>

.code {
  font-family: monospace;
  font-variant-numeric: slashed-zero;
}

Dans un identifiant, une clé produit ou un code technique, cela peut éviter des erreurs de lecture.

diagonal-fractions

Cette valeur permet d’afficher certaines fractions de manière plus élégante.

.fraction {
  font-variant-numeric: diagonal-fractions;
}

Exemple :

<p class="fraction">Recette : 1/2 litre de lait</p>

Selon la police, 1/2 peut être affiché sous forme de fraction typographique.

Attention toutefois : toutes les polices ne gèrent pas cette fonctionnalité.

Combiner plusieurs options numériques

Vous pouvez écrire plusieurs valeurs dans la même propriété :

.valeurs-financieres {
  font-variant-numeric: lining-nums tabular-nums;
}

Cette règle est très intéressante pour les montants financiers :

• lining-nums donne des chiffres bien alignés verticalement.
• tabular-nums donne des chiffres de même largeur.

Ensemble, ils produisent un rendu propre et stable.

Voici un exemple plus complet :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

<div class="carte-finance">
  <p>Revenu : 2 450,00 €</p>
  <p>Dépenses : 1 890,50 €</p>
  <p>Solde : 559,50 €</p>
</div>

.carte-finance {
  max-width: 320px;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: system-ui, sans-serif;
}

.carte-finance p {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: lining-nums tabular-nums;
}

Ici, chaque ligne est affichée avec display: flex.

Le libellé part à gauche, le montant part à droite. Les chiffres, eux, restent bien réguliers.

Et font-feature-settings ?

La propriété font-feature-settings permet d’activer directement des fonctionnalités OpenType.

Elle est plus bas niveau que font-variant-numeric.

Dit autrement : 

font-variant-numeric est plus lisible et plus simple. font-feature-settings est plus technique, mais aussi plus précis.

Voici un exemple :

.prix {
  font-feature-settings: "tnum";
}

Le code "tnum" signifie “tabular numbers”, donc chiffres tabulaires.

C’est l’équivalent technique de :

.prix {
  font-variant-numeric: tabular-nums;
}

Pour un débutant, il vaut mieux retenir ceci :

• Quand c’est possible, utilisez font-variant-numeric.
• Gardez font-feature-settings pour les cas où vous avez besoin d’un contrôle plus précis ou d’une compatibilité particulière.

Les codes OpenType utiles

Avec font-feature-settings, on utilise des codes de quatre caractères.

Voici les plus courants pour les nombres :

.exemple {
  font-feature-settings: "tnum";
}

"tnum" active les chiffres tabulaires.

.exemple {
  font-feature-settings: "pnum";
}

"pnum" active les chiffres proportionnels.

.exemple {
  font-feature-settings: "lnum";
}

"lnum" active les chiffres alignés, appelés “lining numbers”.

.exemple {
  font-feature-settings: "onum";
}

"onum" active les chiffres old style.

.exemple {
  font-feature-settings: "zero";
}

"zero" active le zéro barré, si la police le prend en charge.

Vous pouvez aussi combiner plusieurs fonctionnalités :

.montant {
  font-feature-settings: "lnum", "tnum";
}

Ici, on demande des chiffres alignés et tabulaires.

font-variant-numeric ou font-feature-settings ?

Dans la majorité des cas, choisissez font-variant-numeric.

La syntaxe est plus claire :

.montant {
  font-variant-numeric: tabular-nums;
}

Elle est aussi plus facile à comprendre quand vous relisez votre code trois mois plus tard…

font-feature-settings, de son côté, ressemble davantage à une commande envoyée directement à la police :

.montant {
  font-feature-settings: "tnum";
}

C’est puissant, mais moins parlant pour un débutant.

Une bonne pratique consiste à écrire :

.montant {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

Pourquoi mettre les deux ?

Cela peut servir de solution de secours. Le navigateur utilisera la propriété qu’il comprend le mieux. Dans la plupart des projets modernes, font-variant-numeric suffit largement, mais cette double déclaration peut rassurer sur des interfaces importantes.

Exemple complet : une mini facture en HTML et CSS

Créons maintenant une petite facture.

Voici le HTML :

<section class="facture">
  <h2>Facture</h2>

  <div class="ligne">
    <span>Création page web</span>
    <strong>450,00 €</strong>
  </div>

  <div class="ligne">
    <span>Optimisation SEO</span>
    <strong>180,00 €</strong>
  </div>

  <div class="ligne">
    <span>Maintenance</span>
    <strong>90,00 €</strong>
  </div>

  <div class="ligne total">
    <span>Total</span>
    <strong>720,00 €</strong>
  </div>
</section>

Et le CSS :

.facture {
  max-width: 420px;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 16px;
  font-family: system-ui, sans-serif;
}

.facture h2 {
  margin-top: 0;
}

.ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #eee;
}

.ligne strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.total {
  margin-top: 0.5rem;
  border-bottom: none;
  font-size: 1.2rem;
}

Dans cet exemple, la propriété importante se trouve ici :

.ligne strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

On ne l’applique pas à toute la facture, seulement aux montants.

C’est souvent une bonne approche : vous ciblez précisément les zones numériques, sans modifier inutilement le reste du texte.

Exemple avec un compteur

Autre cas très courant : un compteur.

Imaginez un compteur de vues, de points ou de téléchargements.

<div class="compteur">
  <span class="label">Téléchargements</span>
  <span class="nombre">12890</span>
</div>

.compteur {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  border-radius: 12px;
  background: #f5f5f5;
  font-family: system-ui, sans-serif;
}

.nombre {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

Avec tabular-nums, le compteur sera plus stable visuellement si le nombre change.

Par exemple, lorsqu’un compteur passe de 1999 à 2000, la largeur peut changer si les chiffres sont proportionnels. Avec des chiffres tabulaires, l’effet de “saut” est réduit.

C’est particulièrement utile pour les interfaces dynamiques.

Exemple avec une grille de statistiques

Prenons maintenant une petite grille de statistiques.

<div class="dashboard">
  <article>
    <span>Visiteurs</span>
    <strong>4 782</strong>
  </article>

  <article>
    <span>Pages vues</span>
    <strong>18 940</strong>
  </article>

  <article>
    <span>Taux conversion</span>
    <strong>3,42 %</strong>
  </article>
</div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  font-family: system-ui, sans-serif;
}

.dashboard article {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 14px;
}

.dashboard span {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
}

.dashboard strong {
  font-size: 1.8rem;
  font-variant-numeric: lining-nums tabular-nums;
}

Ici, les chiffres sont mis en avant. On applique donc une variante numérique propre, régulière et adaptée aux interfaces. Le résultat est plus professionnel, sans ajouter une seule ligne de JavaScript.

Et entre nous, quand CSS peut éviter du JavaScript inutile, il mérite presque une petite médaille.

La police doit supporter ces options

Point important : font-variant-numeric et font-feature-settings dépendent de la police utilisée.

Si la police ne contient pas de chiffres tabulaires, le navigateur ne pourra pas les inventer parfaitement. C’est un peu comme demander à quelqu’un une clé de 12 alors qu’il n’a qu’un tournevis. Il peut être plein de bonne volonté, mais ça ne suffira pas.

Pour de bons résultats, utilisez des polices de qualité. Les polices système modernes fonctionnent souvent correctement :

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Vous pouvez aussi tester votre police directement dans le navigateur.

Le plus simple reste d’afficher plusieurs lignes de nombres, puis de comparer le rendu avec et sans tabular-nums.

Où utiliser ces propriétés ?

Vous pouvez utiliser font-variant-numeric dès qu’une zone affiche des données numériques. Par exemple, dans un site e-commerce :

.price,
.cart-total,
.invoice-amount {
  font-variant-numeric: tabular-nums;
}

Dans une interface d’administration :

.stat-number,
.analytics-value,
.orders-count {
  font-variant-numeric: lining-nums tabular-nums;
}

Dans un tableau :

td.number,
td.amount,
td.percent {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

L’idée n’est pas d’en mettre partout. L’idée est d’en mettre là où la lisibilité des nombres compte vraiment.

Bonne pratique : créer une classe utilitaire

Si vous utilisez souvent cette règle, vous pouvez créer une petite classe réutilisable.

.numeric {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

Puis dans votre HTML :

<p class="numeric">1 248,90 €</p>

Ou dans un tableau :

<td class="numeric">98,45 %</td>

Cette classe devient une sorte de raccourci pratique. Vous pouvez l’utiliser dans vos prix, vos statistiques, vos totaux ou vos compteurs. Pour un projet réel, c’est propre, simple et facile à maintenir.

Erreur fréquente : confondre alignement du texte et alignement des chiffres

text-align: right et font-variant-numeric: tabular-nums ne font pas la même chose.

text-align: right aligne le contenu contre le bord droit.

td {
  text-align: right;
}

font-variant-numeric: tabular-nums rend les chiffres réguliers en largeur.

td {
  font-variant-numeric: tabular-nums;
}

Pour un beau tableau de nombres, vous avez souvent besoin des deux.

td.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

1. Le premier place les valeurs correctement.
2. Le second rend les chiffres plus stables visuellement.

C’est un duo simple, mais très efficace.

Erreur fréquente : appliquer font-feature-settings partout

font-feature-settings est puissant, mais il ne faut pas l’utiliser comme une baguette magique universelle.

Évitez ceci :

* {
  font-feature-settings: "tnum";
}

Parce que cela applique les chiffres tabulaires partout, même dans les paragraphes où les chiffres proportionnels seraient plus agréables.

Préférez une approche ciblée :

.price,
.amount,
.stat,
.counter {
  font-variant-numeric: tabular-nums;
}

Votre CSS reste plus propre et plus logique.

Compatibilité et approche progressive

Dans un site moderne, vous pouvez utiliser font-variant-numeric sans trop d’inquiétude.

Mais gardez une idée importante en tête : si le navigateur ou la police ne supporte pas une option, l’affichage restera simplement classique. Ce n’est pas une fonctionnalité dangereuse. Elle améliore le rendu quand elle est disponible, sans casser votre mise en page si elle ne l’est pas.

• C’est ce qu’on appelle une amélioration progressive.

Votre site fonctionne normalement. Et quand le navigateur peut faire mieux, il le fait.

Un exemple final complet

Voici un exemple complet regroupant plusieurs bonnes pratiques.

<section class="rapport">
  <h2>Rapport mensuel</h2>

  <table>
    <thead>
      <tr>
        <th>Indicateur</th>
        <th>Valeur</th>
        <th>Évolution</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Visiteurs</td>
        <td class="numeric">12 480</td>
        <td class="numeric">+8,40 %</td>
      </tr>

      <tr>
        <td>Ventes</td>
        <td class="numeric">342</td>
        <td class="numeric">+2,15 %</td>
      </tr>

      <tr>
        <td>Chiffre d’affaires</td>
        <td class="numeric">18 920</td>
        <td class="numeric">+11,70 %</td>
      </tr>
    </tbody>
  </table>
</section>

.rapport {
  max-width: 720px;
  font-family: system-ui, sans-serif;
}

.rapport table {
  width: 100%;
  border-collapse: collapse;
}

.rapport th,
.rapport td {
  padding: 0.8rem;
  border-bottom: 1px solid #ddd;
}

.rapport th {
  text-align: left;
}

.rapport .numeric {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

Rapport mensuel

Indicateur	Valeur	Évolution
Visiteurs	12 480	+8,40 %
Ventes	342	+2,15 %
Chiffre d’affaires	18 920	+11,70 %

Ce code est simple, lisible et réutilisable. La classe .numeric permet de traiter toutes les valeurs numériques de la même façon. Vous gardez ainsi un design cohérent sur l’ensemble de votre interface.

---

FAQ

---

Aligner des nombres en CSS peut sembler être un détail minuscule. Pourtant, dès que vous travaillez sur des prix, des statistiques, des tableaux ou des interfaces d’administration, ce détail devient très visible.

Avec font-variant-numeric, vous disposez d’une propriété claire, moderne et agréable à utiliser. Elle vous permet d’activer facilement les chiffres tabulaires avec tabular-nums, d’améliorer la lisibilité des montants, et de donner un rendu plus professionnel à vos données.

font-feature-settings, de son côté, vous offre un contrôle plus précis sur les fonctionnalités OpenType. Il est un peu plus technique, mais très utile lorsque vous souhaitez aller plus loin ou renforcer la compatibilité.

Le meilleur conseil reste simple : testez. Prenez un tableau de prix, ajoutez font-variant-numeric: tabular-nums;, alignez vos nombres à droite, puis observez la différence. Vous verrez que parfois, une seule ligne de CSS peut transformer une interface un peu brouillonne en affichage net, stable et agréable à lire.