Tabular numbers in financial interfaces
In a banking app, the number is the interface. When a balance updates and the digits jump around, users sense something is off before they even read the value.
Most typefaces default to proportional figures: the 1 is narrow, the 0 is wide. Great for running text, terrible for columns.
See the difference
R$ 12.480,50+ R$ 1.111,11− R$ 808,00
The balance ticks every second. Toggle and watch the width.
How to apply it
One line of CSS does it. Use it on balances, tables, timers and anything that updates live.
.amount {
font-variant-numeric: tabular-nums;
}When not to
In headlines and single numbers inside a sentence, proportional figures look better. The rule: if the number changes or lines up with others, go tabular.