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 and Jan Drewniak's research below)
/** * System font stack for sans-serif fonts * * `-apple-system` ('San Francisco' font) – Support: Safari 9+ macOS and iOS, Firefox macOS * `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS * `Segoe UI` – Windows Vista & newer * `Roboto` – Android 4.0+ * `Lato` – Wikimedia Design choice, OFL licensed * `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, Arial, sans-serif;
This is the semantic order of things -
User system preferred (mobile) > Wikimedia Design preferred (Lato) > User operating system esoteric desktop only ( 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.
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
Update Mar 2019
- Removing Helvetica Neue as we want to minimize possible unintended side-effects and major desktop operating systems are already covered by the three starting fonts and Helvetica Neue has led to issues in the past with obscure font/OS combinations, see f.e. T63470 or T65720.
|Arabic mobile Chrome OS X|
- Cleartrip: Cleartrip now feels more at home at cleartrip.com (Feb 2017)
- 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)
Related gerrit patch:
T63470: Helvetica Neue cannot render some combining characters correctly
T65720: Helvetica rendering issues on Windows XP
https://gerrit.wikimedia.org/r/c/wikimedia-ui-base/+/499024 "Remove 'Helvetica Neue' from system font stack"