12

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

Improve this question

2 Answers 2

Reset to default
11

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.

Improve this answer
9
  • 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
    Commented Jul 12, 2012 at 9:14
  • 1
    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
    Commented Jul 12, 2012 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
    Commented Jul 12, 2012 at 17:22
  • And finally, can you name an OpenType font that contains both "uppercase" and "lowercase" digits?
    – Ian Boyd
    Commented Jul 12, 2012 at 17:29
  • 1
    @IanBoyd: Regular uppercase and lowercase characters are distinct in meaning and thus switching between them is much more than a stylistic choice. Uppercase and lowercase numbers are identical in meaning, however, and thus simply are nothing that Unicode wants to encode – for the same reason that there are no specific encodings for italics, small caps, lowercase and similar. The small-caps characters you find are only encoded because they have a distinct meaning in phonetics and should not be used for emphasis (for this, you should use OpenType features or similar).
    – Wrzlprmft ♦
    Commented Feb 17, 2015 at 19:15
6

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.

Improve this answer
4
  • No, you never want to use font-variant: small-caps; because that create FAKE small caps. Always use the other one, and always use OpenType fonts. Simple and solved.
    – tchrist
    Commented Feb 24, 2017 at 3:08
  • According to definition (w3.org/TR/CSS21/fonts.html#propdef-font-variant) it's acceptable if small-caps feature is faked. That is not a requirement and high quality user agent would do the right thing (map it to OpenType feature). I agree that if you rather have no change instead of faked small caps, you should use font-feature-settings. Usually fake small caps is better than having no effect at all.
    – Mikko Rantalainen
    Commented Feb 24, 2017 at 5:58
  • @tchrist: ...the difference being? If it's capital, and it's small, it's a small cap. Problem solved.
    – Vikki
    Commented Dec 28, 2021 at 4:57
  • Faked small caps does the "small" part by scaling the actual upper case letters smaller to match the normal lower case x-letter height. Of course, this also makes the letters visually thinner because the whole letter is scaled down which makes the stemlines narrower, too. Proper small caps support has separate set of letters which are optically heavier to match the weight of the upper case letters. A well made small caps set may also have slightly different shapes for the small caps letter to match the overall font better.
    – Mikko Rantalainen
    Commented Dec 29, 2021 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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