Reading order

In La Méthode graphique, first published in 1878, Étienne-Jules Marey reproduced a railway timetable drawn as a single graph, a method he credited to the engineer Ibry. Stations run down the side by distance, time runs along the bottom, and every train is a line whose slope is its speed. A whole day of departures becomes one picture because every train shares the same two axes.

Jacques Bertin made the same point for tables. His reorderable matrix draws each cell as a mark and then moves rows and columns until the structure shows. Richard Becker, William Cleveland and Ming-Jen Shyu formalised panels that share scales as the trellis display, and Waqas Javed and colleagues later found that separate small charts are generally more efficient for comparisons that span many series, and one shared chart for comparisons close together. Weather services use the form every day. The ensemble meteogram stacks cloud, wind, rain and temperature on one time axis.

Retail planners have their own version, the weekly sales, stock and intake grid, with weeks across and measures down. The figure below stacks visitors, sign-ups, orders and revenue on one week axis, so a change in one row can be followed straight down through the others. David Woods gave the underlying quality a name, visual momentum: how easily a reader carries what was just seen into the next view.

The axis need not be time. The schedule of all sports for the 1972 Munich Olympics, designed by Michael Burke in Otl Aicher’s department, cross-indexes dates, events and pictograms on a single sheet printed in seven colours. Tamara Munzner’s Visualization Analysis and Design gives the reason such sheets work in three words: eyes beat memory. Two views that share an axis can be compared by looking. Two views shown one after the other have to be compared from recollection.

A shared axis also makes it possible to point. Richard Becker and William Cleveland named the technique in 1987. Brushing marks a selection in one view and shows the same items in every other view. The figure below does a modest version. Pointing at a week draws one line through all four measures and prints their values, and nothing is filtered away, so the context stays on the screen.

Planners live in tables, and research has begun to notice. Lyn Bartram, Michael Correll and Melanie Tory found that people who work with data want to see and touch the table at every stage of analysis, and argued that the table is a visualization in its own right. The rules for setting one are old and consistent.

Jan Tschichold advised doing without rules where possible, and using vertical ones only when columns are too tight to read without them. Andrew Ehrenberg’s Rudiments of Numeracy adds the rules for the figures themselves: round to the two digits that actually vary, order the rows by size, and put the numbers to be compared in a column. Jonathan Schwabish’s checklist says the same in current terms. Align numbers to the right, state units once, lighten the lines.

A table can also carry marks without ceasing to be a table. Bertin’s matrices already drew a bar inside each cell on paper. The Table Lens of Ramana Rao and Stuart Card did it on screen, and LineUp later built whole rankings from such bars. Plain typography goes a long way too. The Dutch telephone directory designed by Wim Crouwel and Jolijn van de Wouw in 1977 set every line in condensed Univers, in lower case, with the number placed before the name so that no leader dots were needed.

Dense figures have had typefaces of their own for decades. Matthew Carter drew Bell Centennial in the 1970s for American telephone directories printed fast on poor paper. Tobias Frere-Jones drew Retina in 1999 for the stock tables of the Wall Street Journal. Both are instruments for small numbers, and both are worth a look before choosing a face for a grid.

On screen the requirements are few and testable. Figures must be tabular, so every digit has the same width and columns align. They should also be duplexed, meaning a digit keeps its width when the weight changes. A selected row can then turn bold without its columns moving. A family drawn as a system helps as well. Adrian Frutiger organised Univers in 1957 as a matrix of weights and widths, and a variable font gives the same range from one file.

Seventeen open typefaces were measured for this guide in a browser. Instrument Sans, IBM Plex Sans and Hanken Grotesk keep every digit’s width between regular and bold. Red Hat Text keeps its zero but widens its bold nine, and Geist and Archivo widen every digit. Punctuation is worth measuring too. In Instrument Sans the digits, the minus and the percent sign have one width in both weights, while the comma and the decimal point are about a thirtieth of an em wider in bold, which is half a pixel at 15 px.

The Swiss typographers add the close view. Emil Ruder’s Typographie of 1967 is a manual on rhythm, proportion and the space inside and around letters. Jost Hochuli’s Detail in Typography works through letters, words, lines and the spaces between them in sixty-four pages. On a dashboard that care goes into the things that repeat: a value and its unit, the minus sign, the longest label in a column.