grids of numbersVertical alignment is the key

With grids of num­bers, the ty­po­graphic logic must fol­low the nu­mer­i­cal logic. If it doesn’t, your ty­pog­ra­phy is likely to con­fuse or mis­lead your read­ers about the mean­ing of the numbers.

If you re­mem­ber every­thing from sixth-grade math class, you can skip this sec­tion. If not, then don’t.

Num­bers work dif­fer­ently from words. A word is a se­quence of char­ac­ters. The whole se­quence has mean­ing, but the in­di­vid­ual char­ac­ters do not. This isn’t so with num­bers. A digit in a num­ber has in­de­pen­dent mean­ing based on its po­si­tion rel­a­tive to the dec­i­mal point (which may be im­plied). That’s how we can tell that the dig­its in .49 rep­re­sent a num­ber that’s smaller than 49. Also un­like words, dif­fer­ent types of num­bers have dif­fer­ent rules about how they can be com­bined and compared.

Num­bers that are as­so­ci­ated with a unit are called quan­ti­ties. The mean­ing of a quan­tity de­pends on the unit. For in­stance, if I asked which is big­ger—5 or 10—you’d give one an­swer. But if I asked which is big­ger—5 feet or 10 inches—you’d give a dif­fer­ent an­swer. But quan­ti­ties can be com­pared only if the units are com­men­su­rable. So if I asked which is big­ger—5 feet or 10 square inches—the ques­tion would be unan­swer­able. One rep­re­sents length; the other, area.

Not all num­bers are quan­ti­ties, of course. Or­di­nal num­bers de­note po­si­tion in a se­ries, like col­lege rank­ings. Or­di­nals can be com­pared rel­a­tively—8 pre­cedes #10. But even though 8 is 20% less than 10, a rank­ing of #8 can­not be said to be “20% bet­ter” than #10. Or­di­nals don’t work that way.

Nom­i­nal num­bers are ar­bi­trary iden­ti­fiers like zip codes or phone num­bers. Nom­i­nal num­bers can’t be com­pared or com­bined arith­meti­cally, but they may still have an in­te­rior struc­tural logic. For in­stance, if we’re told that 3235551212 and 3235551 rep­re­sent phone num­bers, we still know they’re dif­fer­ent, be­cause phone num­bers build from right to left.

Your goal when type­set­ting grids of num­bers is to make sure the ty­pog­ra­phy re­flects the un­der­ly­ing mean­ing of the num­ber. To do this, there is one golden rule: in any col­umn, dig­its with the same mean­ing must be ver­ti­cally aligned with each other. This means that you shouldn’t merely se­lect every­thing and ap­ply the same for­mat­ting to every­thing. Dif­fer­ent kinds of num­bers need dif­fer­ent typography.

Im­por­tant caveat: the fig­ures in your font will only line up with each other if they’re tab­u­lar fig­ures. For more about these, see al­ter­nate fig­ures.

  1. Num­bers im­prop­erly aligned.

  2. Gar­ish color scheme.

  3. Table cell mar­gins too small.

  4. Need­lessly thick rules and bor­ders.

  5. Line spac­ing uneven.

  6. In­apt sys­tem font (Calibri).

  1. In­voice num­bers (nom­i­nal num­bers) aligned right.

  2. Net-worth val­ues (quan­ti­ties) have cur­rency sym­bols, com­mas, and cents. Then they are aligned right, so cents and dol­lars line up. If a quan­tity is be­tween 0 and 1, add a lead­ing zero for clarity.

  3. Weights aligned with dec­i­mal tabs (see tabs and tab stops) so full pounds and frac­tional pounds line up.

  4. Zip codes are aligned left, so five- and nine-digit zip codes line up prop­erly. (Phone num­bers would need to be aligned right.)

  5. Un­nec­es­sary col­ors and bor­ders removed.

  6. Line spac­ing even.

  7. Bet­ter font (Con­course).

As for the col­umn la­bels, for­mat those af­ter you take care of the num­bers. Some­times you might need to make an in­con­sis­tent for­mat­ting choice to make them look right. For in­stance, in the re­vised ex­am­ple, the la­bel “Weight” is cen­tered, even though the num­bers un­der­neath are not. Did you no­tice? No. Read­ers won’t either.

by the way
  • “If you padded out the dol­lar quan­ti­ties to make them line up, why not do the same to the weights?” Tempt­ing, but don’t. Un­like amounts of money, phys­i­cal quan­ti­ties com­mu­ni­cate not only mag­ni­tude but also pre­ci­sion. There­fore, the mea­sure­ment 98.000 pounds is not the same as 98 pounds. The ex­tra ze­roes de­note pre­ci­sion to a thou­sandth of a pound, which the sec­ond mea­sure­ment does not claim (e.g., it might ac­tu­ally be 98.27 pounds).

  • In a num­ber less than 10,000, putting a comma af­ter the thou­sands digit is gen­er­ally a mat­ter of style. For in­stance, both $6736 and $6,736 are fine. But if those num­bers are in a col­umn (as in the ex­am­ple above ), the comma be­comes manda­tory. With­out it, $6736 won’t quite line up with $16,736.

    I’ll leave the choice of lin­ing vs. old­style fig­ures to you (see al­ter­nate fig­ures). In a grid, how­ever, I pre­fer the look of lin­ing fig­ures, be­cause of their ver­ti­cal consistency.

undock move Heliotrope Equity Valkyrie Century Supra Concourse Triplicate buy font close