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

Assigned To

None

Authored By

	• Demian
	Feb 10 2020, 10:53 PM

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

-> T209915: Typography: Define a font stack for monospace fonts -- The most extensive documentation of the design decisions regarding the monospace font-stack.
T176636: Unify CSS font stack of monospace-styled elements across products -- Patches across products to unify font-family: monospace, monospace;
T209562: Font family for code needs improvement
T221043: Apply operating system font stack to MinervaNeue monospace elements

Questions

Are there any issues with the 4 fonts that are the primary focus of this task? 'Fira Code', 'Hack', 'Source Code Pro', 'Inconsolata'
Are there any issues with including 'Monaco', 'Noto Mono', 'Nimbus Mono L' from Skin:Timeless?
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'.
Should the fonts from "Material" skin be included? 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Typewriter'
How to gather feedback from the community? Most editors aren't affected by this change.

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T244425 Typography: documentation of research and decisions
		Declined		None	T244803 Typography: Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developers

Event Timeline

• Demian created this task.Feb 10 2020, 10:53 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptFeb 10 2020, 10:53 PM

• 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)

• Demian added a project: TechCom-RFC.Feb 10 2020, 11:48 PM

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.

• Demian updated the task description. (Show Details)Feb 11 2020, 12:20 AM

• Demian updated the task description. (Show Details)Feb 11 2020, 12:33 AM

In T244803#5870673, @Volker_E wrote:

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.

In T244803#5870782, @Volker_E wrote:

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.

• Demian updated the task description. (Show Details)Feb 11 2020, 1:14 AM

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

In T244803#5878407, @kchapman wrote:

@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.

Quiddity removed a project: Desktop Improvements (Vector 2022).Feb 14 2020, 6:11 PM

• 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)

Samples of 'Fira Code' from https://github.com/tonsky/FiraCode

Samples of 'Hack' from https://source-foundry.github.io/Hack/font-specimen.html and https://sourcefoundry.org/hack/

• 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.

In T244803#5891348, @Volker_E wrote:

@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?

ReaperDawn subscribed.Mar 15 2020, 4:01 PM

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.

In T244803#6104262, @Esanders wrote:

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

As a proposal: https://jetbrains.com/mono/.

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.

[Resetting assignee due to inactive user account]

Per T244803#6409393

Volker_E moved this task from Backlog to Declined / Duplicate / Invalid on the Wikimedia Design Style Guide board.Mar 10 2021, 4:48 PM

	F31619732: all_ligatures.png
	Feb 17 2020, 6:29 PM

	F31619730: php.png
	Feb 17 2020, 6:29 PM

	F31619731: javascript.png
	Feb 17 2020, 6:29 PM

Typography: Rethinking the monospace font stack (source code typography): proposing commonly used fonts tailored for developersClosed, DeclinedPublicActions