Elevate the readability and consistency of numerical data in your UI by leveraging CSS's font-variant-numeric property. This powerful CSS feature allows you to control the display of digits, fractions, and ordinal markers, ensuring better alignment and visual harmony, especially in tables, dashboards, or any data-rich interfaces. By choosing between lining and old-style figures, and managing tabular or proportional spacing, you can significantly reduce cognitive load and enhance the overall user experience.
/* Apply old-style proportional figures for body text */
.body-text {
font-variant-numeric: old-style;
}
/* Ensure tabular lining figures for data display (e.g., tables, prices) */
.data-display {
font-variant-numeric: tabular-nums lining-nums;
/* Equivalent to font-feature-settings: "tnum", "lnum"; */
}
/* Use slashed zeros for clarity in code or data */
.code-block {
font-variant-numeric: slashed-zero;
}