Page MenuHomePhabricator

Typography: Define a font stack for monospace fonts
Closed, ResolvedPublic

Assigned To
Authored By
Volker_E
Nov 20 2018, 5:43 AM
Referenced Files
F27266888: image.png
Nov 21 2018, 12:58 AM
F27266892: image.png
Nov 21 2018, 12:58 AM
F27263183: image.png
Nov 20 2018, 7:04 AM
F27263058: image.png
Nov 20 2018, 6:46 AM
F27263063: image.png
Nov 20 2018, 6:46 AM
F27262839: image.png
Nov 20 2018, 5:43 AM
F27262844: image.png
Nov 20 2018, 5:43 AM
Tokens
"Orange Medal" token, awarded by Krinkle.

Description

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;
BeforeAfter
image.png (488×1 px, 84 KB)
macOS w Menlo
image.png (494×1 px, 81 KB)

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

Event Timeline

Some more-well know sites (like CodePen or OOUI demos ;P) use
Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace, resulting in Monaco on OS X, which I personally find inferior to Menlo – more playful than necessary:

Monaco (current OOUI demos)Menlo (from proposed stack)
image.png (646×1 px, 120 KB)
image.png (640×1 px, 113 KB)
-Windows: Consolas
-
image.png (734×1 px, 320 KB)

This CodePen should provide a better comparison of the different options.

Another comparison, again MacOS

monospace, monospaceOS specific font stack
image.png (1×2 px, 314 KB)
image.png (1×2 px, 321 KB)

Change 475949 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[wikimedia-ui-base@master] Add monospace font stack

https://gerrit.wikimedia.org/r/475949

Change 475949 merged by jenkins-bot:
[wikimedia-ui-base@master] Add monospace font stack

https://gerrit.wikimedia.org/r/475949

Volker_E claimed this task.
Volker_E updated the task description. (Show Details)