Design Style Guide's Typography section features font stacks for serif and sans-serif usages.
A well-balanced style guide, especially for technical spaces like ours, should also include a monospace choice.
Readability is highest-priority here, our most used choice across products monospace, monospace has it's main reason in a technical shortcoming.
Platforms/repository managers like GitHub or GitLab features successfully a system-specific stack as well.
- GitHub: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace
- SFMono-Regular: OS X Xcode 8/Terminal, Consolas: Windows (clear type enabled), Liberation Mono: Windows/Linux,
- GitLab: Menlo, "DejaVu Sans Mono", "Liberation Mono", Consolas, "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace
- Menlo: OS X Snow Leopard, DejaVu Sans Mono: Linux derivates, Consolas: Windows, Ubuntu: "Ubuntu Mono"
Proposal
Provide a short stack and a synthesized selection of above and experience:
/** * System font stack for monospace fonts * * `Menlo` – macOS 10.6+ * `Consolas` – Windows Vista & newer * `Liberation Mono` – Fedora, Ubuntu, … OFL licensed * `Courier New` – (Generic) web font fallback */ font-family: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
| Before | After |
 |  |
A CodePen providing an overview of the suggested stack (1), GitHub and GitLab's (2), CodePen's (3) and MW core's (4)
https://codepen.io/Volker_E/pen/pQpNEP
Updates
- DejaVu Sans Mono feels very wide, same issue is with only 'Courier' on Windows, therefore removed/replaced by "Courier New"
2019-04
- 'SFMono-Regular' would only be available if user willingly installs it in macOS, following those or similar instructions. It doesn't seem useful to include it in the stack for the time being, 'Menlo' is already an advantage over 'Courier New' or generic monospace.
Related gerrit patch
wikimedia-ui-base : master : 504224 Amend monospace system font stack
