Update the font stack for Wikipedia on mobile web which gives preference to system typeface
Apple and Google both have better typeface alternatives available. 
System typefaces have better readability on screens and they have better language support.
This will deliver better native experience for readers. 
Proposed stack (see also discussion below)
/** * 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 CSS Fonts Module Level 4's `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now 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
There's a known bug for Internet Explorer/Edge with this stack when used in font shorthand.
Can be circumvented when used only with font-family.
Jan has been doing some excellent research in 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
|Arabic mobile Chrome OS X|
- Booking.com: Implementing system fonts lessons learned at booking.design (March 2017)
- Skyscanner: A native font-stack at medium.com (April 2017)
- A guide to System Font Stack at CSS-Tricks.com (Sept 2017)
- Medium.com: Sytem shock at medium.design (Oct 2017)
- GitHub: Shipping system fonts at markdotto.com (Feb 2018)