Design/Projects/Improve mobile reading experience

Translate this page; This page contains changes which are not marked for translation.

Other languages:

English

Providing a good reading experience is of high importance to Wikimedia projects. Typography, and specifically font choices, build the base for readability regardless of the device, software, or language of our readers.

Goals and summary[edit]

Our current font choice for sub-headlines and running text on mobile – sans-serif – builds on a generic font stack for historical reasons. This results in using Arial or Helvetica in latin languages on the majority of browsers. Both fonts mildly support the web's universality and have been the primary choice when supporting the widest variety of users like we do.

Driven by emerging mobile operating systems (OS) and strong growth in markets aside of latin script languages, in the last few years system manufacturers have been introducing new default fonts. These "system fonts" aim to provide better readability and better support for more languages.

These typefaces

deliver a better native experience for readers,
improve cross-platform and
improve cross-language readability.

We would like to use these system fonts in our selection fonts for the mobile interface presented by Minerva Neue.

Technical background[edit]

You can read more on the technical backgrounds in the Phabricator task.

Proposed system font stack (see discussion on task):

/**
 * System font stack
 *
 * `-apple-system` – Support: Safari for OS X and iOS ('San Francisco')
 * `BlinkMacSystemFont` – Chrome < 56 for OS X ('San Francisco')
 * `Segoe UI` – Windows Vista & newer
 * `Roboto` – Android
 * `Lato` – Wikimedia Design choice
 * `Helvetica Neue, Helvetica, Arial, sans-serif` – (Generic) Web fallback
 * Note that standard `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 Neue', Helvetica, Arial, sans-serif;

This CSS rule will apply the first font in the stack that is available. This is part of open web standards in most browser rendering engines. For example, Roboto is the Android operating system's current default font. None of the first three fonts are on Android systems by default. So, Roboto is selected for rendering the content.

To put another way the logic of this CSS rule:
User system default > Wikimedia Design choice (Lato) > User operating system desktop only ( 'Helvetica Neue' > Helvetica > Arial) > generic sans-serif

Problem statement[edit]

Currently relying on web browser default font choice, which is, out of historical reasons often Arial and Helvetica as least common denominator with the widest language script support. But both fonts date back more than a dozen years.

Comparison screenshots[edit]


Language	OS	Device	Page	After
en	iOS	phone	Tao Te Ching
en	iOS	tablet	Tel Aviv
en	Android	phone	Gautama Buddha	(no change)
en	iOS	tablet	Portal
fa	iOS	phone	آلبرت اینشتین
fa	iOS	tablet	آلبرت اینشتین
fr	iOS	phone	Chaïm Soutine
fr	iOS	tablet	Mohandas Karamchand Gandhi
he	iOS	phone	מוהנדס קרמצ'נד גנדי
he	iOS	tablet	ארכימדס
he	Android	phone	גאוטמה_הבודהה	(no change)
hi	iOS	phone	फ़्रान्सीसी क्रान्ति
hi	iOS	tablet	फ़्रान्सीसी क्रान्ति
ja	iOS	phone
ja	iOS	tablet
ja	Android	phone		(no change)
my	iOS	phone
my	Android	phone		(no change)
nv	iOS	phone		(no change)
nv	Android	phone		(no change)
ru	iOS	phone
ru	iOS	tablet
ru	Android	phone		(no change)
vi	iOS	phone
vi	iOS	tablet		(no change)