Can you specify tabular lining figures for webfonts?

css typography fixed-width monospace
Mark Fox picture Mark Fox · Jul 13, 2013 · Viewed 12.6k times · Source

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

Mark Fox picture Mark Fox · Jul 15, 2013

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.

Related questions

Should I avoid using "text-align: justify;"?

Is there any reason to avoid using text-align: justify;? Does it reduce readability or cause problems?

Read More
'Segoe UI' font with font-face & local

I want to use the "Segoe UI" font in a website if it is installed in the user's computer. I have declared all the styles with @font-face in order to use the font-weight property to change the thickness of the …

Read More
How to combine bold and italic in CSS?

This W3Schools tutorial taught me how to use the CSS font-style property to make text bold (equivalent to <b&g>this</b> in old-fashioned HTML) as well as how to make text italic (equivalent …

Read More