How to have small numbers (text figures) in text? - html

Question

Text figures, as Wikipedia calls them, are something that sometimes makes text more readable. Normal-sized numbers usually stand out much more than the rest of the text. Especially in text that is in small-caps, the big numbers don't fit that well. How would I have smaller numbers in text using CSS?
An example of where I'd like to have smaller numbers:
.smallcaps {
font-variant: small-caps;
}
<p class="smallcaps">Example smallcaps 1337 text.</p>
<p>Another text with 42 numbers in it.</p>

Answer 1

What you are asking for are sometimes called "lowercase numerals" but, among typographers, are most often called "old style numerals" or "old style figures". That's what they're called in OpenType.
Some fonts support old style figures by default and some support them as alternate glyphs. In OpenType fonts that support them as alternate glyphs, they would be selected by activating the 'onum' feature.
In CSS, when using a font that supports oldstyle figures via the 'onum' feature, these can be selected using font-variant-numeric: oldstylenums. See https://www.w3.org/TR/css-fonts-4/#font-variant-numeric-prop for reference.

Answer 2

You can change text (numbers) size with css font-size property and span tag.
Like this :
.smallcaps {
font-variant: small-caps;
}
.num {
color :red;
/* font-size: smaller; */
/* font-size: x-small; */
font-size: xx-small;
}
<p class="smallcaps">Example smallcaps <span class="num">1337</span> text.</p>
<p>Another text with <span class="num">42</span> numbers in it.</p>
<p class="smallcaps">Example smallcaps 1337 text.</p>
<p>Another text with 42 numbers in it.</p>