Oldstyle vs. lining figures
Oldstyle figures rise and dip like lowercase letters; lining figures sit on one baseline at a uniform, capital-like height.
See it
What it is
Oldstyle figures have varied heights and some descend below the baseline, so they mingle with lowercase text instead of forming a row of capital-height blocks. Lining figures share a consistent height and sit on the baseline, which makes them behave more like capitals. Many OpenType families include both sets. Georgia, which Matthew Carter drew for Microsoft in 1996, uses oldstyle figures as its default, which is why its numbers look pleasantly bouncy in prose and unruly in a spreadsheet.
Use oldstyle figures in running prose, dates inside editorial text, and other places where numbers should join the reading rhythm. Use lining figures for headings, all-caps labels, forms, and displays where values need a crisp common edge. In CSS, font-variant-numeric switches them with oldstyle-nums or lining-nums.
Two traps. Oldstyle versus lining controls height, while proportional versus tabular controls width; those are separate choices. And the CSS request only works if the loaded font contains the corresponding OpenType onum or lnum feature.
Ask AI for it
Build a numeral specimen that compares oldstyle and lining figures in one font that ships both, such as EB Garamond from Google Fonts; confirm the onum and lnum features exist in the file before building. Set one row with CSS font-variant-numeric: oldstyle-nums and the other with font-variant-numeric: lining-nums. Show 0123456789 inside a lowercase paragraph, an all-caps heading, a date, and a price. Add separate proportional-nums and tabular-nums controls so width style is visibly independent from figure height. Use @supports to detect font-variant-numeric, label the baseline and cap-height guides, and fall back to a clear unsupported message rather than faking the glyphs.