Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Is there an accepted way to adjust font glyphs in order to simulate text figures?

enter image description here


Text figures are "lowercase" digits. You normally use lowercase digits where you also use lowercase text (e.g. in the middle of a sentence).

Keyboards were never created with uppercase and lowercase digits; and Unicode doesn't specifically encode them, as "they are not considered separate characters from lining figures, only a different way of writing the same characters."

Which brings me to my question; what is the accepted way to create lowercase figures out of a font's standard "uppercase ones?

Wikipedia mentions that normally:

  • 012 are x-height
  • 68 have ascenders
  • 34579 have descenders

enter image description here

My first attempt (in photoshop) would be to:

  • smush 012
  • nudge 34579 down
  • leave 68 where they are:

enter image description here

enter image description here

But the skwooshed figures (0, 1, 2) look distinctly unpleasant.

If the Unicode consortium suggests that "lowercase digits" can simply be constructed from te "uppercase" ones - what do they recommend i do?

Ideally in HTML

My end goal is to display lowercase text in a browser. i know some fonts (e.g. Georgia) already display all their digits as lowercase:

enter image description here

But i'm not asking how to switch to using Georgia; i'm asking how to construct lining figures out of non-lining ones.

And since this is for display on the web, i realize that i'd probably end up having to apply per-character formatting:

<!doctype html">
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;

        .xheight {
            font-size: 1.5ex;

        .descender {
            position: relative;
            bottom: -0.4ex;
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...

Rendering as:

enter image description here

Which, again, doesn't look as pleasing as i think it should.

Hey look, a penny!

enter image description here

share|improve this question
up vote 9 down vote accepted

The very short answer is "No."

Oldstyle figures ("lowercase") are specifically drawn that way. Legacy Postscript and TrueType fonts, for the most part, contain only tabular figures, which are lining or oldstyle according to the way the font is designed.

The Unicode Consortium isn't suggesting that lining figures can be distorted into oldstyle figures, simply that there is only one set of Unicode values for the digits 0-9, regardless of whether there are multiple glyphs for each digit.

Many OpenType fonts contain both lining and oldstyle figures, in both tabular and proportional widths, with tabular lining figures being the usual default. These are all available to applications which are OpenType-aware, typically through a preference setting in a character or paragraph style. They share Unicode values, but they are separately drawn alternate glyphs that exist (or don't) as outlines in the font software. (Of the font families in your CSS, Calibri has oldstyle figures, but Segoe UI does not.)

From a typographic point of view, not only is there no accepted way to do what you ask, I'd say there is no acceptable way, either. As you've discovered, trying to get there by shifting baselines and distorting lining figures looks horrible.

share|improve this answer
Good answer, but it seems to beg the question when browsers will be fully OpenType-aware, to the extent of being able to specify in CSS which style of numbers to use when a font contains both. – e100 Jul 12 '12 at 9:14
It is also an important point out that there is no way to guarantee that "Segoe UI", "Calibri", nor even sans-serif is the actual font displayed. The exact baseline and x height values used may look even more awful in Arbitrary Olde Style which the user has installed. – horatio Jul 12 '12 at 14:37
Any insight on why the Unicode Consortium didn't encode separate glyphs for uppercase and lowercase digits, but did encode separate glyphs for uppercase A (U+0041), lowercase a (U+0061), and even sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ (U+1D00)? I.e. what might be the reasoning that excludes separate uppercase and lowercase digits, but includes separate uppercase and lowercase letters? – Ian Boyd Jul 12 '12 at 17:22
And finally, can you name an OpenType font that contains both "uppercase" and "lowercase" digits? – Ian Boyd Jul 12 '12 at 17:29
@e100 There's nothing I've seen in the WC3 documentation that indicates that's being considered. The WC3 people don't go to the same Starbucks as I do, so I don't have an inside track on things. :) – Alan Gilbertson Jul 12 '12 at 20:37

The correct way to render lowercase digits/numbers or "Oldstyle figures" is to use CSS to select a suitable font feature. Obviously, the used font should then support this font feature in the first place. Real world support with webfonts does not seem to be too strong.

The CSS setting you are looking for is

font-feature-settings: "onum";

and the documentation:

Documentation of OpenType features, and onum feature in particular, can be found in Microsoft's OpenType Layout tag registry.

Alternative documentation about font features is available in the article How to code OpenType features in CSS.

Officially, you're supposed to use

font-variant-numeric: oldstyle-nums;

but support for that seems to be even weaker according to Mozilla's Browser Compatibility reference.

In theory this is better because it doesn't refer directly to OpenType features so it should work with non-OpenType fonts, too. In the same way you should use:

font-variant: small-caps; 

to enable small caps. Do not use OpenType feature setting such as

font-feature-settings: "smcp";

to achieve this effect because font-variant property is already well supported.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.