CSS System Font Stack - Monospace V1

Nick Galbreath

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

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.

It’s possible in a few years that the default will be a real system font. It’s claimed Firefox 55 will use Consolas or Menlo 1. And it looks like Chrome on modern Windows is using Consolas 2. And maybe Apple’s Safari will someday default to use the mysterious SFMono-Regular3.

Until then, we need to do something else.

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.

This is not a monospace font.
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.

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 nice.

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 followng 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 xwith iOS 10.3.1 it is rendered as Courier. In otherwords, 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 Franicsco has a monospace version “SFMono-Regular”. It’s beautiful. But it’s not a system font - it’s only available in Apple’s “Terminal” application and/or other custom applications. Developers can install it as a system font, but otherwise it’s not available to Safari on MacOS or 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:

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

This is V1 of my monospace stack. In V2 I’ll adjust to enhance these plaforms.

References