How to access proxies of new tabular data on a web page?

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

Misaligned numbers Figure 1. Inappropriate numbers

The question arises:

  • is there a CSS rule for accessing monospaced numbers?
  • Is there some HTML code trick so I can access monospaced numbers as characters? (sth like ∑

  • or should I use <span class="figure">1</span><span class="figure">2</span>




source to share

2 answers

CSS3 Fontsfont-variant-numeric

. This allows you to toggle Opentype features. In your case, it would be:

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


Proxima Nova lists tabular numeric support , so that's fine, but I'm not sure about browser support for font-variant-numeric. If that doesn't work, you can try font-feature-settings

, which should give you the same effect with (possibly) more support :

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


The spec states that:

Authors should generally use "font-variant" and its associated sub-properties whenever possible.



I found a solution. CSS

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


Links: and

Contrary to answers to: No support for font preferences in Safari? I've seen no support on Mac Safari 7.1.

So, the only universally working solution currently is:

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


and <span class="tabular-figure">5</span><span class="tabular-figure">6</span><span class="tabular-figure">7</span><span class="tabular-figure">1</span>

which is shit so more like

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


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



All Articles