User:JDrewniak (WMF)/notes/System font stack

System font stack proposal
In T175877, a proposal was made to change the fonts used on mobile Wikimedia websites. The proposal suggests using fonts that were designed specifically for popular operating systems (Android, Windows, iOS, Mac, Linux). This font stack is commonly known as the "system" font stack. The rationale behind this change is that, because these fonts were designed specifically for the screen a person is looking at, they offer a better reading experience than the default fonts, which in some cases (e.g.Helvetica) predate the operating system and personal computing in general by decades.

The proposed font stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Lato, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;

Testing methodology
This report serves to test whether these new fonts actually do provide a better reading experience across the ~300 languages used by Wikimedians today. The proposed fonts should have equal or better language support than the current font, and provide a visually improved reading experience (i.e. are they "more legible" or do they look "better"?).

To test this hypothesis, screenshots of the home pages of Wikipedia in every available language were taken and analyzed for differences and potential errors. These screenshots were taken on all popular operating systems and browsers.

Fonts by operating system
the proposed system font stack maps to the following operating systems.

Fonts by OS

On mobile
Users of iOS 9 & up, and Windows Phone would see a font change. Android, however, would largely be unaffected. This is because stock Android comes packaged with precious few fonts. On versions 3 & down, stock Android only comes with the "Droid" font family. On versions 4 & up, stock Android comes with the "Roboto" font family as the only sans-serif option. Third-party Android vendors however, sometimes package their own fonts on Android, like "Samsung Sans" and override the default sans-serif font. In this scenario, specifying "Roboto" in the font-stack might gives users a more consistent experience across Android devices.

''DRAFT NOTE: Some Android devices let users switch the default system font to things like "Choco cookie" and "Smooth jazz". Does this affect the "sans-serif" option on browsers? If so, presenting "Roboto" would be more sensible. https://www.samsung.com/us/support/answer/ANS00039821/''

Users of iOS 8 & down would be unaffected by this change, since Apples’ system font "San Francisco" was only introduced in version 9. Previously, the default font was "Helvetica Neue".

On desktop
Although this change is targeted at mobile devices, if implemented on desktop, this change would be significant. Windows users would see the biggest upgrade. The Segoe UI font is significantly more readable than Arial across a wide array of languages. See Highlights by OS, Windows for more details.

In testing, the only noticeable degradation on desktop was seen on Safari on MacOS. The San Francisco font is missing a few diacritic characters that result in missing characters (squares with question marks) on Safari. On chrome and Firefox however, these missing diacritics fall back to "Helvetica Neue" and remain legible.

Technical Implications
On the web, fonts play a role not only in text, but sometime in layout. When using the ‘inline-block’ display type, the white-space properties of a font can effect the spacing as well as the width of HTML elements. This means that text-inputs can get wider and elements can be misplaced if a font changes. No breaking changes of this nature were observed in testing, but if implemented on desktop, changes to Visual Editor and other rich applications would have to be examined across a wide range of browser and operating systems.

iOS
San Francisco - Rounder, lighter, wider.

Windows
Segoe UI - shorter, wider, bolder.

Segoe UI has a smaller x height and larger line-height than Arial. It has better anti-aliasing, making it seem blacker than other fonts on Windows, and the bold version is slightly bolder than Arial. Compared to Arial, Segoe UI has better support for Cyrillic, Greek, additional support for a multitude of south-asian fonts, and a much improved Arabic design.

See Unicode blocks supported by the Arial font vs Unicode blocks supported by the Segoe UI font.

(TODO: screenshots)

Segoe UI does not however, support CJK fonts, these would fall back to the system defaults.