[App] Use tabular figures for mobile and web apps

Hello! So, this is a bit nitpicky but it’s also an important legibility issue. Please consider using tabular figures anywhere numbers are displayed (in columns) in the web or mobile app.

tabular

This can be done one of several ways. Tabular numbers can be forced with a CSS setting like so:

# Source: https://stackoverflow.com/a/17647271/772122

font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';

This is very easy to do, but won’t look ideal for fonts that weren’t designed with tabular figures in mind.

The best solution is to use a font that was designed for tabular figures. Roboto is a good option that’s available from Google Fonts, however other typefaces exist.

Here is a photo album with a visual comparison of the three options (note how the degree symbol aligns neatly when tabular figures are enabled):

  1. The site as it is today with Proxima Nova (no tabular numerals).
  2. Proxima Nova with tabular numerals enabled via CSS.
  3. Roboto, tabular numerals not enabled via CSS (not needed).

Imgur

Imgur

Imgur

Thanks!

It would be easier to just use a monospace font.

1 Like

Monospace font is a good option! That’s basically what this is. However, if you want to use the same typeface everywhere this is a good compromise. Many “pro” typefaces even include tabular variants, like Gotham from Hoefler&Co.