CSS System Font Stack Monospace V1

Right now, most browsers use something like Courier for their default monospace font. This isn't very useful and not acceptable for code or programming samples.

Fortunately, it’s not hard to create a CSS-based system font stack with great monospace fonts. This expands on the work in System Shock Mono that originally described making a monospace CSS system font stack.

CSS

Below is a high-quality, monospace stack, that works on most modern (last eight years) systems.

/* 1: Current MacOS/iOS font since 2009
* 2: Current Windows font since 2007
* 3: If nothing else matches, use the system default.
* Either it's over 10 years old and it's hopeless. Or
* it's linux or other OS, which hopefully has better defaults
* and/or has been customized by the user.
*/
font-family:
/* 1 */ menlo,
/* 2 */ consolas,
/* 3 */ monospace;

Monaco

Monaco was the default monospace font for Mac, but has been superseded by Menlo starting in 2009 with MacOS 10.6. Oddly in MacOS 10.12.4 it is available but with iOS 10.3.1 it is rendered as Courier. In other words, it's out.

Any Linux or Android Font

I've seen Liberation Mono, Ubuntu Mono, Roboto Mono, and Droid Sans Mono listed in other font stacks. I'm not including them however and just defaulting to monospace after the main fonts. Why? For Linux:

Linux is a moving target with most OS vendors providing updates every six months

Linux users are more likely to actively customize and replace the default fonts. In which case, I should not override their preferences

Linux users are likely 0.01% of my audience.

I should understand Android more than I do, however I'm still defaulting to monospace for them since:

Android already defaults to something other than Courier (true?) or has extremely limited choices.

Android and Google Chrome appear to be actively improving their default font choices.

Summary

It's possible in a few years this won’t be necessary as the default monospace font will be something reasonable. It's claimed Firefox 55 60 will use Menlo or Consolas (Bugzilla #713680). And it looks like Chrome on modern Windows is using Consolas (Chromium Bug #388087). Maybe Apple's Safari will someday default to use the mysterious SFMono-Regular.

Until then it’s easy to add a high-quality monospace font with zero overhead to the end user.