The monospace stack
Fixed pitch · resolves differently per platform · rendering from your machine
Waterfall
The characters that actually matter
Text, 14 / 17 / 20 px
A monospaced face is judged on the characters people confuse under pressure at two in the morning: the lowercase l against the digit one against the pipe, the capital O against zero, and rn against m. Everything else is decoration.
A monospaced face is judged on the characters people confuse under pressure at two in the morning: the lowercase l against the digit one against the pipe, the capital O against zero, and rn against m. Everything else is decoration.
A monospaced face is judged on the characters people confuse under pressure at two in the morning: the lowercase l against the digit one against the pipe, the capital O against zero, and rn against m. Everything else is decoration.
Notes
The generic monospace keyword carries a defect that has outlived
every attempt to fix it. In most browsers it does not merely select a face — it
also resets the font size to a fixed default, historically 13 pixels, ignoring
whatever the surrounding text was set at. The visible result is code that appears
a size or two smaller than the prose around it, in a way that resists being
corrected by setting font-size in ems, because the em is now
relative to the wrong number.
The reliable fix is to name a real face before the keyword, so the keyword
never gets to make the decision. Listing ui-monospace first does
this and also gets you the platform's own interface mono, which on Apple systems
is SF Mono and on Windows is Cascadia. Everything after it in the stack is
insurance.
Where the platform faces differ most is the zero. SF Mono and Cascadia slash or dot it; Consolas slashes it; DejaVu Sans Mono dots it; Menlo dots it; Courier does neither, which is one of several reasons Courier should not be in a stack written this decade. If a page shows identifiers, hashes, or anything a reader might retype, an undifferentiated zero is a genuine defect and not a matter of taste.
The other difference is width. Fixed pitch does not mean fixed across faces:
Menlo is appreciably wider than SF Mono, and Consolas is narrower than both. A
code block sized to hold eighty columns on one machine will wrap at seventy-six
on another. If eighty columns matters, it has to be enforced with a measure in
ch units, which are defined against whichever face actually
resolved.
Practical
| Resolves to | SF Mono or Menlo (macOS) · Cascadia Mono or Consolas (Windows) · DejaVu Sans Mono or Liberation Mono (Linux) · Roboto Mono (Android) |
|---|---|
| Zero | Slashed or dotted on every modern candidate; plain only if the stack falls through to Courier |
| Comfortable at | 0.85–0.9em relative to surrounding prose. Monospace reads larger than it measures |
| Line height | 1.45–1.6 for blocks. Tighter than prose, because the even colour of fixed pitch already separates the lines |
| Watch for | The generic-keyword size reset. Always name a face first |
| Do not use | Courier and Courier New as anything but the last resort — thin, wide, and drawn for a typewriter |
Stack used on this page
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
Named faces first, generic keyword last and only as a floor. The order runs from the platform's current choice through its previous ones, then to the face most Linux distributions install by default, and only then to the keyword whose side effects this ordering exists to avoid.