Update fontstack on mobile web to use system typefaces
Open, NormalPublic

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]

They have better readability on screens and they have better language support.
This will deliver better native experience for readers. [3]

Proposed stack (see discussion for other links/suggestions)

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

This is the semantic order of things -

User device preferred > Wikimedia Design preferred > Helvetica > Arial > Generic

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

Open questions

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.

Prior art

Nirzar created this task.Sep 13 2017, 11:45 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 13 2017, 11:45 PM
Nirzar moved this task from To Triage to Design on the Readers-Web-Backlog board.Sep 13 2017, 11:46 PM
Nirzar triaged this task as Low priority.

Change 378016 had a related patch set uploaded (by Jhernandez; owner: Jhernandez):
[wikimedia-ui-base@master] Improve the sans-serif font stack

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

Those two resources explain which font in the stack is used on which platform as default:

"Segoe UI" is Windows Vista & up
Oxygen is KDE's UI font,
Ubuntu [ahem] Ubuntu's,
Cantarell is Gnome's

I'd rather kick "Segoe UI" for mobile out of the stack or add the others as well and test on those desktops.

@Volker_E on Mobile ~1% of traffic is from Windows OS (Windows Phone), so it seems like Segoe could be useful there.

I'm pro-single font stack. In my opinion, having separate font stacks for mobile and desktop makes little sense. Minerva can be used on desktop and Vector can be used in mobile (some users do use it), so the font choice should be the same for both.

Thanks for that Wordpress article, very informative.

This is the diff between the proposed font stack and the Wordpress one:

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

Seems fine to me, Helvetica seems redundant for OSX because Helvetica Neue is there, Windows computers should have SegoeUI around, else sans-serif should serve them.

I'm not sure how Lato plays in there. I'm guessing it is fine to remove it, and we'll see how we add it if we add web fonts at some point.

Re: Code review:

I've just added a comment on the task. In upcoming weeks, we will make use of the @font-family-sans var in different web products. But for a bigger change like Marvin makes use of on desktop, it will take Community Liaisons people given our history with font family changes. Therefore I'd like to see the font stack settled, but in the meantime we should rather invent an extra variable like font-family-sans--mobile

Sounds good for now, but I'd rather not call it mobile since hopefully we would use the stack everywhere. I'm going to go with something like font-family-sans--next or font-family-sans--beta, let me know if you have a better name in mind.

Changes in https://gerrit.wikimedia.org/r/#/c/378016/

Jhernandez updated the task description. (Show Details)Sep 18 2017, 9:29 AM

@Volker_E

Do we need to mention sans-serifs for all the platforms we have? won't the generic "sans-serif" take care of it automatically?

the only reason we want the apple-system in there because "sans-serif" doesn't default to SF text and all apple system's have helvetica.

which is not the case for KDE, Ubuntu, Vista etc? they will use oxygen, ubuntu anyways because all the first declaration of apple-system, helvetica, will fail.

Volker_E added a comment.EditedSep 19 2017, 7:05 AM

@Jhernandez Some of the caution comes from "Segoe UI" also becoming default on anything Windows Vista+ besides Windows Phone. And if we gonna go for other font choices on desktop aside of Mac, we should be very sure what we're going for. Also adding this to Windows and not caring about other free operating systems doesn't make sense in my opinion.
Additionally as too often, the situation on Windows Phone is not fully clear from MSDN. This article lists "Segoe WP" before "Segoe UI" for Windows Phone 8.

font-family-sans--beta sounds good to me!

@Nirzar That is actually a good point that would be an approach to try and test. As soon as we rule out more common fonts like "Helvetica Neue" or Arial, it could work on those platforms with sans-serif only.

@Jhernandez @Nirzar Seems like my last message was mistaken as blocking.
When we name the variable as font-family-sans--beta I'm fine to go with a stack value as mentioned above with Lato added:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Lato, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; for thorough live testing on all different platforms…
"Segoe UI" will supercede Lato on Vista, Win 7 & then aside of Windows Phone (which seems to be declared dead anytime soon anyways) then.

Sounds good to me. I'll follow up with the patch when I have some time. Thoughts @Nirzar ?

Nirzar added a subscriber: TheDJ.Oct 31 2017, 6:13 PM

sounds good to me....

pinging @TheDJ if he can spot any red flags with this change

ovasileva raised the priority of this task from Low to Normal.
ovasileva moved this task from To Triage to Upcoming on the Readers-Web-Backlog board.

When we changed the font stack on Vector we hit a ton of problems on certain platforms (many people could not legiably read wikipedia). I was surprised at how simple a change led to so much discussion! [1]

Change haters aside there was a big problem due to the fact that font names can point to different broken versions of fonts and certain versions of OpenOffice had installed bad fonts. We only found out about this through Twitter and editors. (Side note the lack of free fonts was a hard requirement for many editors too which made the problem harder to solve).

Although we are using system fonts and the number of platforms on mobile are less, I imagine this will be less problematic but it does make me nervous given the lack of deploys in December.

What testing has been done for this font stack?
What's the testing plan for this between merging and roll this out?
What fonts do we expect to be used on different platforms ie. What would we expect on android 2 web browser? What font choice would be chosen on opera minI on osx? Windows phone 7?
Can we put these to the description?

[1] https://m.mediawiki.org/wiki/Talk:Typography_refresh

As per @Jdlrobson suggestion, I’ve created a spreadsheet that illustrates which fonts would be served to which OS’s with this font stack.

System font-stack by OS (WIP, currently by OS only, not browser + OS)

As you can see from that chart, the only users who would potentially see Lato is people running Windows XP, Linux, or old Mac OS who’ve installed Lato themselves (also, no one on mobile). Given these demographics, I don’t see the point in including Lato in this font stack.

This is not to say I don’t like Lato, I do, but I think it could be better served as maybe a web-font option somewhere, like @Jhernandez suggests.

I think it’s wise to maintain a single font-stack for mobile and desktop. To that end, I think the www.wikipedia.org portal could be a good testing ground for this change because it renders a wide range of unicode characters and it’s served on both mobile and desktop. That could give us an idea of the effects of this change on non-latin scripts across a broad range of devices.

debt added a subscriber: debt.Dec 12 2017, 4:07 PM

A precusory glance reveals few wrinkles in the apple system font.
On Southern Min Wikipedia for example, Safari on Mac OS produces some missing characters. Not so on mobile Safari...

(the CJK fonts on my system might be disabled though...)

Jdlrobson updated the task description. (Show Details)Dec 12 2017, 4:46 PM
phuedx assigned this task to Jdrewniak.Dec 20 2017, 10:58 AM

I'm being bold and moving this onto the board for visibility for the rest of Readers Web (with the hope that this encourages conversation about how we track lengthy investigations).

@Jdrewniak's currently exploring taking screenshots of the site before and after the font stack is applied with a wide variety of device-browser pairs and producing a report.

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 Jdrewniak to ovasileva.Jan 31 2018, 6:13 PM
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.