What are old-style and lining figures?

Old-style figures are numerals designed to behave like lowercase letters: some sit within the x-height, some rise above it like an ascender, and some drop below the baseline like a descender. Lining figures are numerals that all share the same height, usually close to the height of capital letters, and sit neatly on the baseline. Old-style figures blend into running text because they match the rhythm of lowercase words, while lining figures stand out and suit headings, tables, capital letters and interfaces. Many serif fonts, and some sans-serifs, include both sets. In CSS you switch between them with font-variant-numeric: oldstyle-nums and font-variant-numeric: lining-nums, which turn on the OpenType features onum and lnum.

The difference is easy to overlook, but it changes how a page feels. A paragraph full of dates and quantities set in lining figures can look as if it's peppered with small capitals, while old-style figures in a price table can look uneven and hard to scan. In this article you'll learn how each style is shaped, where they came from, when to use each, how to combine them with tabular and proportional spacing, and how to set them up in CSS with sensible defaults.

How Each Style Is Shaped

Lining figures are the numerals most people picture. Every digit from 0 to 9 has the same height and sits on the baseline. In many fonts that height equals the cap height. In some, the figures are drawn slightly shorter than capitals so they don't dominate text.

Old-style figures, also called text figures or lowercase numerals, vary in height. In a typical old-style set:

• 0, 1 and 2 sit within the x-height, like the letters a, c and e.
• 6 and 8 rise above the x-height, like the ascenders on b, d and h.
• 3, 4, 5, 7 and 9 descend below the baseline, like the descenders on g, p and y.

Designs vary between typefaces. In some fonts the 4 doesn't descend, and the exact proportions change from one family to the next, but the principle is the same: the numbers have ascenders and descenders.

You can see both sets side by side with a small test:

<p class="oldstyle">Call 0161 496 0738 before 15 March 2027.</p>
<p class="lining">Call 0161 496 0738 before 15 March 2027.</p>

p {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.5rem;
}

.oldstyle {
  font-variant-numeric: oldstyle-nums;
}

.lining {
  font-variant-numeric: lining-nums;
}

In the first line, the digits weave up and down with the letters. In the second, they form a solid block the height of the capital C and M.

Where They Came From

Old-style figures are the older form in Western printing. Renaissance and later book types used numerals with varying heights because they were designed to be read within text, alongside lowercase letters. For centuries they were simply how numbers looked in books.

Lining figures became common in the 19th and 20th centuries with the growth of commercial printing, advertising and business documents. Numbers in tables, timetables and ledgers needed to be uniform, and numerals that matched capital letters suited signs, posters and headings. Many typefaces from that period, and most early digital fonts, shipped only with lining figures.

Today, quality digital fonts often include both, along with tabular and proportional versions of each. That gives you four combinations to choose from.

The Four Figure Combinations

Figure style (old-style or lining) and figure spacing (proportional or tabular) are independent. A well-equipped font can offer all four:

Combination	Typical use	CSS
Proportional old-style	Body text, essays, books	oldstyle-nums proportional-nums
Tabular old-style	Tables within a literary or editorial design	oldstyle-nums tabular-nums
Proportional lining	Headings, captions, UI labels	lining-nums proportional-nums
Tabular lining	Data tables, prices, dashboards, forms	lining-nums tabular-nums

Tabular old-style figures are the least common in practice, but they're useful in editorial layouts where a small table sits inside a page of old-style text and lining figures would look out of place.

When to Use Old-Style Figures

Old-style figures suit text that's meant to be read continuously:

• Long-form articles and books: Dates, page references and quantities blend in rather than interrupting the line.
• Editorial and literary sites: They give a traditional, book-like texture.
• Text with lots of numbers in sentences: Historical writing, recipes in prose, academic text with citations.
• Alongside small caps: Old-style figures are close in height to small capitals, so they sit comfortably in a line set with small caps, such as an abbreviation followed by a year.

