CSS font-variant-numeric Property

The font-variant-numeric property controls which numeric glyph shapes and spacing behaviors a user agent chooses from a font’s typographic features — for example, whether digits are treated as uniform-width for table alignment, proportionally spaced for running text, or replaced with old-style figures that blend with lowercase letterforms. It is a high-level, author-friendly way to request those number-related OpenType features without dealing directly with low-level feature tags. Because it operates at the typographic-feature level, its effect is visible in both glyph selection (which character outlines are used) and text metrics (widths and vertical alignment), which can change layout and visual rhythm.

This property is typically used where the visual role of numeric text differs from surrounding content: numeric columns or financial tables benefit from uniform-width digits for clear alignment, while body text may look more harmonious with proportional or old-style digits. It also influences how fractions and ordinal markers are rendered when the font offers specialized fraction or superscript/subscript glyphs, improving legibility and professional appearance. When a requested variant is not available in the chosen font, the user agent will fall back — either to the font’s default glyphs or to an alternative font — so visual results depend on the fonts specified via font-family and their feature support.

At the implementation level, font-variant-numeric maps to specific OpenType features; authors who need granular, feature-by-feature control can use the lower-level font-feature-settings, while the broader typographic grouping is also reachable through the shorthand font-variant. Keep in mind that enabling different numeric variants can affect text measurement and line layout — changing digit widths alters line breaks, justification, and column alignment — so it’s best to choose variants deliberately based on content type (tables, UI counters, running prose) and test with the actual fonts being used.

Finally, consider typographic consistency and accessibility: numeric variants that improve machine-readable alignment also help sighted users scan and compare figures quickly, whereas more decorative variants may improve aesthetics at the cost of compactness or alignment. When designing interfaces or documents where numbers carry meaning (financial data, dates, measurements), explicitly requesting appropriate numeric variants leads to clearer, more predictable presentation across platforms — provided the chosen fonts include the necessary typographic features.