This is an umbrella task of research and proposals regarding fonts used in the web interface.
Every user might have different preferences of what fonts, font sizes are the most readable, legible and pleasant, therefore these task are looking for way to give the readers and editors the choice to use the most appropriate and comfortable configuration in their circumstances. This task no longer targets changing the defaults. These options are meaningful to be presented in a viewing preferences dropdown:
{T244748}
== Discussions, research
* [Font stack documentation](https://www.mediawiki.org/wiki/Wikimedia_User_Interface/Use_cases/Font_family_stack)
* [Wikimedia Design Style Guide -- Typography](https://design.wikimedia.org/style-guide/visual-style_typography.html#typefaces)
* [Universal Language Selector/WebFonts](https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts)
* [Projects/Improve mobile reading experience](https://www.mediawiki.org/wiki/Design/Projects/Improve_mobile_reading_experience)
==== Typography refresh (2014)
* https://www.mediawiki.org/wiki/Typography_refresh/Font_choice
* https://www.mediawiki.org/wiki/Typography_refresh
* https://www.mediawiki.org/wiki/Typography_refresh#Why_is_the_type_size_and_leading_increased?
* https://www.mediawiki.org/wiki/Typography_refresh#Why_are_we_using_serif_fonts_for_the_headings?
* https://www.mediawiki.org/wiki/Typography_refresh#Why_did_we_specify_new_sans-serif_fonts?
* https://www.mediawiki.org/wiki/Typography_refresh#What_about_using_webfonts?
* https://www.mediawiki.org/wiki/Talk:Typography_refresh#Breakdown
==== Sans-serif
* -> {T175877} -- The most extensive documentation of the design decisions regarding the sans-serif font-stack.
* {T212293}
* {T173228}
* {T73240}
==== Monospace
* -> {T209915} -- The most extensive documentation of the design decisions regarding the monospace font-stack.
* {T176636} -- Patches across products to use `font-family: monospace, monospace;`
* {T209562}
* {T221043}
==== Font rendering issues
{T245788}
* {T63470}
* {T65512}
* {T65591}
* {T65720}
* {T245467}
== Test a few 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.
* The Noto Serif font for body and Lora (serif) font for heading with 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 Lato (sans) font for body and Lora (serif) font for heading by downloading the [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Timeless/+/570074 | patch ]] in skins/Timeless: `git review -d 570074`
* The Roboto (sans) font for body and Noto Serif font for heading by downloading the [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/570639 | patch ]] in skins/Vector: `git review -d 570639`