How to access proxima nova tabular figures on a webpage?

Question

The problem is that by default Proxima Nova numbers are not monospaced. Therefore a simple price list table does not line up. (see Figure 1)

Figure 1. Misaligned numbers

The question is:

is there some CSS rule to access monospaced numbers?
is there some HTML code trick so I can access monospaced numbers as characters? (sth like ∑)
or should I use 12...?

Cheers!

score 5 · Answer 1 · answered Oct 06 '14 at 08:47

5

CSS3 Fonts’ font-variant-numeric. This allows you to toggle Opentype features. In your case this would be:

.my-element { font-variant-numeric: tabular-nums; }

Proxima Nova lists support for tabular figures so that’s good, but I’m not sure about browser support for font-variant-numeric. If that doesn’t work then you could try font-feature-settings instead which should give you the same effect with (possibly) more support:

.my-element { font-feature-settings: "tnum" on; }

The specification does say though that:

Authors should generally use ‘font-variant’ and its related subproperties whenever possible.

answered Oct 06 '14 at 08:47

Robin Whittleton

6,159
4
40
67

Hi Robin, thanks for trying to help, +1. can you please add a link to the specification? (-webkit-font-feature-settings does not seem to work correctly, font-variant-numeric does not seem to exist on Chrome.) – Barney Szabolcs Oct 06 '14 at 08:53
`font-feature-settings` should work in IE (no prefix) / Firefox (`-moz-` until next version) / Chrome (`-webkit-`) but has no support in Safari. I can’t find any resources for `font-variant-numeric` support, would guess that it hasn’t been implemented in browsers yet. As for Opentype features, I don’t know how you’re serving Proxima Nova but it’s possible support for tabular numerals is being stripped. Any more information on that? – Robin Whittleton Oct 06 '14 at 09:18

score 0 · Answer 2 · edited May 23 '17 at 12:15

I've found a solution. The CSS is

.tabular-numbers {
  -moz-font-feature-settings:"tnum" 1; /* Firefox 31+ */
  -moz-font-feature-settings:"tnum=1"; 
  -webkit-font-feature-settings: 'tnum' 1; /* Chrome 31+, Android 4.4+, Opera 24+ */
  font-feature-settings: 'tnum' 1; /* IE10+ */
}

References: http://clagnut.com/sandbox/css3/ and http://caniuse.com/#feat=font-feature

Contrary to answers to: No support for font-feature-settings in Safari? , I have seen no support on Mac Safari 7.1.

So the only universally working solution is currently:

.tabular-figure {
  display: inline-block;
  width: 7px;
  text-align: center;
}

and 5671

which is a crap, so more like

.number{
  font-family: "Helvetica Neue";
}
<span class="number">5671</span>

Looks like Apple Safari is becoming the new Internet Explorer... :@@@

How to access proxima nova tabular figures on a webpage?

2 Answers2

Linked