Can you specify tabular lining figures for webfonts?

Question

Since it's possible to specify lining and oldstyle figures I'm hoping there's browser support for tabular numerals with webfonts?##

• Left: default numerals
• Right: desired tabular numerals (notice monospaced)

Font: Brandon Grotesque

Related: Is there a way to specify the use of text or titling figures in CSS?

Answer 1

Simply, yes.

Presently you can use the attribute "font-feature-settings" in its prefixed forms and add "tnum" to the value list (example) to access tabular numerals in OpenType enabled fonts:

font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';

Check caniuse to see if the prefixed versions are still needed.

Note, if you are using Typekit to serve your webfonts, make sure to select "All Characters" under Language Support.

Answer 2

I think this is recommended way to access this OpenType feature (font-feature-settings: 'tnum' from Mark Fox's answer):

font-variant-numeric: tabular-nums;

I can't find anything at http://caniuse.com/#search=font-variant-numeric yet so stick with Mark's answer until browser support can be better determined.

Answer 3

While it is possible to specify tabular numerals there is no guarantee that the end user's browser supports the tnum property.

The State of Web Type keeps track of which browsers support these (and other) advanced typographic features.

As of this writing tnum is supported by:

• Chrome v.33-41
• Firefox v.4-39
• Internet Explorer v.10-11
• Opera v.15-28

tnum is not supported by:

• Safari (OSX)
• Safari (iOS)
• Android Webkit
• Older versions of the browsers listed above