Hi all, last week we've successfully brought the improved font choice to our mobile skin MinervaNeue onto all wikis. It helps to provide our users a better reading experience – across languages, in and beyond latin scripts and a more modern typographic feel to many of our text-focussed projects, taking advantage of specifically designed and optimized fonts for every major system.
Technically we're applying an operating system font first stack for running text (every text element besides main page titles, headings of 2nd order, blockquotes, code snippets, basically most of every page) on mobile devices for most popular systems[0].
Thanks to everybody who has helped in the process of this project, Nirzar Pangarkar for bringing the idea to the table[1], Jon Robson, Jan Drewniak, and the rest of Reading Web team for co-researching and supporting the implementation, Alex Hollender for fine-tuning design parts as well as documenting pre- and post-change, Brad Jorsch for important reminder of learnings from the Typography Refresh 2014 and Chris Koerner for accompanying the communication externally along the way.
You can read more on the details on the project page and at the Phabricator task. Please let us know if you have any questions or further feedback, either by responding to me or on the project's talk page[2].
[0] - https://m.mediawiki.org/wiki/Design/Projects/Improve_mobile_reading_experien... [1] - https://phabricator.wikimedia.org/T175877 [2] - https://www.mediawiki.org/wiki/Talk:Design/Projects/Improve_mobile_reading_e...
Enjoy and best regards, Volker
-- Senior UX Engineer, Lead User-Interface Standardization Wikimedia Foundation
volker.e@wikimedia.org | @Volker_E
Volker E., 18/04/19 04:57:
Technically we're applying an operating system font first stack for running text [...]
This sounds good, but can you elaborate on whether having just "sans-serif" would achieve such result without all those hardcoded font names?
From the linked task, page, talk page response to Anomie and patch it's not clear and in the patch "sans-serif" still comes last: https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/484976/6/minerva.less/minerva.variables.less
Federico
Hi Federico, thanks for your question.
Our chosen approach for the new mobile font stack is explicitly applying system fonts first, then established web fonts (Helvetica, Arial), then a generic font (sans-serif). The iOS 9+/macOS system fonts have to be included otherwise, browsers would fall back to Helvetica, which it does on macOS < 10.10. Roboto is intendedly included for the wide-ranging variety of Android based systems and browsers, ensuring Roboto where available even when specific browser default should be different. Helvetica and Arial are included in contrast to the former Typography Refresh as we haven't found any issues in our testing with Linux operating systems (Gnome, KDE, Ubuntu Unity) and it provides a calculable fallback for older, more rare use cases (MinervaNeue on desktop is still the exception).
Also given the prior art examples we decided to stay with a more explicit stack definition. Additionally, removing Roboto would have saved 6 bytes, removing Helvetica, Arial another 17 bytes after gzipping. Savings didn't seem useful when ensuring font choices that are aimed to improve reading experience for a wide-ranging audience.
Please let us know if you have further feedback – preferably on the task[0] or the project page in order to collect for future insights and transparency for people outside of the Foundation orienting on our approaches.
[0] - https://phabricator.wikimedia.org/T175877
All the best, Volker
-- Senior UX Engineer, Lead User-Interface Standardization Wikimedia Foundation
volker.e@wikimedia.org | @Volker_E
On Thu, Apr 18, 2019 at 4:24 AM Federico Leva (Nemo) nemowiki@gmail.com wrote:
Volker E., 18/04/19 04:57:
Technically we're applying an operating system font first stack for running text [...]
This sounds good, but can you elaborate on whether having just "sans-serif" would achieve such result without all those hardcoded font names?
From the linked task, page, talk page response to Anomie and patch it's not clear and in the patch "sans-serif" still comes last: < https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/484976/6/mi...
Federico