CSS Font-Variant-Numeric Enhance Web Typography

Introduction

The font-variant-numeric property in CSS lets you control how numeric characters look in your font. It helps you pick different styles for numbers, fractions, and ordinal markers (like 1st, 2nd). This makes your web pages look better and easier to read. It’s been around since January 2020 and works well across many devices and browsers.

Specification

The font-variant-numeric property is defined in the CSS Fonts Module Level 4 specification. This guide tells you how to use alternate glyphs for numbers, fractions, and ordinal markers. By following this specification, you can make sure your web pages look good and work well across different browsers.

Description

The font-variant-numeric property gives you control over how numbers look in your text. You can choose different styles like lining numbers (where digits align with the baseline) or old-style numbers (where some digits have descenders). You can also use proportional and tabular numbers, diagonal and stacked fractions, and special glyphs for ordinal markers and slashed zeros.

This property is great for making your web design look professional and organized. For example, old-style numbers can give a traditional look, while tabular numbers help align columns of numbers in tables.

Syntax

The font-variant-numeric property can take one or more values, separated by spaces. Here’s the basic syntax:

font-variant-numeric: value;

Valid Values

• normal: Turns off alternate glyphs for numbers, fractions, and ordinal markers.
• ordinal: Uses special glyphs for ordinal markers (like 1st, 2nd).
• slashed-zero: Uses a zero with a slash to distinguish it from the letter O.
• <numeric-figure-values>: Controls the style of numbers:
  • lining-nums: Aligns numbers with the baseline.
  • oldstyle-nums: Uses old-style figures with descenders.
• <numeric-spacing-values>: Controls the spacing of numbers:
  • proportional-nums: Uses numbers of different sizes.
  • tabular-nums: Uses numbers of the same size for easy alignment.
• <numeric-fraction-values>: Controls the style of fractions:
  • diagonal-fractions: Uses fractions with a slash.
  • stacked-fractions: Stacks fractions vertically.
• Global Values:
  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its default value.
  • revert: Reverts the property to its default value as defined by the user agent.
  • revert-layer: Reverts the property to its value in the next outer CSS layer.
  • unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Example Syntax

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Values

The font-variant-numeric property can take several values, each controlling a specific aspect of numeric character display. Here’s what each value does:

normal

• Description: Turns off alternate glyphs for numbers, fractions, and ordinal markers.
• Usage: Use normal to revert to default numeric styles.

ordinal

• Description: Uses special glyphs for ordinal markers (like 1st, 2nd).
• Usage: Use ordinal to display ordinal markers with special glyphs.

slashed-zero

• Description: Uses a zero with a slash to distinguish it from the letter O.
• Usage: Use slashed-zero to ensure clarity between O and 0.

<numeric-figure-values>

These values control the style of numbers:

• lining-nums
  • Description: Aligns numbers with the baseline.
  • Usage: Use lining-nums for a uniform appearance of numbers.
• oldstyle-nums
  • Description: Uses old-style figures with descenders.
  • Usage: Use oldstyle-nums for a traditional look.

<numeric-spacing-values>

These values control the spacing of numbers:

• proportional-nums
  • Description: Uses numbers of different sizes.
  • Usage: Use proportional-nums for a natural and varied appearance of numbers.
• tabular-nums
  • Description: Uses numbers of the same size for easy alignment.
  • Usage: Use tabular-nums for consistent alignment in tables and columns.

<numeric-fraction-values>

These values control the style of fractions:

• diagonal-fractions
  • Description: Uses fractions with a slash.
  • Usage: Use diagonal-fractions for a compact representation of fractions.
• stacked-fractions
  • Description: Stacks fractions vertically.
  • Usage: Use stacked-fractions for a vertical and organized representation of fractions.

Global Values

The following global values can also be used with the font-variant-numeric property:

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value.
• revert: Reverts the property to its default value as defined by the user agent.
• revert-layer: Reverts the property to its value in the next outer CSS layer.
• unset: Resets the property to its inherited value if it inherits, or to its initial value if not.

Examples

Here are some practical examples demonstrating how to use the font-variant-numeric property in CSS to control the appearance of numeric characters:

Setting Ordinal Numeric Forms

In this example, we use the ordinal value to display ordinal markers with special glyphs, such as 1st, 2nd, 3rd, and 4th.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordinal Numeric Forms</title>
    <style>
        .ordinal {
            font-variant-numeric: ordinal;
        }
    </style>
</head>
<body>
    <p>Ordinal numbers: <span class="ordinal">1st, 2nd, 3rd, 4th</span></p>
</body>
</html>

