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

Question

My fonts of choice usually default to text figures

which is one reason I like them. However, for tables or headings I'd like to specify that lining figures should be used:

Is there a way to do so in CSS?

(To appease the search:

old-style numerals, text figures, non-lining figures, medieval numerals
lining numerals, titling figures)

I would have thought this is specific to the font. I'm not aware of anything like this in CSS. — Tom, May 30 '10 at 21:22
@Jason: I would have assumed that to be common knowledge, sorry. Edited. — Joey, May 30 '10 at 22:09
@Tom: The font has a default, but every good OpenType font has both variants and allows the the rendering engine to choose one or the other. After all, the context dictates the use of one variant or the other. — Joey, May 30 '10 at 22:10

score 5 · Accepted Answer · answered Jun 18 '11 at 02:20

5

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.

answered Jun 18 '11 at 02:20

theazureshadow

9,499
5
33
48

Still a proprietary solution *sigh*. I wish, CSS would get such support, eventually. – Joey Jun 18 '11 at 06:56
Well, it's there, in draft form. We just have to wait until the browsers support it. I expect Firefox might be pretty quick on that one, since they already have the support -- it's just an interface change. – theazureshadow Jun 21 '11 at 18:13
@Joey: IE10 supports several opentype features using `-ms-font-feature-settings`: http://ie.microsoft.com/testdrive/Graphics/OpenType/ Also see http://caniuse.com/font-feature – Marcel Korpel Nov 14 '12 at 13:00
Marcel, note the age of the question. I know it's standardised by now. – Joey Nov 14 '12 at 14:15
@MarcelKorpel: It's still a draft, and as you can see there is very sparse browser support. Plus, it's still somewhat unlikely for your *font* to support them. I don't know how many of the system fonts support both lining and old-style figures, but I'm sure it's not many. – theazureshadow Nov 14 '12 at 23:02
@Joey: I know, my comment is merely here for reference (someone might Google it). theazureshadow: it's not only meant for system fonts, but especially for custom fonts using `@font-face`. – Marcel Korpel Nov 15 '12 at 15:27
It's too bad that `font-variant-numeric` still hasn't caught on. :( – Ry- May 15 '13 at 16:43

Marcel Korpel · Answer 2 · 2011-12-18T21:09:18.880

2

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 ﬁ-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 ﬁgures: </p>
 </body>
</html>

edited Dec 18 '11 at 21:09

answered May 30 '10 at 22:52

Marcel Korpel

21,536
6
60
80

2

Hm, I feared as much. It's interesting that CSS allows quite fine-grained control over typesetting in some cases and almost completely neglecting typography. – Joey May 30 '10 at 23:05
@Johannes You can, of course, use that granularity to do what you want. Using @font-face, you can define the alternate style as "Font Name Lining" or assign it as you would a completely different font. – May 31 '10 at 22:07
@D_N: agreed, though @font-face is [not that widely supported](http://webfonts.info/wiki/index.php?title=%40font-face_browser_support), yet. – Marcel Korpel May 31 '10 at 22:23
I have to disagree on that. Compare that table against what's currently in use and the adoption curve of most (non-IE) browsers. You easily have a supermajority of browsers. Besides, if you're going to use a custom font at all you have to either use @font-face or something similar which will have the same limitations (Cufon, etc.). – May 31 '10 at 23:02
1

Ok, if I understand correctly, `@font-face` requires me to distribute a font I probably don't have permissions distributing *and* modify it appropriately that it uses the other numeral variants by default (which I likely also don't have permission to do). So is the `@font-face` rule only for people who do both webdesign and cut typefaces (I suspect their number is vanishingly small) or where freely-available fonts can be used. – Joey Jun 01 '10 at 00:22
@Johannes: Unfortunately, yes. But there's hope: the [Web Open Font Format (WOFF)](https://developer.mozilla.org/en/About_WOFF). – Marcel Korpel Jun 01 '10 at 08:29

score 1 · Answer 3 · answered Aug 19 '13 at 18:33

1

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.

answered Aug 19 '13 at 18:33

Alex Feinman

5,393
1
30
48

+1 Here is a list of possible values : https://css-tricks.com/almanac/properties/f/font-feature-settings/#article-header-id-0 Of course, the font you chose need to have those specific characters. – Erwan Mar 05 '18 at 10:53

score 1 · Answer 4 · answered Apr 22 '15 at 11:28

1

Try this..

body {
        -moz-font-feature-settings:"lnum" 1;
        -moz-font-feature-settings:"lnum=1";
        -ms-font-feature-settings:"lnum" 1;
        -o-font-feature-settings:"lnum" 1;
        -webkit-font-feature-settings:"lnum" 1;
        font-feature-settings:"lnum" 1;
        font-variant-numeric: lining-nums;
    }

answered Apr 22 '15 at 11:28

buTs

41
2

How is this different from theazureshadow's answer from four years ago, or Alex' answer from 2 years ago? – Joey Apr 22 '15 at 14:13

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

4 Answers4

Linked