Cómo alinear perfectamente numerales usando CSS
¡Importante! Es muy posible que no veas este ejemplo bien, el soporte de OpenType es todavía muy precario.
Al diseñar un elemento que usa números (como un cronómetro) en una tipografía no monoespaciada, es normal que la anchura del número varíe al ser diferente las anchuras de las cifras que lo componen. Por ejemplo:
121416 es más estrecho que
234567
...debido a la presencia de varios "1" en la primera cadena.
Esto provocará un feo efecto en un contador (de tiempo, de visitas, etc).
y aunque no es tan grave, también queda mal en tablas:
| Concepto I | 12312 |
| Concepto II | 99876 |
Para solucionar esto podemos beneficiarnos de la fantástica y poco conocida propiedad CSS font-variant-numeric. Esta propiedad permite aplicar a números y cifras varias modificaciones tipográficas, entre las que destaca tabular-nums .
.numeral {
font-variant-numeric: tabular-nums;
}
Con esta simple línea de CSS, las cifras igualan su anchura. La tipografía, que no es monoespaciada, se comporta como si lo fuera y soluciona estos problemas tan comunes.
| Concepto I | 12312 |
| Concepto II | 99876 |
font-variant-numeric y opentype
Para que los valores de font-variant-numeric tengan efecto, es importante que la tipografía en uso implemente las características de OpenType necesarias.
En los ejemplos de esta página usamos Montserrat, que incluye variantes para los numerales. Aunque todavía no es mayoritario, cada vez es más común que las fuentes implementen características OpenType.