Flipping on tabular numbers

Columns of data are easier to compare when each number is visually aligned. Stephanie Hobson pointed this out during her excellent talk Flipping Tables, at Vancouver’s Style & Class meetup (and more recently here).

She explored the challenges of effectively displaying tabular data on the web, including how tables can be optimised for a variety of viewports, accessibility considerations, and techniques for highlighting critical information readers are actually after.

The talk included design improvements that can benefit nearly all tables, and one of Stephanie’s tips was to monospace numeric data. This is great advice: comparing numbers is much easier when each one is aligned.

DestinationFirst TrainLast Train
Waterfront to YVR Airport4:48 am1:05 am
Waterfront to Richmond-Brighouse5:30 am1:15 am
YVR Airport to Waterfront5:07 am12:56 am
Richmond-Brighouse to Waterfront5:02 am12:46 am
A basic table, with and without “monospaced” tabular numbers. Visually aligned numbers can be easier to compare.

One quick way to get this result is to use a monospace typeface:

table {
  font-family: monospace;
}

This gets the job done, but may significantly change the visual voice of your table—“Why is there a third quarter projection analysis spreadsheet in the middle of this conference website?”—and may make the non-numeric information in your table less easy to read.

More than monospaced

Using a monospaced typeface is not the only way to achieve this result.

Many high-quality typefaces, especially those that are intended for use in user interface or information design, will include a set of tabular numbers. These are monospaced numbers designed to work alongside the rest of the typeface. They are intended for exactly this application:

Tabular numbers have been available to designers of printed documents, signage, and more for years. Now, they are ready to use on the web as well. This is (in theory) a one-liner in your stylesheet:

table {
  font-variant-numeric: tabular-nums;
}
NamePGoalsAssistsPKsGPMin
Fredy MonteroF1362332469
Cristian TecheraM671292043
Yordy ReynaM-F640181073
Brek SheaM-F420251325
Kendall WastonD410252250
Enabling the tabular numbers OpenType feature in Alanna Munro’s typeface Tofino provides monospaced numbers without compromising the voice, x-height, or line height. All of that would change when switching to a monospaced typeface from a different type family.

Tabular numbers in motion

Tabular numbers can also be useful in animations, and data visualisation where information is changing:

Tabular Numbers
Proportional Numbers
Coundowns, clocks, and other animations can also benefit from “monospaced” tabular numbers. It’s possible to fake this with other methods using HTML and CSS, but why not just use the glyphs that were already designed and spaced specifically for this purpose?

I suppose you can have the window seat next to me on flights, because I am going to be watching Tabular vs. Proportional numbers:

Clip showing changing numbers on the back-of-headrest screen on an airplane.

Tabular numbers in practice

Yet—as is so often the case on the web—the reality is a little more complicated. You’ll want to:

  1. Choose a typeface with tabular numbers
  2. Load the web font with the tabular numbers still included
  3. Enable the tabular numbers OpenType feature within your CSS

1. Choose a typeface with tabular numbers

If you’re responsible for choosing a new typeface for a project, considering the information you’ll need to typeset now is a very important step. You’ll also want to consider what you might need to set in the future.

If you’re choosing a typeface for a new project, you’ll want to consider the kinds of information you’ll need to display, and how the typeface will handle it.

In either case, the numbers often provide a good clue about what situations a typeface works well in:

In some typefaces, the numbers will be monospaced by default. In others, they will not be present. For example, what is the likelihood of you setting an entire table in Riley Cran’s script typefaceEscafina vs. Alanna Munro’sTofino?

Tabular numbers don’t exist in Escafina, but they do in Tofino Wide.

Or a display typeface like Shiva Nallaperumal’sFaction, versus their new typeface specifically for dataProtipo?

Not all typefaces include tabular numbers. For some typefaces, it wouldn’t make sense if they did: this option may not make sense with the typeface’s intended use.

For tabular numbers to be available to you on the web, a type designer will have needed to design the glyph in the typeface, and then either make them the default option, or make them accessible through the advanced typographic OpenType features that are included within the font.