.article-body {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

When to Use Lining Figures

Lining figures suit contexts where numbers need to be uniform or sit with capitals:

• Headings and titles: A year in a headline usually looks better with lining figures, especially when the heading uses title case.
• All-caps text: Old-style figures look too small and uneven next to capital letters.
• Tables and data: Uniform heights make values easier to compare, especially combined with tabular spacing.
• Forms, prices and UI: Interfaces typically use lining figures for clarity.
• Phone numbers, codes and identifiers: Uniform height makes them easier to read digit by digit, though either style works if the font's figures are clearly drawn.

h1,
h2,
h3,
.caps,
table,
input,
.price {
  font-variant-numeric: lining-nums;
}

table,
.price {
  font-variant-numeric: lining-nums tabular-nums;
}

Setting Up a Sensible Default Stylesheet

Fonts don't agree on which figures are the default. EB Garamond and Georgia default to old-style figures, for instance, while most sans-serif interface fonts default to lining figures. If you want consistent results, set the figure style explicitly rather than relying on the font.

A typical editorial setup:

:root {
  font-family: "Source Serif 4", Georgia, serif;
}

/* Running text: old-style, proportional */
body {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Headings and capitals: lining */
h1, h2, h3, h4,
.eyebrow,
abbr {
  font-variant-numeric: lining-nums proportional-nums;
}

/* Data: lining, tabular */
table,
.stat,
.price,
time.timestamp {
  font-variant-numeric: lining-nums tabular-nums;
}

Because font-variant-numeric sets the whole group of numeric features at once, each rule must list every value you want. Writing font-variant-numeric: tabular-nums on table resets the figure style to the font's default, so include lining-nums explicitly.

With font-feature-settings

The low-level equivalent uses the onum, lnum, pnum and tnum tags:

body {
  font-feature-settings: "onum" 1, "pnum" 1;
}

table {
  font-feature-settings: "lnum" 1, "tnum" 1;
}

This works, but any other features you've enabled with font-feature-settings, such as stylistic sets, would be lost on table unless you repeat them. The high-level property is easier to manage.

Tailwind and WordPress

In Tailwind CSS, the utilities are oldstyle-nums, lining-nums, tabular-nums and proportional-nums, and they can be combined on one element:

<article class="oldstyle-nums proportional-nums">...</article>
<table class="lining-nums tabular-nums">...</table>

In a WordPress block theme, add the CSS to the styles.css property of theme.json or to your theme's stylesheet, since theme.json has no dedicated setting for figure styles:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "styles": {
    "css": "body { font-variant-numeric: oldstyle-nums proportional-nums; } table, h1, h2, h3 { font-variant-numeric: lining-nums; }"
  }
}

Choosing Fonts With Both Sets

To use either style, the font must include it. Families known for good figure options include:

• EB Garamond: Old-style by default, with lining figures available.
• Source Serif 4 and Source Sans 3: Include old-style and lining figures in both proportional and tabular widths.
• Alegreya and Alegreya Sans: Designed for literature, with old-style and lining options.
• Georgia: A system font with old-style figures by default, but no lining alternative.

Check the font's specimen, or inspect the file for onum and lnum features. If you subset fonts for performance, keep those features in the output:

pyftsubset SourceSerif4-Variable.ttf \
  --unicodes="U+0000-00FF,U+2013-2014,U+2018-201E,U+2026" \
  --layout-features+=onum,lnum,pnum,tnum \
  --flavor=woff2 \
  --output-file=source-serif-4-latin.woff2

Watch the Fallback

If the web font hasn't loaded and the fallback is Georgia, your lining-figure headings will briefly show old-style figures because Georgia has no lining set. If the fallback is Times New Roman, which uses lining figures, your old-style body text will show lining figures until the swap. Either way, the difference is cosmetic, but it's worth knowing when you see it during testing.

Common Mistakes

• Old-style figures in all caps: "FOUNDED 1987" with old-style figures looks broken. Use lining figures with capitals.
• Old-style figures in data tables: The varying heights make columns harder to scan.
• Resetting the figure style by accident: Setting only tabular-nums replaces your earlier oldstyle-nums or lining-nums choice on that element.
• Assuming every font has both: If the CSS changes nothing, the font has only one set.
• Mixing styles in one sentence: Pick one style per context and apply it consistently.

For the spacing side of the same choice, see tabular and proportional numerals.

---

FAQ: Old-Style and Lining Figures

---

Conclusion

Old-style and lining figures are two answers to the same question: should numbers behave like lowercase letters or like capitals? Old-style figures, with their ascenders and descenders, sit quietly in running text and pair well with small caps. Lining figures, all one height, belong with headings, capitals, tables, prices and interfaces where uniformity helps.

Choose a font that includes both, set the figure style explicitly with font-variant-numeric instead of relying on each font's default, remember that each declaration sets the whole numeric group, and keep the onum and lnum features when you subset. With those defaults in place, numbers will look right in every part of the page without anyone having to think about them.