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 wmf [[ https://tools.wmflabs.org/fontcdn/ | xtools webfont cache/mirror ]].
```
--font-monospace: 'Hack', 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'source-code-pro', monospace;
--font-sans: 'Noto Sans', 'Roboto', 'Merriweather Sans', sans-serif;
--font-serif: 'Noto Serif', 'Roboto Slab', 'Merriweather', serif;
--font-elegant-sans: 'Poppins', 'Raleway', 'Overpass', var(--font-sans);
--font-elegant-serif: 'Lora', var(--font-serif);
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.
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 (weight:800) 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, alternatively Consolas. Unfortunately, these aren't on the fontcdn, but [[ https://en.wikipedia.org/wiki/Consolas | Consolas ]] is part of Windows since Vista. The rest is from Timeless: [[ 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 lines are 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 }
```
Previous discussion: {T73240}