How to construct "lowercase digits" (i.e. text figures)?


Question

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

enter image description here

Background

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">
<html>
<head>
    <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;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

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

1
12
7/12/2012 1:11:00 AM

Accepted Answer

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.

11
7/12/2012 6:19:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^