2. Load the web font with the tabular numbers still included

Many typefaces that include tabular numbers do not have them enabled by default. The default number set will likely include proportional numbers. For example:

Proportional numbers in the typeface Tofino.

Accessing these additional glyphs is possible though OpenType features. These are already included in the equivalent font file you would use on the desktop, and can be accessed in most word processors and desktop publishing programs. If you are using macOS, you can access these OpenType features in programs like Pages and Keynote through the Typography menu:

This works in Keynote, Pages, and other applications that use the OS defaults: Command + T → ⚙ → Typography.

Whether or not you have access to these same features in your web font depends on where you got the fonts from.

Self-hosting

If you are self-hosting web fonts, the files you receive should still include the tabular numbers.

If your End User License Agreement allows it, and you’re subsetting the fonts to get smaller character set with a tools like Zach Leatherman’sGlyphhanger, ensure these numbers aren’t getting cut out.

Hosted service

If you are using a hosted web font service, you might need to enable an additional option in the control panel to ensure these glyphs aren’t being removed in advance.

Often, these glyphs are subset out of a web font file in advance, making the file size marginally smaller.

If I’m missing a guide you’d like to see included here,let me know.

System fonts

You can still make use of these features, even when you’re using a system font, like Marcin’s font stack.

DestinationFirst TrainLast Train
Waterfront to YVR Airport4:48 am1:05 am
Waterfront to Richmond-Brighouse5:30 am1:15 am
YVR Airport to Waterfront5:07 am12:56 am
Richmond-Brighouse to Waterfront5:02 am12:46 am

If the system font and the browser support tabular numbers, you’ll see them above. If they aren’t supported by your system font or browser, the default numbers will be used.

3. Enable the tabular numbers in your CSS

Now, you have the web fonts loaded into your project, with the tabular number glyphs and OpenType features included. The last step is to enable them within your CSS:

table {
  font-variant-numeric: tabular-nums;
}

I left this post as a draft for so long, this is actually supported quite well. font-variant-numeric is supported in Firefox 34+ Chrome 52+, and Safari 9.1+.

Supporting other browsers (IE10+ and Edge, Firefox 4+, Chrome 33+ viaState of Web Type) is possible using the higher-levelfont-feature-settings property, which would allow you to enable multiple OpenType features (not just tabular numbers) at once:

table {
  font-feature-settings: "tnum";
}

Note that for all these examples, I’ve omitted vendor prefixes, but you’re probably handling that via a build tool anyway.

Using more OpenType features

If you’re interested in using even more OpenType features, and are concerned about mixing and matching them, my little CSS library classedUtility OpenTypewill help: simple, CSS utility classes for advanced typographic features. The library uses @supports queries to fall back gracefully in other browsers.

Instead of worrying about the confusing fallbacks needed in your CSS to enable the typographic features, you can use Utility OpenType and applying the .tnum tabular numbers class:

<table className="tnum">
  <!-- Etc. -->
</table>

You can install Utility OpenType through npm and include it in your Sass or PostCSS project, or directly include the complied CSS in your project. The instructions for both arein the documentation.

Utility OpenType will help when you plan on using a number of OpenType features, which I regularly do. If you’re just getting started with them, however, it might handle more than you’re concerned about at this stage. Instead, feel free to just style your tables or make a single utility class:

.tnum {
  font-variant-numeric: tabular-nums;
}

@supports not (font-variant-numeric: tabular-nums) {
  .tnum {
    font-feature-settings: "tnum";
  }
}

Visually aligned

You’ve chosen a typeface with tabular numbers included, kept those in the web font, and enabled them within your CSS—without needing to change typefaces or font stacks.

Typesetting tabular data is just one consideration of many about what a typeface may or may not be able to handle. How comprehensive the language support is, if it has the range of styles you need, if it has alternate glyphs in certain contexts, and more.

These won’t all be equally important for all your projects, but they are worthwhile consideration when you are evaluating typefaces.