CTO and co-founder of Signal Sciences. Author and speaker on software engineering, devops, and security.

CSS Georgia Font Stack with Tabular Numbers

Replace Georgia’s dripping numbers with tabular numbers with this cross platform system font stack.

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.

OS Result
macOS, iOS Georgia with numbers from Charter
Windows Georgia with numbers from Cambria
Debian, Ubuntu Bitstream Charter
Fedora Caladea (Cambria clone)
Everyone else serif

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;
  /* 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.


© 2018 Nick Galbreath