Setting a preference for number styles in HTML/CSS (Uppercase vs. Lowercase Numbers)

Question

I would like to know if there is a way to use HTML/CSS to set a font to use the "uppercase" version of numbers instead of a "lowercase" version. Since content would be managed by the client, I cannot guarantee wrapping of all numbers with spans, so if there was a way this could happen dynamically, that would be awesome.

I am using the typeface "Tisa Sans Pro," in which the default numbers have ascenders and descenders (I believe this is the correct terminology?), but the uppercase version uses numbers that stay lined-up. Client prefers the lined-up version.

Thank you!

Answer 1

Uppercase and lowercase variants of digits (numbers) are called “lining numerals” and “oldstyle numerals” in CSS (and by various other names in typography). A choice between them can be made using the font-feature-settings property, if a) the font being used contains the desired variants (most commonly used fonts don’t) and b) the browser supports this property. Browser support is relatively good in modern browsers, but you still need some vendor-prefixed versions, too. Example:

body {
   -moz-font-feature-settings: "lnum";
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
}

Note that even though the font used has e.g. lining numerals as selectable, this code might still not work when using such a font as a web font (downloadable font). The reason is that when different font formats (.eot, .woff etc.) are generated, the font generator may omit or distort information needed for font variant selection. A font generator may have options for requesting that such information be included, or it may have an option for fixing some selectable variant, e.g. selecting lining numerals so that the font contains only such numerals (and no CSS code is needed for the selection).