`font-variant-numeric`
======================

January 24, 2021
https://stefan.vanburen.xyz/blog/font-variant-numeric/


I was reminded of the `font-variant-numeric` <abbr title="Cascading Style Sheets">CSS</abbr> property by [Jim Nielsen, here](https://twitter.com/jimniels/status/1353081335347351552), and ended up [using it in a similar way](https://git.sr.ht/~svbn/stefan.vanburen.xyz/commit/d6272469c9caf6b2286fa65cdef385f10e258642) for the dates on my [list of blog posts](/blog).

For context, without tabular-nums enabled, numbers on this site look like this:

0123456789
{style="font-size: var(--size-700)"}

And with it enabled, they look like this:

0123456789
{style="font-size: var(--size-700)" class="nums"}

At least on Apple platforms, where the system sans-serif font is [San Francisco](https://developer.apple.com/fonts/), the "0" and "1" characters have a little additional spacing, making them equal size to the rest of the digits.

Glad to get this changed --- the previous look was somewhat off-putting, now that I look at it in comparison.
There are so many neat <abbr title="Cascading Style Sheets">CSS</abbr> properties nowadays for [all sorts of typographical situations](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant).