Mark Fox Mark Fox - 1 month ago 7x
CSS Question

Can you specify tabular lining figures for webfonts?

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

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


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.