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

CSS System Font Stack Monospace v1

Most operating systems ship with a decent monospace fonts. Use them.

Nick Galbreath · April 9, 2017

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;

This is what it looks like on your browser:

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😺‼✏⚠😭⤴⤵

Winners

If font below is not available on your system, it will be rendered in a serif font.

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😺‼✏⚠😭⤴⤵

Menlo

Menlo has been the current Mac (both MacOS and iOS) monospace system font since 2009 with the release of MacOS 10.6. It is unique to Mac, so it comes first.

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😺‼✏⚠😭⤴⤵

Consolas

Consolas has been available on Windows products since 2007.

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😺‼✏⚠😭⤴⤵

monospace (default)

This is the default monospace font and it's probably something gross like Courier New. But maybe you are lucky and it's one of the above or something nicer.

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😺‼✏⚠😭⤴⤵

Losers

The following fonts were rejected since they are deprecated, don't work across platforms, or don't exist.

Lucida Console

Lucida Console has been the main monospace font on windows products for a very long time and is still available on Windows 10. That said, Consolas is likely a better choice for modern systems.

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😺‼✏⚠😭⤴⤵

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.

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😺‼✏⚠😭⤴⤵

Andale Mono

Similar to Menlo, Andale Mono is an old font and available on MacOS but no longer on iOS. It's out.

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😺‼✏⚠😭⤴⤵

Courier

No comment.

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😺‼✏⚠😭⤴⤵

Courier New

It’s so thin since it was designed for a piece of metal hitting a sloppy typewriter ribbon smashing ink onto a paper. Why this even appeared at all as a digital font, I have no idea.

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

The new San Francisco font has a monospace version "SFMono-Regular". It's beautiful. But it's not a true system font - it's only available in Apple's Terminal application and/or other custom applications via XCode. On macOS, you can manually install SFMono-Regular using some hackery so it can be used in CSS, but no such trick exists for iOS. Until Apple clears this up, it's not going in the font stack.

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😺‼✏⚠😭⤴⤵

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.

© 2018 Nick Galbreath