The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,835 other subscribers
«

Not doing CSS much, I was this years old to learn about “font-variant-numeric: tabular-nums”

Posted by jpluimers on 2026/08/25

Via the below BSKY post (some call these skeets), I learned about the CSS feature “font-variant-numeric: tabular-nums” which switches on the OpenType tnum feature of fonts that support it.

More and more supports these tabular numerics, which makes all digits equally wide making both numbers in tables and lists as well as quickly changing numbers like sub-second timers a lot easier to read.

Failing example due to WordPress ditching the style

Enabling the tnum feature of a font
Default Modern:
style="font-variant-numeric: tabular-nums";		 Classic:
style="font-feature-settings: 'tnum'";
111222333444555
666777888999000
111222333444555
666777888999000
111222333444555
666777888999000

The problem with WordPress is that despite the td cells having the styles during editing, upon saving the styles get removed. That’s why the above table does not show the style difference any more. I tried putting the style in different places like in div elements inside the table, but that failed as well.

You can see the table succeeding in this gist: [Wayback/Archive] Enabling the tnum feature of a font: style="font-variant-numeric: tabular-nums"; and style="font-feature-settings: 'tnum'"; · GitHub

Rendered it is at [Wayback/Archive] Enabling the tnum feature of a font: style="font-variant-numeric: tabular-nums"; and style="font-feature-settings: 'tnum'"; (note the rendering will first show a “External Content Notice | rawgit.hack” remark with an “Open the page” button to open the actual rendered page).

For a comparison of tools to rendering gists, see Sweep the Strait: Minesweeper, but in the Straitt of Hormuz (plus some tests with RawGit alternatives).

Succeeding example, even in WordPress

Luckily in a blockquote this works, but requires a style="font-family: system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';" around the blockquote:

111222333444555
666777888999000

style="font-variant-numeric: tabular-nums";

111222333444555
666777888999000

style="font-feature-settings: 'tnum'";

111222333444555
666777888999000

Fonts that you can use

According to code modified from [Wayback/Archive] css – Font-variant-numeric for Google Fonts – Stack Overflow (thanks [Wayback/Archive] herrstrietzel), these serif Google Fonts support tnum (CodePen runnable at Filter google fonts by features – simple – serif):

Filter google fonts by features

  1. Merriweather:
    • category: serif
    • variants: regular, italic
    • subsets: cyrillic, cyrillic-ext, latin, latin-ext, vietnamese
    • axes: opsz, wdth, wght
    • features: aalt, c2sc, calt, case, ccmp, dlig, dnom, frac, liga, lnum, locl, numr, onum, ordn, pnum, sinf, smcp, ss01, ss02, ss03, subs, sups, tnum, zero
  2. Noto Serif:
    • category: serif
    • variants: regular, italic
    • subsets: cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, math, vietnamese
    • axes: wdth, wght
    • features: aalt, c2sc, case, ccmp, dnom, frac, liga, lnum, locl, mgrk, numr, onum, ordn, pnum, rtlm, sinf, smcp, ss03, ss06, ss07, subs, sups, tnum, zero
  3. Noto Serif Display:
    • category: serif
    • variants: regular, italic
    • subsets: cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, vietnamese
    • axes: wdth, wght
    • features: aalt, c2sc, case, ccmp, dnom, frac, liga, lnum, locl, mgrk, numr, onum, ordn, pnum, rtlm, smcp, ss03, subs, sups, tnum, zero
  4. Playfair:
    • category: serif
    • variants: regular, italic
    • subsets: cyrillic, cyrillic-ext, latin, latin-ext, vietnamese
    • axes: opsz, wdth, wght
    • features: aalt, afrc, c2sc, calt, case, ccmp, cv01, dlig, dnom, frac, liga, lnum, locl, numr, onum, ordn, pnum, rlig, sinf, smcp, ss05, ss10, ss11, ss14, subs, sups, tnum, zero
  5. Roboto Serif:
    • category: serif
    • variants: regular, italic
    • subsets: cyrillic, cyrillic-ext, latin, latin-ext, vietnamese
    • axes: GRAD, opsz, wdth, wght
    • features: dnom, frac, liga, lnum, locl, numr, onum, pnum, sinf, ss01, ss02, ss04, ss05, ss06, ss07, subs, sups, tnum, zero

From the same author, I also forked SO: get full woff2 file from google fonts dev api.

BSKY post

[Wayback/Archive] Post by @berthub.eu — Bluesky

En voor wie gevoelig is voor dat soort dingen (🙋‍♂️), data zijn nu netjes uitgelijnd waardoor opsommingen er minder rommelig uitzien. “font-variant-numeric: tabular-nums” is een mooi ding!

Screenshot (see link below)

Screenshot (see link below)

[Wayback/Archive] bafkreiboljzlncnsshpjia6lxth5nzixemieycuf7k4a2lxfmg7oyo374i (1000×258)

The example from the image is a [Wayback/Archive] Inbreng verslag van een schriftelijk overleg over het Fiche: Mededeling ‘EU-Agenda voor Steden’ (Kamerstuk 22112-4240).

Related

Queries:

–-jeroen

This entry was posted on 2026/08/25 at 18:00 and is filed under CSS, Development, Font, Google, GoogleFonts, HTML, Power User, Software Development, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

«