Números tabulares em interfaces financeiras
Num app de banco, o número é a interface. Quando um saldo atualiza e os dígitos pulam de lugar, o usuário sente que algo está errado antes mesmo de ler o valor.
A maioria das fontes usa algarismos proporcionais por padrão: o 1 é estreito, o 0 é largo. Ótimo para texto corrido, péssimo para colunas.
Veja a diferença
R$ 12.480,50+ R$ 1.111,11− R$ 808,00
O saldo muda sozinho a cada segundo. Alterne e repare na largura.
Como aplicar
Uma linha de CSS resolve. Aplique em saldos, tabelas, timers e qualquer valor que muda em tempo real.
.amount {
font-variant-numeric: tabular-nums;
}Quando não usar
Em títulos e números isolados dentro de uma frase, os algarismos proporcionais ficam mais bonitos. A regra: se o número muda ou se alinha com outros, tabular.