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
==== How to test these fonts ====
* Install a userstyle (download: [[ https://github.com/openstyles/stylus#Releases | addon ]], [[ https://userstyles.org/styles/179438/wikipedia-font-update | userstyle ]]), open DevTools, then untick the fonts one by one, starting at the bottom. The last one enabled will be the visible font, except for the platform-specific fonts that aren't available on your device.
* Using the [[ https://www.mediawiki.org/wiki/User:Aron_Manning/Skin_themes | custom theme ]] which also resets the `font-size` in Timeless from 95% - 15.2px (typical) to the default 100% - 16px. For reference: Vector font-size is 87.5% - 14px.
* The Noto Serif and Lora fonts by downloading the [[ https://gerrit.wikimedia.org/r/570074 | patch ]] in skins/Timeless: `git review -d 570074`
* The Roboto (sans) font by downloading the [[ https://gerrit.wikimedia.org/r/570245 | patch ]] in skins/MonoBook: `git review -d 570245`
==== Resources ====
* [Wikimedia Design Style Guide -- Typography](https://design.wikimedia.org/style-guide/visual-style_typography.html#typefaces)
* [30 Incredibly Readable Serif Fonts for Your Next Web Design Project](https://www.elegantthemes.com/blog/resources/serif-fonts-for-your-next-web-design-project)
* [10 Best Sans-Serif Web Fonts From Google Fonts Library](https://www.forbes.com/sites/allbusiness/2014/03/06/10-best-sans-serif-web-fonts-from-google-fonts-library/)
* [11 Beautiful & Highly Readable Typefaces From Google Fonts](https://pixel77.com/11-beautiful-typefaces-google-fonts/)
* [10 Best fonts for improving reading experience](https://medium.com/productivity-revolution/10-best-fonts-for-improving-reading-experience-6171ce199e97)
* [5 open source fonts ideal for programming](https://opensource.com/article/17/11/how-select-open-source-programming-font)
* [Design Decoded: The Top 12 Easy to Read Fonts](https://www.vistaprint.com/hub/design-decoded-top-12-easy-read-fonts)
* [How Typography Determines Readability: Serif vs. Sans Serif, and How To Combine Fonts.](https://www.freecodecamp.org/news/how-typography-determines-readability-serif-vs-sans-serif-and-how-to-combine-fonts-629a51ad8cce/)
* [Serif vs. Sans Serif Fonts: Is One Really Better Than the Other?](https://designshack.net/articles/typography/serif-vs-sans-serif-fonts-is-one-really-better-than-the-other/)
==== Proposed fonts ====
* [[ https://en.wikipedia.org/wiki/Noto_fonts | Noto Serif ]] for >= 16px
* [[ https://en.wikipedia.org/wiki/Roboto#Roboto_Slab | Roboto Slab (serif) ]] for < 16px
* [[ https://en.wikipedia.org/wiki/Roboto | Roboto (sans) ]] for old skins, < 16px (MonoBook, Modern)
* [[ https://www.fontsquirrel.com/fonts/lora | Lora (serif) ]] for the headings.
* [[ https://github.com/itfoundry/poppins | Poppins (sans) ]] or [[ https://en.wikipedia.org/wiki/Verdana | VerdanaLato_(typeface) | Lato (sans) ]] or [[ https://github.com/itfoundry/poppins | Poppinsen.wikipedia.org/wiki/Verdana | Verdana (sans) ]] for the logo-text and header.
* [[ https://github.com/tonsky/FiraCode#projects-using-fira-code | Fira Code ]], [[ https://source-foundry.github.io/Hack/font-specimen.html | Hack ]] and [[ https://en.wikipedia.org/wiki/Source_Code_Pro | Source Code Pro ]] for monospaced typeface.
All fonts loaded from the [[ https://tools.wmflabs.org/fontcdn/ | wmf fontcdn ]] except 'Fira Code' and 'Hack'.
16px and above: Noto Serif
```
@ff@font-family-monospace: 'Fira Code', 'Hack', 'Source Code Pro', 'Consolas', 'Menlo', 'Monaco', 'Noto Mono', 'Nimbus Mono L', 'Inconsolata', 'Ubuntu Mono', monospace;
@ff@font-family-sans: 'Noto Sans', 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI Historic', 'Lato', 'Liberation Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
@ff@font-family-serif: 'Noto Serif', 'Roboto Slab', 'Georgia', 'Linux Libertine', 'Liberation Serif', 'Nimbus Roman', 'Times', serif;
@ff-default@font-family-base: @ffont-family-serif;
body { font-family: @ff-default;ont-family-base; }
```
Below 16px: Roboto (new Android font) before Noto (former Android font)
```
@ff@font-family-sans: 'Roboto', 'Noto Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI Historic', 'Lato', 'Liberation Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
@ff@font-family-serif: 'Roboto Slab', 'Noto Serif', 'Georgia', 'Linux Libertine', 'Liberation Serif', 'Nimbus Roman', 'Times', serif;
@ff-default@font-family-base: @ffont-family-sans;
body { font-family: @ff-default;ont-family-base; }
```
All sizes: Lora for headings, Poppins for logo
```
@ff@font-family-heading-sans: 'Poppins'', 'Lato', 'Verdana', @ff@font-family-sans;
@ff@font-family-heading-serif: 'Lora', @ff@font-family-serif;
@ff@font-family-heading: @ffont-family-heading-serif;
@ff@font-family-logo: @ffont-family-heading-sans;
h1-h6 { font-family: @ffont-family-heading; }
```
==== Reasoning ====
[[ https://en.wikipedia.org/wiki/Noto_fonts | Noto ]] is the previous default Android font. Just slightly different from Roboto, I've found it a bit more balanced and pleasant. Also widely used. The [[ https://design.wikimedia.org/style-guide/visual-style_typography.html#typefaces | style guide ]] suggests using it as it "provides great coverage of languages".
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 since 4.0, widely spread, also used on web pages, very clear, legible and recognized as the font for Android.
For the headings, I've chosen Lora (serif) and Poppins (sans) from 10-20 randomly encountered fonts while searching for a candidate.
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 ]]. A good, clean alternative is [[ https://en.wikipedia.org/wiki/Verdana | Verdana ]], which is available on Windows only.
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... too small and the stroke width feels inconsistent to me, but readable at small sizes. [[ https://en.wikipedia.org/wiki/Inconsolata | Inconsolata ]] is also a favored font that could be considered. I find it too thin.
Share your suggestions, too.
==== Current fonts used ====
Minerva skin:
```
@fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-monospace: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
h1, h2, blockquote { font-family: @font-family-serif; }
@supports ( font: -apple-system-body ) { html { font: -apple-system-body; }
```
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 }
```
Modern, MonoBook: `font-family: sans-serif;`
CologneBlue:
```
font-family: 'Verdana', 'Arial', sans-serif;
#sitetitle { font-family: 'Times', serif; }
```
==== Current font sizes ====
Pixel count is different on HiDPI.
CologneBlue (2003): 10pt -> 13+1/3px
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).