CSS Georgia Font Stack with Tabular Numbers

Georgia is used as both a primary and fallback typeface in many CSS stacks, as it is available on nearly all macOS and Windows machines. However, by default Georgia uses “old style, proportional numbers” or “text figures.” That is, the numbers have different widths so they don’t align well in tables, and different vertical size and alignment. Many (most?) other typefaces use “tabular, lining numbers” with similar horizontal size and vertical alignment. As the name indicates, they work well in tables. More detail on numerical types can be found in Practical Typography, and Using Numerical Styles. Can we get the ubiquity of Georgia and have tabular numbers without resorting to web fonts?

On almost every OS, there is similar system font that uses tabular numbers that blends well with Georgia. Then using CSS @font-face we can splice together Georgia with the tabular numerical alternate. For macOS and Debian/Ubuntu Linux, Charter is used. For Windows and Fedora Linux, Cambria or it’s clone Caladea is used. Android should end up using Noto Serif which is a fine default with tabular numbers as well.

The CSS to implement this strategy is:

/* serif tabular numbers for georgia on macOS, windows */
@font-face {
  font-family: "tabular-numbers";
  src: local("charter"), local("cambria");
  unicode-range: U+0030-0039;
}
font-family:
  /* 1 */ tabular-numbers,   /* tabular numbers for Windows, macOS, iOS */
  /* 2 */ georgia,           /* windows, macOS, iOS */
  /* 3 */ bitstream charter, /* debian & ubuntu */
  /* 4 */ caladea,           /* fedora */
  /* 5 */ serif;             /* everything else */

You can see the results on this CodePen. There are also a few variations one could do such as making Charter or Cambria be the primary font, with Georgia being the fallback. Either way, these stacks should produce a consistent cross-platform experience with a serif font using tabular numbers.