The Monospaced System UI CSS Font Stack

30 Sep 2020 in Software 2021-12-21

This post introduces a CSS Font Stack that picks the best monospaced font for each of the most common operating systems.

A font stack is a list of CSS font declarations. Typically, they are used to provide fallbacks in case web fonts fail to load. One particular font stack that made the rounds recently is the “System UI Font Stack”. It picks the default font for a number of operating systems:

font-family: system-ui, 
             -apple-system, BlinkMacSystemFont, 
             "Segoe UI", 
             "Roboto", 
             "Oxygen", 
             "Ubuntu", 
             "Cantarell", 
             "Fira Sans", 
             "Droid Sans", 
             "Helvetica Neue", 
             Arial, sans-serif;

Before we get to the monospaced part, it’s worth going through each font to see where its comes from and what the monospace equivalent should be:

Font	Usage
`system-ui`	The default system font when supported¹
`-apple-system`, `BlinkMacSystemFont`	Older versions of macOS and iOS
Segoe UI	Microsoft Windows, Xbox, etc.
Roboto	Newer versions of Android”²
Oxygen	Linux / KDE³
Ubuntu	Linux / Ubuntu⁴
Cantarell	Linux / GNOME 3⁵
Fira Sans	Firefox OS⁶.
Droid Sans	Older versions of Android⁷
Helvetica Neue	Even older versions of OSX
Arial, `sans-serif`	Fallback

The Monospaced System UI CSS Font Stack

For developers it would be nice to have a monospaced equivalent, but so far nobody seems to have assembled the necessary fonts. Given what we learned above, we can lookup the default monospace fonts for each platform, which gives us:

font-family: ui-monospace, 
             Menlo, Monaco, 
             "Cascadia Mono", "Segoe UI Mono", 
             "Roboto Mono", 
             "Oxygen Mono", 
             "Ubuntu Monospace", 
             "Source Code Pro",
             "Fira Mono", 
             "Droid Sans Mono", 
             "Courier New", monospace;

While most of these are pretty self-explanatory, i.e. the “Mono” or “Monospace” version of the same font family, some are worth expanding on:

ui-monospace: Future system monospace font⁸. Already supported in Safari 13.1⁹. This is also the only way to access macOS’ new ‘SF Mono’ typeface.
Menlo, Monaco: Default in older versions of macOS / OSX, but also used in browsers that don’t support ui-monospace on macOS.
Cascadia Code, Segoe UI Mono: These fonts are intended for Windows, but neither is included by default¹⁰. Windows does not have a default monospace font (unless you count ‘Courier New’). However, ‘Segue UI Mono’ has been shipped with some Microsoft software, so it’s worth including here.
‘Cascadia Mono’ is a new monospace font Microsoft is working on that ships with Windows Terminal¹¹, and is therefore likely to be installed by a more technical audience.
Source Code Pro: Default in GNOME¹², but from a different family as the default variable-width typeface ‘Cantarell’