Output: The text “1st, 2nd, 3rd, 4th” will be displayed with special glyphs for the ordinal markers.

Using Lining and Oldstyle Numbers

This example demonstrates the use of lining-nums and oldstyle-nums to control the style of numbers.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lining and Oldstyle Numbers</title>
    <style>
        .lining-nums {
            font-variant-numeric: lining-nums;
        }
        .oldstyle-nums {
            font-variant-numeric: oldstyle-nums;
        }
    </style>
</head>
<body>
    <p>Lining numbers: <span class="lining-nums">1234567890</span></p>
    <p>Oldstyle numbers: <span class="oldstyle-nums">1234567890</span></p>
</body>
</html>

Output: The numbers “1234567890” will be displayed with lining figures in the first paragraph and old-style figures in the second paragraph.

Displaying Proportional and Tabular Numbers

This example shows how to use proportional-nums and tabular-nums to control the spacing of numbers.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proportional and Tabular Numbers</title>
    <style>
        .proportional-nums {
            font-variant-numeric: proportional-nums;
        }
        .tabular-nums {
            font-variant-numeric: tabular-nums;
        }
    </style>
</head>
<body>
    <p>Proportional numbers: <span class="proportional-nums">1234567890</span></p>
    <p>Tabular numbers: <span class="tabular-nums">1234567890</span></p>
</body>
</html>

Output: The numbers “1234567890” will be displayed with proportional figures in the first paragraph and tabular figures in the second paragraph.

Displaying Diagonal and Stacked Fractions

This example demonstrates the use of diagonal-fractions and stacked-fractions to control the style of fractions.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diagonal and Stacked Fractions</title>
    <style>
        .diagonal-fractions {
            font-variant-numeric: diagonal-fractions;
        }
        .stacked-fractions {
            font-variant-numeric: stacked-fractions;
        }
    </style>
</head>
<body>
    <p>Diagonal fractions: <span class="diagonal-fractions">1/2, 3/4</span></p>
    <p>Stacked fractions: <span class="stacked-fractions">1/2, 3/4</span></p>
</body>
</html>

Output: The fractions “1/2, 3/4” will be displayed with diagonal fractions in the first paragraph and stacked fractions in the second paragraph.

Using Slashed Zero

This example shows how to use the slashed-zero value to distinguish between the letter O and the number 0.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slashed Zero</title>
    <style>
        .slashed-zero {
            font-variant-numeric: slashed-zero;
        }
    </style>
</head>
<body>
    <p>Slashed zero: <span class="slashed-zero">0123456789</span></p>
</body>
</html>

Output: The number “0123456789” will be displayed with a zero that has a slash through it.

Browser Compatibility

The font-variant-numeric property is widely supported across many devices and browser versions, making it a reliable choice for modern web development and design. This feature has been available across browsers since January 2020, ensuring consistent and standardized implementation across different platforms.

Here’s a summary of the browser compatibility for the font-variant-numeric property:

• Google Chrome: Supported since version 52.
• Microsoft Edge: Supported since version 79.
• Mozilla Firefox: Supported since version 34.
• Opera: Supported since version 39.
• Safari: Supported since version 9.1.

This broad compatibility ensures that web developers can confidently use the font-variant-numeric property to enhance the typographic design of their web pages, knowing that it will work seamlessly across a wide range of browsers and devices.

See Also

If you found the font-variant-numeric property useful, you might also be interested in exploring other CSS properties that provide control over font variations and typographic styles. Here are some related properties that can help you enhance the visual presentation of text on your web pages:

• font-variant: This property allows you to control various aspects of the font, including small caps, alternate glyphs, and other stylistic variations.
• font-variant-alternates: This property enables the use of alternate glyphs for specific characters, providing more customization options for typography.
• font-variant-caps: This property controls the usage of small caps, all caps, and other capitalization variations.
• font-variant-east-asian: This property is specifically designed for controlling the typographic features of East Asian scripts, such as ruby annotations and vertical text.
• font-variant-emoji: This property allows you to control the presentation of emojis, including text and emoji variations.
• font-variant-ligatures: This property enables the use of ligatures, which are special characters that combine two or more letters into a single glyph.
• font-variant-position: This property controls the positioning of glyphs, such as subscript and superscript.

By exploring these related properties, you can gain more control over the typographic design of your web pages, creating visually appealing and functionally effective content. These properties, along with font-variant-numeric, offer a comprehensive set of tools for enhancing the visual presentation of text in web development and design.

For more detailed information and examples, you can refer to the documentation for each of these properties on the MDN Web Docs or other reliable web development resources.