Page MenuHomePhabricator

Update sans-serif font stack on mobile web to use system typefaces
Closed, ResolvedPublic

Description

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 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

[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 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.

Comparisons

BeforeAfter
Arabic mobile Chrome OS X

Prior art

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I've taken many screenshots http://public.j4n.co/fontstack/ios_9.2_Safari.html (and I'll take even more when I get a foundation Saucelabs account set up)
and I'm putting together a report, currently in draft, located here: https://www.mediawiki.org/wiki/User:JDrewniak_(WMF)/notes/System_font_stack

So from my observations:

"The proposed font-stack produced no negative effects on mobile Wikipedia. The changes to iOS were minimal, and no changes were observed on Android devices. Given these observations, it is probably safe to move ahead and implement this font-stack on mobile Wikimedia sites.
https://www.mediawiki.org/wiki/User:JDrewniak_(WMF)/notes/System_font_stack

That being said, to address @Jdlrobson's comment

What's the testing plan for this between merging and roll this out?

I have a few ideas:

  1. We could roll this out on the www.wikipedia.org page, since it is available on both mobile and desktop. That would cast a pretty wide net to catch any bugs (although it's a very narrow use case, i.e. no forms, templates or user-generated content).
  2. We could test this as a beta feature on mobile.
  3. We could roll this out on small wikis first (smaller languages might be more prone to font/language support bugs, and might benefit most from better fonts).

Blocked on a deployment strategy and way forward. Probably needs a meeting. @ovasileva can you do that based on how important this?

Jdlrobson reassigned this task from ovasileva to Nirzar.Feb 5 2018, 6:22 PM

Nirzar to work out the roll out plan and then we will groom/estimate/work on this.

Restricted Application edited projects, added Readers-Web-Backlog; removed Readers-Web-Backlog (Design). · View Herald TranscriptFeb 5 2018, 6:22 PM

Friendly reminder to @Nirzar to consider the roll out plan.

Volker_E added a comment.EditedApr 10 2018, 9:33 AM

Two short updates here, first off, there is an update to the CSS Font Module brought to our attention from this article by @CKoerner_WMF if I state correctly, which introduces a generic font-family system-ui.
So the stack is:

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

Open questions:
We should clarify, agree and update the font stack accordingly in the task description.

  • KDE: Oxygen-Sans or Oxygen?
  • Should we even include "Helvetica Neue"?
  • Lato is still here (see @Jdlrobson's question above), but would be only for Windows users, who uninstalled "Segoe UI" or Win XP users with Lato installed.

What do we not provide:

  • "Lucida Grande" for MacOS Mavericks to Kodiak
  • "Droid Sans" for Android < 4
  • "Fira Sans" for Firefox Phone
  • Tahoma for Windows XP
  • Microsoft Sans Serif for Windows < XP

For completion there's also this project, which aims to reduce applied stack values in CSS.

Volker_E updated the task description. (Show Details)Apr 10 2018, 8:16 PM

Another open question is, if we leave Lato in, where do we place it in this stack? While it's not possible(?) to install fonts on mobile devices, on desktop there could be people with Lato installed. Would we put it before the system fonts for people who have it locally installed – apart from a webfont performance question?

Volker_E updated the task description. (Show Details)Apr 10 2018, 8:20 PM
Krinkle updated the task description. (Show Details)Apr 10 2018, 8:33 PM

Another open question is, if we leave Lato in, where do we place it in this stack? While it's not possible(?) to install fonts on mobile devices, on desktop there could be people with Lato installed. Would we put it before the system fonts for people who have it locally installed – apart from a webfont performance question?

yes

I've added various links to the task description with previous research, mistakes and conclusions from other parties in our industry. Certainly worth scanning through, given the devil really is in the implementation details, regardless of what outcome we want visually.

Volker_E updated the task description. (Show Details)Sep 27 2018, 3:02 AM
Volker_E updated the task description. (Show Details)

@Krinkle We've been orienting on the CSS Tricks & booking.com articles back then. The article on GitHub, where they ended up (in Feb 2018) with font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; has some especially interesting learnings (cc @Nirzar):

  • “We ended up removing Roboto because it caused issues in some distros of Linux. We definitely need to revisit it.” – Author isn't too specific about what went wrong where.
  • “[few more fonts in there] This included Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, and Droid Sans. Interestingly enough, Linux users were the most upset at the change given Linux system fonts seem to be rather large and clunky, and their system fonts so inconsistent across distros.” – Latter two just got removed as FirefoxOS and older Androids got out of fashion in my understanding, I'm hesitating calling those distros. Not including the default KDE (Oxygen), Ubuntu, and Gnome (Cantarell) is interesting and should probably be removed from our font-stack for now as well.
  • It doesn't go into details about reducing “Helvetica Neue“ to Helvetica, but has a nice pointer to why putting Helvetica before any other less generic font like Arial, sans-serif might become a problem on Windows as Windows aliases Helvetica to Arial. – Not an issue in our stack though.

On a related topic, Material Design is explicit about Noto replacing Roboto for all languages not covered by latter. Roboto is limited to Latin, Cyrillic and Greek.

So on mobile (as in MinervaNeue) we would have to do special rule set on non-English-like languages (to stay in Material Design's phrasing) to refine the font stack.

Volker_E updated the task description. (Show Details)Sep 28 2018, 7:38 PM

Change 463547 had a related patch set uploaded (by VolkerE; owner: Volker E):
[wikimedia-ui-base@master] Add font-family-system-sans font stack

https://gerrit.wikimedia.org/r/463547

phuedx removed a subscriber: phuedx.Oct 1 2018, 8:19 AM

@Krinkle shared on the patch discussion:

I haven't found any issue with this myself, but I've read from multiple tech blogs that they removed from their stack due to problems with non-English languages.
See https://infinnie.github.io/blog/2017/systemui.html
GitHub, Booking and various others have now removed it from their stack, using only the fallback, which produces the same effect currently, bug without the bug.

Volker_E updated the task description. (Show Details)Nov 27 2018, 4:24 AM
Volker_E updated the task description. (Show Details)

Change 463547 merged by jenkins-bot:
[wikimedia-ui-base@master] Add font-family-system-sans font stack

https://gerrit.wikimedia.org/r/463547

Volker_E updated the task description. (Show Details)Dec 11 2018, 9:44 PM
Volker_E updated the task description. (Show Details)Dec 17 2018, 10:25 PM
Volker_E added a subscriber: Ladsgroup.
Volker_E renamed this task from Update fontstack on mobile web to use system typefaces to Update font stack on mobile web to use system typefaces.Dec 17 2018, 10:37 PM
Volker_E updated the task description. (Show Details)Jan 16 2019, 10:58 PM
Volker_E updated the task description. (Show Details)Jan 16 2019, 11:19 PM
Volker_E updated the task description. (Show Details)Jan 17 2019, 8:38 AM

Change 484976 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Use system font stack as sans-serif choice

https://gerrit.wikimedia.org/r/484976

Volker_E claimed this task.Jan 24 2019, 7:22 AM
Fito added a subscriber: Fito.Feb 7 2019, 2:56 PM
This comment was removed by Fito.
Volker_E added a comment.EditedFeb 8 2019, 5:32 AM

Thanks @Fito for the pointer – as the bug states, it's about deprecating BlinkMacSystemFont.

Deprecate BlinkMacSystemFont meta name in favor of -apple-system

They are further on discussing to replace it by system-ui although that doesn't seem to have reached consensus yet. It still relying on -apple-system or system-ui.

We've deliberately removed system-ui for now as we've come across https://infinnie.github.io/blog/2017/systemui.html which is actually resulting in unwanted side-effects on certain OS/language combinations like Windows and Simplified Chinese, which we need to take into account for our audiences.

But with -apple-system, BlinkMacSystemFont we should be fine for the current situation.

This font stack is not set in stone for eternity, as the web and OS specific fonts evolve we'll continue to evaluate the situation.

An discussion for context on a non-system font stack change about 5 years ago: https://lists.wikimedia.org/pipermail/wikitech-l/2014-February/074519.html

Volker_E renamed this task from Update font stack on mobile web to use system typefaces to Update sans-serif font stack on mobile web to use system typefaces.Feb 20 2019, 3:09 AM

Change 378016 abandoned by VolkerE:
Improve the sans-serif font stack

Reason:
Been done in I868e30ec3445f1226fa11a23f6d853b4acd0a728

https://gerrit.wikimedia.org/r/378016

Volker_E updated the task description. (Show Details)Feb 26 2019, 5:03 AM
Volker_E updated the task description. (Show Details)Mar 25 2019, 5:01 PM
Volker_E updated the task description. (Show Details)Mar 25 2019, 10:28 PM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Mar 25 2019, 10:38 PM

Change 484976 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Use system font stack as sans-serif choice

https://gerrit.wikimedia.org/r/484976

Change 499017 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Use system font stack as sans-serif choice

https://gerrit.wikimedia.org/r/499017

Change 484976 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Use system font stack as sans-serif choice

https://gerrit.wikimedia.org/r/484976

Change 499017 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Use system font stack as sans-serif choice

https://gerrit.wikimedia.org/r/499017

Volker_E updated the task description. (Show Details)Mar 27 2019, 9:26 PM
Volker_E updated the task description. (Show Details)Mar 27 2019, 11:22 PM
Volker_E updated the task description. (Show Details)Apr 9 2019, 3:18 AM
Volker_E updated the task description. (Show Details)Apr 9 2019, 3:26 AM
Krinkle removed a subscriber: Krinkle.Apr 15 2019, 9:11 PM
Volker_E closed this task as Resolved.Apr 17 2019, 6:19 AM

For historical reference, an at-length discussion over 'Helvetica Neue', Helvetica, sans-serif vs sans-serif.