font-variant-numeric (tabular-nums) în CSS

font-variant-numeric: tabular-nums;     /* cifre de lățime egală */
font-variant-numeric: oldstyle-nums;
font-variant-numeric: slashed-zero;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: tabular-nums slashed-zero;

Ce face font-variant-numeric (tabular-nums)

Multe fonturi au cifre proporționale: „1” este mai îngust decât „8”. În tabele, prețurile și cronometrele nu mai sunt aliniate pe coloane, iar un număr care se schimbă „tremură” pe ecran. tabular-nums dă tuturor cifrelor aceeași lățime.

Proprietatea activează funcții OpenType ale fontului. Dacă fontul nu are varianta cerută (de exemplu cifre tabelare sau fracții), textul arată neschimbat. Fonturile de sistem moderne și multe fonturi web (Inter, Roboto) au tabular-nums.

Valori uzuale

Valoare	Descriere
normal	Cifrele implicite ale fontului.
tabular-nums / proportional-nums	Cifre de lățime egală / lățime naturală.
lining-nums / oldstyle-nums	Cifre de înălțimea majusculelor / cifre „de text”, cu urcări și coborâri.
diagonal-fractions / stacked-fractions	1/2 desenat ca fracție cu bară oblică / cu bară orizontală.
slashed-zero	Zero tăiat, ușor de deosebit de litera O.
ordinal	Forme ordinale (sufix ridicat), dacă fontul le are.

Exemple

Exemplul 1: Coloană de prețuri aliniată

Cu cifre tabelare și aliniere la dreapta, sumele se citesc ușor pe coloană.

.tabel-preturi td.pret {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

Efect vizual în browser

Valorile 1 111,00 lei, 89,90 lei și 7 488,50 lei sunt aliniate perfect: virgulele și cifrele unităților stau una sub alta.

Exemplul 2: Cod de reducere fără confuzie între 0 și O

Zero tăiat ajută la codurile pe care utilizatorul le copiază de mână.

.cod-reducere {
  font-family: ui-monospace, monospace;
  font-variant-numeric: slashed-zero;
  letter-spacing: 0.1em;
}

Efect vizual în browser

Codul „IASI2026OFF” apare cu zero-ul tăiat cu o linie, deci se vede clar diferența față de litera O de la final.

Greșeli frecvente

• Folosirea unui font monospațiat pentru tot tabelul doar ca să alinieze cifrele; tabular-nums păstrează fontul site-ului.
• Așteptarea unui efect la fonturi care nu au funcțiile OpenType respective; verifică fontul înainte (de exemplu în pagina lui de prezentare).

Comenzi înrudite

• font-family: Stabilește familia de fonturi folosită pentru afișarea textului, cu variante de rezervă (fallback).
• text-align: Aliniază textul și elementele inline din interiorul unui bloc (la stânga, centrat, la dreapta sau justificat).
• text-transform: Afișează textul cu majuscule, minuscule sau cu prima literă mare la fiecare cuvânt, fără să schimbe textul din HTML.