The Monospaced System UI CSS Font Stack

The Monospaced System UI CSS Font Stack

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", 
             "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:

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:

Future system monospace font8. Already supported in Safari 13.19. 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 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 Pro
Default in GNOME12, but from a different family as the default variable-width typeface ‘Cantarell’

© 2022 Florian Klampfer

Powered by Hydejack v9.1.6