Numeric Features in OpenType Fonts: A Web Developer’s Guide

Numeric Features in OpenType Fonts: Overview and Implementation

There are numerous OpenType features related to figures (commonly referred to as numbers). These come in handy when designing documents that make heavy use of figures such as for mathematics and accounting, but they’re also useful for general text documents where you want the figures to appear harmoniously within running text.

To use these features, you can use the CSS properties font-variant-numeric and font-variant-position, or the shorthand font-variant. While you can also use font-feature-settings, this is not recommended by MDN, which states that the font-variant properties give more “effective, predictable, understandable results”.

These features make use of OpenType substitution. Some features are single substitution, such as when a standard zero is replaced by a slashed zero. Others are multiple character substitutions, while more complex features like fractions are contextual. This means that specific sequences of glyphs are automatically replaced by a sequence of one or more different glyphs.

Diagonal (Arbitrary) Fractions

CSS property: font-variant-numeric: diagonal-fractions
OpenType property: frac

Most typefaces include pre-made glyphs for commonly used fractions, such as ½ and ¼. However, the diagonal fractions feature in OpenType can produce nicely-formatted fractions for any combination of numbers. Here is an example with Playfair:

Notice that the standard forward slash has been replaced by a diagonal fraction bar, the figures have been reduced in size, and the kerning between the bar and figures has been automatically adjusted.

The ability of a typeface to produce a fraction like this for any combination of numbers is sometimes referred to as arbitrary fractions.

Sometimes, a typeface won’t have true arbitrary fraction support, but will only substitute with premade glyphs that are available. For example, the font Domine will only do substitution for a limited selection of premade fractions such as 1/2, 1/3, 2/3, 3/4, and 5/8.

List of fonts with fractions

Lining figures

CSS property: font-variant-numeric: lining-nums;
OpenType property: lnum

Lining figures are numbers that are the same height as the uppercase characters in a typeface. Many families use lining figures by default, while others have oldstyle as the default. Serif typefaces will frequently have oldstyle figures. For example, Playfair defaults to oldstyle figures, but using lining-nums gives you full height figures. This is often desirable for use in headlines or tables of numbers.

List of fonts with lining figures

Oldstyle figures

CSS property: font-variant-numeric: oldstyle-nums;
OpenType property: onum

Oldstyle figures are numbers that may have descenders, and are designed to pair well with lowercase letters in running text. Because of this, they are also referred to as text figures.

Lato, like many sans serif fonts, has lining figures by default, but it is also designed with oldstyle figures as an option:

List of fonts with oldstyle figures

Ordinals

CSS property: font-variant-numeric: ordinal;
OpenType property: ordn

An ordinal is a number within a series. With OpenType fonts, the ordinals feature refers to glyphs that indicate the position of a number in a series. This is called an ordinal indicator.

With many OpenType families, ordinals are substituted only with a limited set of premade glpyhs, while other families have a more complete set. For example, enabling ordinals with Lato will superscript any lowercase character so that you can create the following ordinal indicators:

Playfair has a more limited set of ordinals, including indicators used in non-English languages and the ordinal shorthand for “number”, which is substituted for the exact combination of “No.”

Note that “no.” with a lowercase n does not trigger the OpenType substitution.

List of fonts with ordinals

Proportional and Tabular Figures

CSS property: font-variant-numeric: proportional-nums and font-variant-numeric: tabular-nums
OpenType property: pnum and tnum

Proportional figures have varying widths, while tabular figures have a fixed width. For running text, proportional figures will usually be the better choice, while tabular figures are suited to situations where you need columns of numbers to line up, such as in financial tables.

List of fonts with proportional numbers
List of fonts with tabular numbers

Slashed Zero

CSS property: font-variant-numeric: slashed-zero
OpenType property: zero

With many typefaces, it’s difficult to disambiguate an uppercase or lowercase O from a zero. Slashed zeros make this easier.

Notice that in Playfair, the zero and lowercase o look nearly identical.

List of fonts with slashed zeros

Subscript and Superscript

CSS property: font-variant-position: sub and font-variant-position: super
OpenType property: subs and sups

In typography, superscripts are also referred to as superiors, and subscripts can be called inferiors. Even though superscripts and subscripts aren’t directly related to the display of figures, they are often used in mathematical and scientific contexts, so we’ve included them here. Note that the CSS property for these is font-variant-position.

List of fonts with subscripts
List of fonts with superscripts