Page MenuHomePhabricator

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

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
macOS w Menlo

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.

Event Timeline

Volker_E created this task.Nov 20 2018, 5:43 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 20 2018, 5:43 AM

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)
-Windows: Consolas
-
matmarex removed a subscriber: matmarex.Nov 20 2018, 7:27 PM

I have no opinion.

Volker_E updated the task description. (Show Details)Nov 20 2018, 8:46 PM

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

Volker_E added a comment.EditedNov 21 2018, 12:58 AM

Another comparison, again MacOS

monospace, monospaceOS specific font stack

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 closed this task as Resolved.Dec 4 2018, 5:15 PM
Volker_E claimed this task.
Volker_E updated the task description. (Show Details)Apr 15 2019, 11:28 PM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Apr 16 2019, 12:25 AM
Volker_E updated the task description. (Show Details)Apr 16 2019, 12:37 AM
Krinkle removed a subscriber: Krinkle.