Is there a way to specify the use of text or titling figures in CSS?

Firefox 4.0 has basic text figure support. Here's how to turn on text (old-style) figures:

.text-figures {
  -moz-font-feature-settings: "onum=1";
}

Looks like there's a set of css3 properties, such as font-variant-numeric, to control common properties. These are not yet supported by any browser, as far as I know.

Here's a jsFiddle where you can play around with the styles. It toggles between lining and old-style figures. I'm using Minion Pro on Windows 7, so you might have to find your own supported font on other platforms.


OpenType features are now supported in many browsers:

font-feature-settings: 'lnum'

Old-style is also supported via 'onum'. You can omit the '=1' for boolean flags.

See Mozilla's description for more details, or this more thorough writeup of the various font features.


No, there's no such property in the CSS 2.1 specification. It's up to the web browser to chose a font available in the system and render it with whatever the ‘default’ style is.

A quick look in the CSS 3 Working Draft also doesn't reveal an option like this.

And although you can use the @font-face property in newer browsers, there doesn't seem to be an option to select OpenType features in general (like using lining or oldstyle figures).

A quick search revealed there has been a discussion about this on the W3 CSS mailing list.

Update: Inspired by Creating Custom Font Stacks with Unicode-Range I decided to give unicode-range property a try. Alas, you cannot change the lookup-table to use custom figures when normal figures 0-9 are used.

But, though it's not convenient to enter digits in high Unicode ranges (e.g. use the Unicode code converter), it is possible to use a specific set of figure, e.g. lining numerals for tables (and the fi-ligature as well):

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8>
  <title>Table numerals</title>
  <style>
   @font-face {
     font-family: Calluna;
     src: url(http://localhost/Calluna-Regular.otf);
   }
   body { font-family: Calluna }
   #f { font-size: 32pt }
  </style>
 </head>
 <body>
  <p id="f">Table figures: </p>
 </body>
</html>

Tags:

Css

Recent Posts