Search code examples
csstypographyfixed-widthmonospace

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?


Solution

  • 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.