demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

2007 Greenhouse gas contributions
per country (megatonnes)
  USA China India Canada Brazil
CO2 29,529.1 6,702.6 1410.4 583.9 373.7
Methane 521.1 853.3 547.7 102.1 389.1

Elegant Table Data With OpenType

css / tables

Estimated reading time: 2 minutes, 8 seconds

By default, information is jammed into the cells of like a rebellious prisoner.  OpenType fonts and CSS3 can be used to make tabular data much more legible and 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 (<th>) 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

Proportional fonts out of vertical alignment

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 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('calluna.eot'),
  url('calluna.woff') format('woff'),
  url('calluna.ttf') format('truetype'),
  url('calluna.svg#calluna') format('svg');
  src: url('CallunaSansRegular.otf');
}
table { font-size: 1.6rem; border-collapse: collapse; }
table, table + p { font-family: Calluna, Arial, sans-serif; }
table + p { text-align: center; }
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 { -moz-font-feature-settings:"smcp=1";
 -moz-font-feature-settings:"smcp";
 -ms-font-feature-settings:"smcp";
 -o-font-feature-settings:"smcp";
 -webkit-font-feature-settings: "smcp";
 font-feature-settings:"smcp";
}
table tbody td { -moz-font-feature-settings: "tnum=1";
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  -o-font-feature-settings: "tnum";
  -ms-font-feature-settings: "tnum";
   font-feature-settings: "tnum";
 }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.