By default, information is jammed into the cells of HTML tables like a rebellious prisoner.  OpenType fonts and CSS3 can be used to make tabular data much more legible and typographically attractive through the use of tabular numerals.

The table above has the following markup (in minified HTML5, to save space):

<table>
	<caption>2007 Greenhouse gas contributions, per country (megatonnes)</caption>
	<thead>
		<tr>
			<td>&nbsp;
			<th scope="col">USA
			<th scope="col">China
			<th scope="col">India
			<th scope="col">Canada
			<th scope="col">Brazil
	</thead>
	<tbody>
		<tr>
			<th scope="row">CO<sub>2</sub>
			<td>29,529.1
			<td>6,702.6
			<td>1410.4
			<td>583.9
			<td>373.7
		<tr>
			<th scope="row">Methane 
			<td>521
			<td>853.3
			<td>547.7
			<td>102
			<td>389.1
	</tbody>
</table>

Note that I’m using table header cells in the traditional top row position and as the leading cells for each row of data; I’m distinguishing their purpose and orientation through the scope attribute.

Proportional vs. Tabular Numerals

In many fonts, numbers are presented proportionally – that is, each number takes up a slightly different amount of horizontal space. This feature makes numbers look presentable when they are placed inline with text, but throws them out of alignment when stacked one on top of the other, like so:

Using a correctly embedded OpenType font on your web page means you can switch between the two number forms in CSS to increase legibility depending on the context of data:

font-feature-settings: 'pnum'; /* proportional numerals */
font-feature-settings: 'tnum'; /* tabular numerals */

(Of course, each of these will need vendor prefixes for the CSS to work in the browsers that currently support these OpenType features: Firefox 3.6+. IE10, and Chrome 20.)

In other fonts, such as Calluna by Jos Buivenga, “Old Style” numerals – that is, digits that descend below the baseline, or appear raised above it, as in the 7 and 9 in the illustration above – are presented by default. “Lining” numbers are numeral forms that all rest on the same baseline. Again, you can use CSS to switch between the two:

font-feature-settings: 'pnum'; /* proportional numerals */
font-feature-settings: 'tnum'; /* tabular numerals */

Bringing It All Together

The entire CSS for the table above, using true small caps for the caption and tabular numerals for the table cells:

@font-face {
	font-family: Calluna;
	src: url('CallunaSansRegular.otf'),
	url('calluna.woff') format('woff');
}
table {
	font-size: 1.6rem;
	border-collapse: collapse;
}
table {
	font-family: Calluna, Arial, sans-serif;
}
table td {
	text-align: right;
	padding: .5rem;
	width: 5rem;
}
table thead th {
	border-bottom: 1px solid #777;
	font-weight: 400;
}
table tbody th {
	font-weight: 400;
	text-align: right;
	padding-right: 1rem;
}
table caption {
	font-feature-settings:"smcp";
}
table tbody td {
	font-feature-settings: "tnum";
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/BQREXr