The Monospaced System UI CSS Font Stack

A CSS Font Stack that picks the best monospaced font for each operation system.

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:

/* ATTENTION COPY-PASTERS: WHAT YOU ARE LOOKING FOR IS BELOW */
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:

FontUsage
system-uiThe default system font when supported1
-apple-system, BlinkMacSystemFontOlder versions of macOS and iOS
Segoe UIMicrosoft Windows, Xbox, etc.
RobotoNewer versions of Android”2
OxygenLinux / KDE3
UbuntuLinux / Ubuntu4
CantarellLinux / GNOME 35
Fira SansFirefox OS6.
Droid SansOlder versions of Android7
Helvetica NeueEven older versions of OSX
Arial, sans-serifFallback

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. Before we continue, hit the clap button below to let me know if you liked this.

FontUsage
ui-monospaceFuture system monospace font8. Already supported in Safari 13.19. This is also the only way to access macOS’ new ‘SF Mono’ typeface.
Menlo, MonacoDefault in older versions of macOS / OSX, but also used in browsers that don’t support ui-monospace on macOS.
Cascadia Code, Segoe UI MonoThese fonts are intended for Windows, but neither is included by default10. 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 Terminal11, and is therefore likely to be installed by a more technical audience.
Source Code ProDefault in GNOME12, but from a different family as the default variable-width typeface ‘Cantarell’

© 2020. All rights reserved.

Powered by Hydejack v9.1.0-beta.8