==== Proposal
Extend the monospaced font-stack to cater to contributors who have installed one of the following modern typefaces designed for source code, some of which have specific programming ligatures.
This is a nice addition for professionals and has no effect on regular users.
* [[ https://github.com/tonsky/FiraCode#projects-using-fira-code | 'Fira Code' ]] - Webfont, monospaced font with programming ligatures.
* [[ https://source-foundry.github.io/Hack/font-specimen.html | 'Hack' ]] - Webfont, a typeface designed for source code - large x-height + wide aperture + low contrast + custom zero.
* [[ https://en.wikipedia.org/wiki/Source_Code_Pro | 'Source Code Pro' ]] - Webfont from Adobe, "has been designed to work well in coding environments".
* [[ https://en.wikipedia.org/wiki/Inconsolata | 'Inconsolata' ]] - Favored for its legibility with small font-size.
===== Affected products
Only skins, extensions, other products that opt-in to import and use this font-stack definition from [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less | WikimediaUI Base ]].
[[ https://codesearch.wmflabs.org/search/?q=font-family-monospace&i=nope&files=&repos= | Currently ]] only Skin:MinervaNeue, VisualEditor and JsonConfig has an exact copy of that definition.
===== 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. ([[ https://codesearch.wmflabs.org/search/?q=monospace%2C%20monospace&i=nope&files=&repos= | unified ]], [[ https://codesearch.wmflabs.org/search/?q=monospace%3B&i=nope&files=&repos= | all ]])
* [[ https://phabricator.wikimedia.org/project/profile/3689/ | JSDoc WMF theme ]] (T209562)
==== Current status
[[ https://design.wikimedia.org/style-guide/visual-style_typography.html#typefaces | Wikimedia Design Style Guide -- Typography ]]
Declaration in WikimediaUI: [[ https://phabricator.wikimedia.org/source/wikimedia-ui-base/browse/master/wikimedia-ui-base.less | wikimedia-ui-base.less ]] line 205
core.git [[ https://github.com/wikimedia/mediawiki/blob/master/resources/lib/ooui/wikimedia-ui-base.less#L205 | /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
```
// Consolas: Windows; Menlo, Monaco: Mac; Noto Mono: ?; Nimbus Mono L: GNU+Linux; Inconsolata: generic; Ubuntu Mono: GNU+Linux; Courier New: Windows
@font-family-system-monospace: 'Menlo', 'Monaco', 'Noto Mono', 'Liberation Mono', 'Nimbus Mono L', 'Consolas', 'Inconsolata', 'Ubuntu Mono', 'Courier New', monospace;
@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} -- The most extensive documentation of the design decisions regarding the monospace font-stack.
* {T176636} -- Patches across products to unify `font-family: monospace, monospace;`
* {T209562}
* {T221043}
==== 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'
1. Are there any issues with including 'Monaco', 'Noto Mono', 'Nimbus Mono L' from Skin:Timeless?
1. 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'.
1. Should the fonts from "Material" skin be included? 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Typewriter'