demo · v139
Numerals & Figures Lab
A real-world use case for descriptor-level font-feature-settings: turn on tabular figures for the data table, oldstyle figures for the prose, scientific superscripts for footnotes — by name, at the @font-face level. Compare against an unstyled control.
tabular nums (tnum) — accounting table
| Espresso | £2.50 |
| Cappuccino | £3.10 |
| Pourover | £4.20 |
| Iced | £3.80 |
| Total | £13.60 |
oldstyle nums (onum) — editorial prose
In 1953 the experiment ran for 2 seconds; by 1968 the figure was up to 4,500 ms, with 12,000 atoms suspended in the chamber.
superscripts (sups) — scientific
Avogadro's number is 6.022 × 10^23 mol^-1, and pH=-log[H+].
control — no descriptor features
| Espresso | £2.50 |
| Cappuccino | £3.10 |
| Pourover | £4.20 |
| Iced | £3.80 |
| Total | £13.60 |
In 1953 the experiment ran for 2 seconds; by 1968 the figure was up to 4,500 ms, with 12,000 atoms suspended in the chamber.
@font-face {
font-family: 'TableNums';
src: url(...);
/* v139: bake in tnum + lnum at the @font-face level.
Every element using this family inherits monospaced digits. */
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
@font-face {
font-family: 'EditorialNums';
src: url(...);
font-feature-settings: 'onum' 1, 'pnum' 1;
}
see also
scenario focus
Select a scenario to focus its rendered example and summary.