: How to construct "lowercase digits" (i.e. text figures)? Is there an accepted way to adjust font glyphs in order to simulate text figures? Background Text figures are "lowercase" digits. You
Is there an accepted way to adjust font glyphs in order to simulate text figures?
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
My first attempt (in photoshop) would be to:
smush 012
nudge 34579 down
leave 68 where they are:
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:
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:
Which, again, doesn't look as pleasing as i think it should.
Hey look, a penny!
More posts by @Vandalay110
2 Comments
Sorted by latest first Latest Oldest Best
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:
MDN: font-feature-settings
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.