Page MenuHomePhabricator

Typography: Evaluate the feasibility and impact of restoring font-size to the browser default / user setting
Open, Needs TriagePublicSpike

Description

Proposal

Display resolutions and dpi are continuously increasing, raising the need to occasionally increase the font size to remain legible for a wide spectrum of readers. A typical webpage - such as news sites - nowadays shows the main article content with the font-size configured by the user in their browser (default: 16px). The Minerva skin already uses this font size, Vector's font-size was last increased from 0.8em (12.8px) to 0.875em (14px) in 2014 in the Typography refresh project.

Related research: https://pielot.org/pubs/Rello2016-Fontsize.pdf ("Make It Big! The Effect of Font Size and Line Spacing on Online Readability")

This card is intended to gather feedback from users/contributors about the option to change the font-size to the user setting (default: 16px) typically used by websites.

Current font sizes used by skins

(Pixel count is different on HiDPI.)

  • Minerva: 100% -> 16px
  • Timeless (2015): 95% -> 15.2px
  • Vector (2010): 87.5% -> 14px
  • Modern (2008): 13px
  • CologneBlue (2003): 10pt -> 13+1/3px
  • MonoBook: 79.375% -> 12.7px

The continuous increase in font size reflects how devices became higher resolution throughout the years.

Impact

  1. Casual / new readers of Wikipedia will be granted with a more readable experience consistent with popular media.
  2. There will be users positively affected, who either used zooming, a font-size changer, or a custom stylesheet to make Wikipedia more legible.
  3. There will be users accustomed to the current font-size, preferring to restore it.

The proportions of each group should be polled proactively: feedback from readers in the first two groups seldom reach the developers.

User choice

There are a few approaches to cater to different user needs:

  • A skin preferences popup with a font-size changer could be implemented within the Desktop Improvements project. This feature is often requested, see Wikiwand's "Personalize" popup in the top-right corner for an example and the task T91201: [GOAL] Accessibility settings/preferences on desktop and mobile.
  • This change can be opt-out within the Desktop Improvements project (which is already opt-out).
  • Readers can change their font-size setting in the browser, or use a font-size changing addon / stylesheet.

Event Timeline

Demian renamed this task from [Design] Evaluate the feasibility and impact of restoring the Vector skins's font-size to the browser default in the Desktop Improvements project to [Design] Evaluate the feasibility and impact of restoring font-size to the browser default / user setting in the Desktop Improvements project.Feb 13 2020, 2:02 PM
Demian renamed this task from [Design] Evaluate the feasibility and impact of restoring font-size to the browser default / user setting in the Desktop Improvements project to [Design] Evaluate the feasibility and impact of restoring font-size to the browser default / user setting.Feb 15 2020, 1:41 PM
Demian updated the task description. (Show Details)

Change 570276 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Timeless@master] Font update: reset font-size from 95% (15.2px) to default 100% (16px typical), thereby removing some font-rendering artifacts where the width of some strokes is inconsistent. Changes to layout are barely noticeable.

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

CologneBlue skin not in prod anymore. And I have found this research, it can be intresting :)
https://pielot.org/pubs/Rello2016-Fontsize.pdf

CologneBlue skin not in prod anymore.

Yes, I've added CologneBlue for its unique and elegant font choices to diversify the homogeneous portfolio.

And I have found this research, it can be intresting :)
https://pielot.org/pubs/Rello2016-Fontsize.pdf

Thank you, that's an awesome work. Added to description.
It's good to see what I though instinctually being proven by research.

Demian updated the task description. (Show Details)
Demian updated the task description. (Show Details)
Demian updated the task description. (Show Details)
Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptJul 6 2020, 2:54 PM
Demian renamed this task from [Design] Evaluate the feasibility and impact of restoring font-size to the browser default / user setting to [Typography] Evaluate the feasibility and impact of restoring font-size to the browser default / user setting.Jul 6 2020, 3:16 PM
Demian renamed this task from [Typography] Evaluate the feasibility and impact of restoring font-size to the browser default / user setting to Typography: Evaluate the feasibility and impact of restoring font-size to the browser default / user setting.Jul 6 2020, 3:18 PM

[Resetting assignee due to inactive user account]

Change 570276 abandoned by Isarra:
[mediawiki/skins/Timeless@master] [TEST] Font update: reset font-size from 95% (15.2px) to default 100% (16px typical)

Reason:

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