This is the best time to review the fonts used for the Desktop Improvements project. Arial and Times New Roman (created in the time of CRT screens) is significantly less readable in 2020 than modern fonts optimized for LCD screens and font anti-aliasing.
I use a userstyle to change the font to Noto Serif, whenever I switch back to the original font, my eyes are strained. Updating the fonts used is a major enhancement for the readers.
For legibility and encyclopedic style I prefer serif fonts. If there are strong preferences for sans fonts, there should be a user setting for it, similar to the editor font setting, or even better: using that globally.
To the serif/sans setting an option for dyslexic people could be added too: https://creativemarket.com/blog/is-comic-sans-easier-for-dyslexic-users-to-read
==== Proposed fonts ====
I've tested (and [[ https://userstyles.org/styles/179438/wikipedia-font-update | you can too ]], use the [[ https://github.com/openstyles/stylus#Releases | Stylus ]] addon):
* '[[ https://en.wikipedia.org/wiki/Noto_fonts | Noto Serif ]]',
* '[[ https://en.wikipedia.org/wiki/Roboto#Roboto_Slab | Roboto Slab Serif ]]' for the default font and
* '[[ https://www.fontsquirrel.com/fonts/lora | Lora ]]' (serif) for the headings.
All fonts loaded from the [[ https://tools.wmflabs.org/fontcdn/ | wmf fontcdn ]].
```
--font-monospace: 'Hack', 'Source Code Pro', 'Consolas', 'Monaco', 'Menlo', 'Noto Mono', 'Nimbus Mono L', 'Ubuntu Mono', monospace;
--font-sans: 'Noto Sans', 'Roboto', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI Historic', 'Lato', 'Liberation Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
--font-serif: 'Noto Serif', 'Roboto Slab', 'Georgia', 'Linux Libertine', 'Liberation Serif', 'Nimbus Roman', 'Times', serif;
--font-elegant-sans: 'Poppins', var(--font-sans);
--font-elegant-serif: 'Lora', var(--font-serif);
--font-logo: 'Poppins', var(--font-elegant-sans);
body { default }
h1-h6 { elegant }
```
Personally I haven't tested these fonts with non-latin scripts, that needs to be done yet and I hope there will be some advice regarding how that's done in MediaWiki development.
[[ https://en.wikipedia.org/wiki/Roboto#Roboto_Slab | Roboto ]] is the default for Android, I assume that covers every script we encounter.
[[ https://en.wikipedia.org/wiki/Noto_fonts | Noto ]] is just slightly different from Roboto. I've found it a bit more balanced and pleasant. I've seen Noto being used on quite a few websites. The [[ https://design.wikimedia.org/style-guide/visual-style_typography.html#typefaces | style guide ]] suggests using it as it "provides great coverage of languages".
For the headings, I've chosen Lora (serif) and Poppins (sans) from 10-20 randomly encountered fonts while searching for a candidate. No further effort went into those choices.
I use Poppins (bold) for the logo font too in Timeless. Bulky and blocky, see the [[ https://www.mediawiki.org/wiki/User:Aron_Manning/Skin_themes#/media/File:MediaWiki_mild_theme_-_main-page-2_-_Timeless_skin.png | screenshots ]].
For monospaced I prefer [[ https://sourcefoundry.org/hack/ | Hack ]], purposefully designed for source code, or [[ https://en.wikipedia.org/wiki/Source_Code_Pro | Source Code Pro ]] (Adobe). Hack has a [[ https://github.com/source-foundry/Hack/blob/master/docs/WEBFONT_USAGE.md#hack-by-cdn | package]] for installing on the fontcdn, Source Code Pro is already available. The rest is from Timeless: [[ https://en.wikipedia.org/wiki/Consolas | Consolas ]] is part of Windows since Vista, [[ https://en.wikipedia.org/wiki/Menlo_(typeface) | Menlo ]] (Mac) looks even better than Consolas. Monaco idk, Ubuntu Mono... I don't know why I get the impression with all Linux fonts that the width of the strokes is inconsistent.
[[ https://en.wikipedia.org/wiki/Inconsolata | Inconsolata ]] is also a favored font that could be considered. I find it thin and haven't tested it yet.
==== Current fonts used ====
Timeless skin:
```
@fonts: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
@fonts-secondary: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
@fonts-mono: 'Menlo', 'Consolas', 'Monaco', 'Noto Mono', 'Nimbus Mono L', monospace;
body, .toctitle h2 { fonts }
a, h1-h6, dt { secondary }
```
Vector skin:
```
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-sans: sans-serif; /* Arial on Windows */
body { sans }
print, mw-body h1, -content h1, -content h2 { serif }
```
==== Current font sizes ====
Pixel count is different on HiDPI.
MonoBook: 79.375% -> 12.7px
Modern (2008): 13px
Vector (2010): 87.5% -> 14px
Timeless (2015): 95% -> 15.2px
Minerva: 100% -> 16px
This reflects how devices were becoming higher resolution throughout the years.
The chosen fonts might depend on the font-size, <16px is a typical breakpoint.
I also envision a user setting to choose the font-size and one of: 1) sans-serif font for small font-size (<16px) 2) serif font 3) sans-serif font.
For default, I suggest following the industry practice of bigger fonts than before and changing the default font-size in the new Vector from 14px to the initial 100% (16px typical).