Can you specify tabular lining figures for webfonts?

Asked 13/7, 2013 at 1:40 Answered 16/9, 2016 at 13:12

Solved css typography fixed-width monospace

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)

enter image description here

Font: Brandon Grotesque

Eurythmics answered 13/7, 2013 at 1:40 Comment(0)

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.

Eurythmics answered 15/7, 2013 at 5:22 Comment(0)

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.

Bombshell answered 16/9, 2016 at 13:12 Comment(0)

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

Dizen answered 27/7, 2015 at 16:14 Comment(4)

I believe it does provide an answer to the question. In addition to asking how to specify tabular numerals, the OP is also asking if there is browser support. The link in my answer presents a table of this property's support across the modern browsers. – Dizen 27/7, 2015 at 18:57

My view is that it does provide an answer. The question is first "can you specify...?" - this answer says "yes". Is there browser support? answer "not guaranteed - here's a resource that tells you which do / don't". The info from the link could be summarised here to improve the answer - specifying from which versions the various popular browsers support. Otherwise it is dangerously close to a "link only answer" – Strepitous 27/7, 2015 at 20:13

Thanks for the suggestion @JRichardSnape. I've updated my answer with summarized data from the linked site. I'm new here and still getting the hang of the rules. I apologize for the incomplete answer. Cheers. – Dizen 27/7, 2015 at 21:10

Sure, no problem, we all have to get the hang of the site at one time or another. I hope you stick with it - it can be rewarding! All the best. – Strepitous 27/7, 2015 at 21:14

Recommended topics

Hot tags