Page MenuHomePhabricator

Typography: Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers
Closed, DeclinedPublic

Description

Proposal

The purpose of this proposal is to extend the monospace font-stack to cater to professional contributors who have installed one of the following modern typefaces designed for source code. This would benefit serious contributors and has no effect on regular users.

Proposed fonts:

  • 'Fira Code' - Webfont, monospaced font with programming ligatures.
  • 'Hack' - Webfont, a typeface designed for source code - large x-height + wide aperture + low contrast + custom zero.
  • 'Source Code Pro' - Webfont from Adobe, "has been designed to work well in coding environments".
  • 'Inconsolata' - Favored for its legibility with small font-size.

Affected products

Products (skins, extensions, other) that opt-in to import and use this font-stack definition that would be defined in WikimediaUI Base.
Currently only Skin:MinervaNeue, VisualEditor and JsonConfig follow (by copying) those definitions.

Products that can benefit from it

  • new Skin:Vector (Desktop Improvements project)
  • Skin:MinervaNeue (mobile)
  • Skin:Timeless (up to Isarra)
  • Skin:Example
  • Extensions: Visual Editor, CodeEditor, Flow, etc. (unified, all)
  • JSDoc WMF theme (T209562)
Current status

Wikimedia Design Style Guide -- Typography

Declaration in WikimediaUI: wikimedia-ui-base.less line 205
core.git /resources/lib/ooui/wikimedia-ui-base.less

@font-family-monospace:           'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
@font-family-monospace--fallback: monospace, monospace; // See T176636

Minerva:

// Provide better operating system-specific monospace stack, see T209915.
@font-family-monospace:           'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
@font-family-monospace--fallback: monospace, monospace; // See T176636

Timeless:

@fonts-mono: 'Menlo', 'Consolas', 'Monaco', 'Noto Mono', 'Nimbus Mono L', monospace;

Material:

@md-ui-typography-roboto-mono: 'Roboto Mono', 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;

CodeEditor (.ace_editor):

font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Droid Sans Mono', monospace;

The rest uses the system default.

Proposed declaration

Previously (sample): https://gerrit.wikimedia.org/r/c/mediawiki/core/+/570597/12/resources/src/mediawiki.less/wikimedia-ui-fonts.less#72

// Fonts typically available installed by the OS:
// 'Menlo', 'Monaco': new Mac, old Mac; Noto Mono: ?; 'Liberation Mono', 'Nimbus Mono L': GNU+Linux; 'Consolas': Window; 'Inconsolata': generic, small; 'Ubuntu Mono': GNU+Linux, small; Courier New: Windows, small
@font-family-system-monospace: 'Menlo', 'Monaco', 'Noto Mono', 'Liberation Mono', 'Nimbus Mono L', 'Consolas', 'Inconsolata', 'Ubuntu Mono', 'Courier New', monospace;

// Fonts optionally installed by the user: 'Fira Code': webfont, ligatures; 'Hack': webfont; 'Source Code Pro': webfont, Adobe
@font-family-monospace: 'Fira Code', 'Hack', 'Source Code Pro', @font-family-system-monospace;

Note: This proposal is NOT proposing to rename these variables to @ff-mono and @ff-system-mono.

Prior art

Questions

  1. Are there any issues with the 4 fonts that are the primary focus of this task? 'Fira Code', 'Hack', 'Source Code Pro', 'Inconsolata'
  2. Are there any issues with including 'Monaco', 'Noto Mono', 'Nimbus Mono L' from Skin:Timeless?
  3. Are there any issues with the order of preference for the added fonts?
    • The reason for 'Inconsolata' being after 'Consolas' is the small font metrics, similar to 'Ubuntu Mono'.
  4. Should the fonts from "Material" skin be included? 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Typewriter'
  5. How to gather feedback from the community? Most editors aren't affected by this change.

Event Timeline

Demian renamed this task from RfC: [Design] Monospaced font stack (source code typography): add commonly used fonts tailored for developers to RfC: [Design] Monospace font stack (source code typography): add commonly used fonts tailored for developers.Feb 10 2020, 11:37 PM
Demian updated the task description. (Show Details)

This needs clearer explanation of what is improved by adding those fonts. Just adding fonts that might be installed on a few random machines doesn't automatically result in added value.
Also there seems to be a misunderstanding about the reason behind @font-family-monospace--fallback. Please refer to the git history and inform yourself.

This needs clearer explanation of what is improved by adding those fonts. Just adding fonts that might be installed on a few random machines doesn't automatically result in added value.

I'll present examples. As a preliminary, the added value is to professional contributors, who have a system set up with one of these fonts for effectively working with source code.

Also there seems to be a misunderstanding about the reason behind @font-family-monospace--fallback. Please refer to the git history and inform yourself.

This RfC has nothing to say about @font-family-monospace--fallback. What misunderstand are you referring to?
Please link to the specific repo / file history, or give a clear explanation. The commit that added it to wikimedia-ui-base.less gives no clues about what you mean and the variable is not used at all. This is not helpful.

The separation of @font-family-system-monospace and @font-family-monospace mislead me.

The separation of @font-family-system-monospace and @font-family-monospace mislead me.

Sorry about that, I should have documented it.

@font-family-system-monospace includes fonts typically installed by the OS.
@font-family-monospace adds higher-priority fonts optionally installed by the user.

kchapman added a subscriber: kchapman.

@Demian we don't believe this is a RFC so untagging TechCom

@Demian we don't believe this is a RFC so untagging TechCom

Please advise how to request feedback from the community about improving the monospace font stack and fonts chosen.

Demian renamed this task from RfC: [Design] Monospace font stack (source code typography): add commonly used fonts tailored for developers to RfC: [Design] Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers.Feb 17 2020, 6:26 PM
Demian updated the task description. (Show Details)
Demian renamed this task from RfC: [Design] Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers to RfC: [Typography] Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers.Feb 17 2020, 6:38 PM

@Demian Please note, how RFCs are described and what scope they are meant for. Task in general are evaluated in regards to priorities, scope and workload and possibly be commented upon by folks here on Phabricator.

@Demian Please note, how RFCs are described and what scope they are meant for. Task in general are evaluated in regards to priorities, scope and workload and possibly be commented upon by folks here on Phabricator.

There's no such concept as community RfC on mediawiki-wiki / phab?

Volker_E renamed this task from RfC: [Typography] Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers to [Typography] Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers.Apr 21 2020, 2:51 AM
Volker_E triaged this task as Low priority.

This would benefit serious contributors and has no effect on regular users.

We are not in control of what fonts are installed on other users machines, and often they aren't either. Some future version of Windows, or a common application may come bundled with one of these fonts, and which point "regular" users who aren't professional coders might start seeing ligatures in their editor leading to unnecessary confusion.

Even for professional coders, code ligatures are a personal preference. I've tried them and found they made the code less readable for me.

Given that users who want this can modify their global user CSS, I don't see the value in adding additional support for it.

Even for professional coders, code ligatures are a personal preference. I've tried them and found they made the code less readable for me.

Good point, thank you for the feedback.
Given the subjective nature of font choices I imagine using these fonts (with ligatures or not) would better be offered in an interface settings menu (T91201) or within user preferences.

Demian renamed this task from [Typography] Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers to Typography: Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers.Jul 6 2020, 3:18 PM

We're not going to reference fonts, that might be optionally installed on user machines. That's a slippery slope and ends up in an endless numbers of possible fonts in the stack with value to a very small number of users with possible maintenance issues like display bugs reported caused by those not widely used fonts.

Aklapper added a subscriber: Aklapper.

[Resetting assignee due to inactive user account]