Design/Projects/Improve mobile reading experience/ru

Обеспечивать хорошие впечатления при чтении является очень важной частью статей Wikimedia. Оформление и главным образом выбор шрифта является основой для лучшей читабельности текста, независимо от устройства, программного обеспечения или родного языка читателя.

Цели и задачи
Исторически сложилось, что наш текущий выбор шрифта, использованного в мобильной версии сайта, для подзаголовков и основного текста строится на стандартых наборах шрифтов. Этот факт приводит к использованию шрифтов "Arial" или "Helvetica" для романских языков на большинстве браузеров. Оба шрифта способствуют доступу информации на всех устройствах, а также являлись бызовым выбором для поддержки широкого спектра пользователей.

В последние несколько лет, в связи с возникновением мобильных операционных систем (мобильная ОС) и их устойчивому росту на рынке, за исключением романских сценарных языков, разработчики операционных систем представили новые базовые шрифты. Основная цель этих "Системных шрифтов" - это поддержка как можно большего количеста языков, а также обеспечение лучшей читабельности текста.

Преимущества этих шрифтов:


 * '''способствуют портированию лучшей информации, доступной в нативном приложении, в мобильную версию для читателей;
 * '''улучшают целевую платформу;
 * '''улучшают читаемость текста, написанном на многих языках, при их переводе или конвертации.

Кто увидит эти изменения? Мы бы хотели, чтобы эти шрифты попали в отобранные шрифты для темы оформления мобильного интерфейса Minerva Neue

Техническая составляющая
Вы можете прочитать об этом больше в технической среде the Phabricator task.

Рекомендуемый стек шрифтов для систем (смотрите обсуждение в технической среде): Это правило CSS будет применять первый шрифт в стеке, который является доступным. Это одна из частей открытых веб стандартов в большинстве механизмов визуализации браузеров. К примеру, "Roboto" - это действующий стандартный шрифт операционной системы Андроид. Ни один из первых трёх шрифтов, описанных в стеке, не установлен на систему Андроид по умолчанию. Так что, "Roboto" был выбран для отображения содержимого. Обратите внимание на стиль кода, которое соответствует нашему соглашению по оформлению кода на основе иструмента Stylelint

To put another way the logic of this CSS rule: User system default > Wikimedia Design choice (Lato) > User operating system desktop only ( Helvetica > Arial) > generic sans-serif With this font stack we're covering at least 89% of mobile browsers outside of generic Helvetica or Arial covered systems in April 2019. The biggest exceptions share-wise are UC Browser Mini and browser sub-summed as “Other” where a big part might still be Chromium/Android based and therefore receive 'Roboto'.

Problem statement
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.

2019-03-01

 * Wikipedia Portals has been changed to new font stack, with it's variety of language scripts a good, encapsulated place to start.

2019-04-08

 * Mobile web (MinervaNeue) has adopted the new font stack, see for example English or Chinese Wikipedia.

Prior art
There have been a few other web institutions facing similar challenges and taken a similar path:
 * https://blog.cleartrip.com/2017/02/20/design-nuances-cleartrip-now-feels-more-at-home/
 * https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
 * https://medium.com/@vojtechjurasek/how-we-decided-to-use-system-fonts-87683b9b23ba
 * https://css-tricks.com/snippets/css/system-font-stack/

In 2014 there has been a project “Typography refresh”, which had included font stack changes with similar goals but before mobile operating systems penetration were as high. Apart of the prior art projects we have evaluated findings from this project as well to inform our font stack proposed here.

Further links

 * Introductory blog post on `-apple-system` for Webkit (Safari)
 * Deprecating task for  in favor of   for Blink (Google Chrome)

Article/wiki examples of scripts under focus for being taken care of by the proposed change:
 * https://en.m.wikipedia.org/wiki/Tie_(typography)
 * https://ja.m.wikipedia.org/w/index.php?title=%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
 * https://nv.m.wikipedia.org/w/index.php?title=%C3%8Diyis%C3%AD%C3%AD_Naaltsoos
 * https://vi.m.wikipedia.org/w/index.php?title=Trang_Ch%C3%ADnh
 * https://zh.m.wikipedia.org/w/index.php?title=Wikipedia:%E9%A6%96%E9%A1%B5