Mark Fox Mark Fox - 2 months ago 17
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?

Answer

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.