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

Assigned To

Authored By

	• Nirzar
	Sep 13 2017, 11:45 PM

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

Before	After
Arabic mobile Chrome OS X

Prior art

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"

Details

Subject	Repo	Branch	Lines +/-
Use system font stack as sans-serif choice	mediawiki/skins/MinervaNeue	master	+18 -5
Use system font stack as sans-serif choice	mediawiki/extensions/MobileFrontend	master	+16 -3
Improve the sans-serif font stack	wikimedia-ui-base	master	+2 -0
Add `font-family-system-sans` font stack	wikimedia-ui-base	master	+8 -0

Customize query in gerrit

Revisions and Commits

rWMUI WikimediaUI Base
	rWMUI0466fe71312c Remove 'Helvetica Neue' from system font stack

Related Objects
Search...

Status	Assigned	Task
Resolved	Volker_E	T175877 Update sans-serif font stack on mobile web to use system typefaces
Duplicate	None	T186762 Communicate font stack changes to communities
Resolved	• alexhollender_WMF	T216095 Catalog before/after screenshots for font stack update
Resolved	CKoerner_WMF	T214518 Community Relations support for proposed system typefaces changes

Event Timeline

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

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

ovasileva moved this task from Upcoming to Needs Prioritization on the Web-Team-Backlog board.Feb 28 2018, 5:43 PM

Jdlrobson moved this task from Needs Prioritization to Design on the Web-Team-Backlog board.Mar 7 2018, 8:33 PM

Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

CKoerner_WMF changed the status of subtask T186762: Communicate font stack changes to communities from Open to Stalled.Apr 4 2018, 8:49 PM

Volker_E mentioned this in T188799: Update the fontstack for Wikimedia Design Style Guide.Apr 10 2018, 8:32 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 awarded a token.Apr 10 2018, 8:25 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)

Volker_E added projects: UI-Standardization, UI-Standardization-Kanban.Sep 28 2018, 7:02 PM

@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

gerritbot added a project: Patch-For-Review.Sep 28 2018, 8:14 PM

Diffusion mentioned this in rWMUIc58b1e51f002: Add `font-family-system-sans` font stack.Sep 28 2018, 9:58 PM

phuedx unsubscribed.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)

Diffusion mentioned this in rWMUIc75852427a53: Add `font-family-system-sans` font stack.Nov 27 2018, 9:36 AM

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 removed a project: Patch-For-Review.Dec 11 2018, 8:13 PM

Volker_E added a subscriber: • alexhollender_WMF.

Volker_E updated the task description. (Show Details)Dec 11 2018, 9:44 PM

Volker_E moved this task from Unsorted to Layout/pattern consistency on the UI-Standardization board.Dec 16 2018, 11:24 PM

Volker_E mentioned this in T211198: Do not capitalise first letter of Wikidata descriptions on languages that do not support capitalisation e.g. Arabic.Dec 17 2018, 10:18 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

Diffusion mentioned this in rSECC8a802f3ee18d: build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass.Jan 10 2019, 10:49 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

• alexhollender_WMF awarded a token.Jan 16 2019, 11:36 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

gerritbot added a project: Patch-For-Review.Jan 17 2019, 8:47 AM

• Jhernandez awarded a token.Jan 23 2019, 5:17 PM

Volker_E claimed this task.Jan 24 2019, 7:22 AM

Fito subscribed.Feb 7 2019, 2:56 PM

This comment was removed by Fito.

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 [[ https://bugs.chromium.org/p/chromium/issues/detail?id=554590#c20 | 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 mentioned this in T216793: Update sans-serif font stack to use system typefaces on www.wikipedia.org portal.Feb 22 2019, 4:09 AM

Pcoombe subscribed.Feb 22 2019, 3:20 PM

Volker_E moved this task from Backlog to Doing… on the UI-Standardization-Kanban board.Feb 26 2019, 3:12 AM

Volker_E updated the task description. (Show Details)Feb 26 2019, 5:03 AM

Volker_E updated the task description. (Show Details)Feb 26 2019, 5:06 AM

Volker_E closed subtask T216095: Catalog before/after screenshots for font stack update as Resolved.

Volker_E mentioned this in T150377: Use 'outside' instead of 'Inside' for list-style in Mobile version so that long line bullet list items are more scannable.Mar 5 2019, 12:05 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

ReleaseTaggerBot added a project: MW-1.33-notes (1.33.0-wmf.24; 2019-04-02).Mar 27 2019, 7:01 PM

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 removed a project: Patch-For-Review.Mar 28 2019, 8:49 PM

jijiki mentioned this in rSECC41c3564e562d: build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass.Apr 5 2019, 11:48 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