== Proposal
Update the font stack for Wikipedia on mobile web which gives preference to system typeface
Apple and Google both have better typeface alternatives available. [1][2]
**System typefaces have better readability on screens and they have better language support.
This will deliver better native experience for readers.** [3]
**Proposed stack** (see also discussion below)
```lang=css
/**
* System font stack
*
* `-apple-system` – Support: Safari for OS X and iOS ('San Francisco')
* `BlinkMacSystemFont` – Chrome < 56 for OS X ('San Francisco')
* `Segoe UI` – Windows Vista & newer
* `Roboto` – Android
* `Lato` – Wikimedia Design choice
* `Helvetica Neue, Helvetica, Arial, sans-serif` – (Generic) Web fallback
* Note that `system-ui` as of now has resulted in unresolved side-effects in certain OS/language combination and is therefore not included.
*/
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
```
This is the semantic order of things -
User system preferred (mobile) > Wikimedia Design preferred (Lato) > User operating system desktop only ( 'Helvetica Neue' > Helvetica > Arial) > generic sans-serif
[1] https://developer.apple.com/fonts/
[2] a https://fonts.google.com/specimen/Roboto
[2] b https://material.io/guidelines/style/typography.html
== Developer note
There's a [[ https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f | known bug for Internet Explorer/Edge ]] with this stack when used in `font` shorthand.
Can be circumvented when used only with `font-family`.
== Open questions
Jan has been doing some excellent research in [[ https://phabricator.wikimedia.org/T175877#3831247 | the comments ]]. We should read through that and decide if we need to make any adjustments before we consider this good to work on.
=== Update Sep 2018
- Removing Linux OS fonts `'Oxygen-Sans', Ubuntu, Cantarell`, following GitHub's findings.
=== Update Nov 2018
- Removing `system-ui` as other platforms have run into issues with certain OS/languages combinations with it. See T175877#4776576
== Comparisons
| Before | After
| -- | --
| Arabic mobile Chrome OS X |
| {F27618063 width=50%} | {F27617998 width=50%}
== Prior art
* [Booking.com: Implementing system fonts lessons learned](https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f) at booking.design (March 2017)
* [Skyscanner: A native font-stack](https://medium.com/skyscanner-design/a-native-font-stack-d9d0db72d6e6) at medium.com (April 2017)
* [A guide to System Font Stack](https://css-tricks.com/snippets/css/system-font-stack/) at CSS-Tricks.com (Sept 2017)
* [Medium.com: Sytem shock](https://medium.design/system-shock-6b1dc6d6596f) at medium.design (Oct 2017)
* [GitHub: Shipping system fonts](http://markdotto.com/2018/02/07/github-system-fonts/) at markdotto.com (Feb 2018)