CSS: Font-Variant-Numeric - Using Numeric Glyph Variants

The font-variant-numeric property in CSS provides advanced typographic control over numeric glyphs. This property allows developers to specify different styles of numbers, such as oldstyle figures, lining figures, proportional figures, and tabular figures. These styles are often used in professional typesetting to improve readability and visual appeal, particularly in contexts like financial reports, tables, and design-oriented websites.

Using numeric glyph variants can enhance the aesthetic quality and clarity of numeric data. By leveraging the font-variant-numeric property, developers can tailor the presentation of numbers to match the overall design of their content, ensuring consistency and improving user experience. In this article, we will explore the font-variant-numeric property in detail, starting with a basic setup and moving on to practical examples demonstrating its usage.

Table of Contents

Basic Setup

Before we dive into the details of the font-variant-numeric property, let’s set up a basic example to demonstrate its functionality. We’ll create a simple HTML structure with some CSS to define our text elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Variant-Numeric Example</title>

    <style>

        .text {
            font-family: Arial, sans-serif;
            font-size: 20px;
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }

    </style>

</head>
<body>

    <div class="text">
        This is a sample text with default numeric glyphs: 1234567890.
    </div>

</body>
</html>

In this code, we define a <div> element with the class text. The CSS sets the font-family to Arial and the font-size to 20px. This basic setup provides a foundation for exploring the font-variant-numeric property.

Understanding the `font-variant-numeric` Property

The font-variant-numeric property in CSS allows you to control the use of different numeric glyph styles. The property can take several keyword values to specify different types of numeric variants. The syntax for font-variant-numeric is:

element {
    font-variant-numeric: value;
}

Where value can include:

normal: The default value, displaying numbers in the font’s normal style.
ordinal: Uses glyphs for ordinal markers.
slashed-zero: Uses a slashed zero glyph to distinguish ‘0’ from ‘O’.
lining-nums: Uses lining (modern) figures.
oldstyle-nums: Uses oldstyle (traditional) figures.
proportional-nums: Uses proportional spacing for figures.
tabular-nums: Uses tabular (monospaced) spacing for figures.
diagonal-fractions: Uses diagonal fractions.
stacked-fractions: Uses stacked fractions.

Practical Examples of `font-variant-numeric`

Let’s explore practical examples of using the font-variant-numeric property in different scenarios.

Using Lining Figures

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Variant-Numeric Example</title>

    <style>

        .text-lining {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-variant-numeric: lining-nums;
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
        }

    </style>

</head>
<body>

    <div class="text-lining">
        This is a sample text with lining figures: 1234567890.
    </div>

</body>
</html>

In this example, the font-variant-numeric property is set to lining-nums for the .text-lining class. This ensures that the text is displayed using lining figures, which align evenly on the baseline, giving a modern and clean appearance.

Using Oldstyle Figures

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Variant-Numeric Example</title>

    <style>

        .text-oldstyle {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-variant-numeric: oldstyle-nums;
            margin: 10px;
            padding: 10px;
            background-color: #e0e0e0;
        }

    </style>

</head>
<body>

    <div class="text-oldstyle">
        This is a sample text with oldstyle figures: 1234567890.
    </div>

</body>
</html>

In this example, the font-variant-numeric property is set to oldstyle-nums for the .text-oldstyle class. This ensures that the text is displayed using oldstyle figures, which vary in height and have descenders, providing a more traditional and elegant look.

Using Tabular Figures

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Variant-Numeric Example</title>

    <style>

        .text-tabular {
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-variant-numeric: tabular-nums;
            margin: 10px;
            padding: 10px;
            background-color: #d0d0d0;
        }

    </style>

</head>
<body>

    <div class="text-tabular">
        This is a sample text with tabular figures: 1234567890.
    </div>

</body>
</html>

In this example, the font-variant-numeric property is set to tabular-nums for the .text-tabular class. This ensures that the text is displayed using tabular figures, which are monospaced, making them ideal for aligning numbers in tables.

Combining Numeric Variants with Other Properties

The font-variant-numeric property can be combined with other font properties to achieve more sophisticated typographic effects. Let’s see an example where we combine numeric variants with other font settings.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font-Variant-Numeric Example</title>

    <style>

        .text {
            font-family: 'Verdana', sans-serif;
            font-size: 20px;
            font-variant-numeric: proportional-nums;
            font-weight: bold;
            font-style: italic;
            margin: 10px;
            padding: 10px;
            background-color: #c0c0c0;
        }

    </style>

</head>
<body>

    <div class="text">
        This is a sample text with proportional figures, bold weight, and italic style: 1234567890.
    </div>

</body>
</html>

In this example, the .text class combines font-variant-numeric: proportional-nums; with font-weight: bold; and font-style: italic;. This ensures that the text is styled with proportional figures, bold weight, and italic style, creating a distinctive and readable typographic style.

Conclusion

The font-variant-numeric property in CSS is a versatile tool for applying various numeric glyph styles to text, such as lining figures, oldstyle figures, proportional figures, and tabular figures. By using this property, developers can enhance the visual appeal and readability of numeric data, creating a more polished and professional look. The font-variant-numeric property offers a range of values that cater to different typographic needs, from traditional and modern figures to monospaced and proportional figures.

Experimenting with different numeric variants and combining them with other font properties allows for the creation of sophisticated and visually engaging webpages. The examples provided in this article serve as a foundation, encouraging further exploration and creativity in using the font-variant-numeric property to design responsive and user-friendly webpages.