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

CSS System Font Stack Monospace v2

Get a great monospace font without using web-fonts. See the latest monospace system font stack based on work by GitHub and Bootstrap.

What is this?

For most systems the default monospace font is something horrible like Courier. This can easily improved by using an installed system font, that also avoids the overhead and hacks of using a web-font.

This an update to the original Monospace V1 article.

What’s Changed?

Since that first article, GitHub.com has been using a monospace system font stack for at least six months. Given the their focus on computer code and that GitHub is the 64th largest site on the Internet means they should know what a good monospace stack is. Likewise the UI framework Bootstrap has switched to an all system font stack with the release of v4. It powers 3.6% of the Internet.

But unlike the san-serif font stacks, there hasn’t been as much discussion as to why or how these stacks were created and updated.

Github 2018

As of 2018, GitHub.com uses the following for their monospace font:

font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    Courier,
    monospace;

THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
The quick brown fox jumped over the lazy dog.
0123456789
11111.11
88888.88
0Oo il1I! Z2z 8$s5S😺‼✏⚠😭⤴⤵

SFMono-Regular isn’t available on iOS Safari and isn’t available on macOS Safari unless you do some hackery. I figure 0.00001% of people actually do this, but those that do must really love this font. For most macOS and iOS users, this stack defaults to Menlo.

The reason to add Liberation Mono is unclear. It must solve some problem for a Linux distribution but not clear how. Since Liberation Mono is similar to Courier, I would have assumed it’s the default “monospace” font for these platforms. But maybe not. Either way it’s benign to put in the stack.

Bootstrap v4

With Bootstrap v4.0.0, the monospace stack is:

font-family:
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
The quick brown fox jumped over the lazy dog.
0123456789
11111.11
88888.88
0Oo il1I! Z2z 8$s5S😺‼✏⚠😭⤴⤵

More mysterious choices. Monaco has not been a primary font on macOS since 2009, and has never been part of iOS. Courier New is absolutely not as good as Courier for code or the screen. But with a semi-modern system, it’s unlikely either Monaco or Courier New will ever get used.

Conclusion

While I don’t quite understand some of the choices in these font stack, both of these provide a great monospace font for anyone using macOS, iOS, Windows or Android from the last five years. I figure that’s most of your audience.

Instead of tracking the latest browser/linux font combinations and the SFMono soap opera, I’m going to just use whatever Bootstrap uses and call it a day. It’s going to delivery a great monospace font without incurring the wrath of a web-font.

webdev

© 2018 Nick Galbreath