Page MenuHomePhabricator

Suggestion: Reconsider typography of headings h1-h6 (umbrella task)
Open, LowPublic

Description

Demo, comparison, analysis:
Vector_headings_typography_fix

Intro

This is the umbrella task that catalogs feedback about the styling of headings on the web interface.
The related discussion on-wiki: Desktop_Improvements#Will_there_be_any_changes_to_typography?

The problem

Headings, their level and the section they denote are hard to recognize on wiki pages.

  • It's hard to distinguish the 3rd heading level in articles (h4) from the content.
  • The recognition of h2 being higher level than h3 does not come naturally.
  • Depending on the available fonts on the viewer's system h3 can look bigger than h2.

Sample: in Vector.

Prior art

T65844: h3 should not be more prominent than h2 headings
T71998: Vector: h3 should not appear as heavier weight than h2
T71999: MonoBook: h3 should not appear as heavier weight than h2
T72004: h4, h5, and h6 headers should not have the same styling
T73240: Re-evaluate serif font stack for headers

Event Timeline

Change 576105 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Cleanup: add Less variables @font-size-heading-4, -5, -6

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

Change 576106 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Cleanup: remove redundant CSS selectors

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

Change 576105 abandoned by Jdlrobson:
Cleanup: add Less variables @font-size-heading-4, -5, -6

Reason:
No changes to typography are planned in the near future so I'm removing this from the review queue. The link to this will continue to be preserved if we decide to pick this up in future. Feel free to comment on the appropriate task with a link to this patch to preserve it for future use.

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

Change 576109 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [Typography] Fix sizes and consistent font usage of headings h1-h6.

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

Change 573035 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/core@master] [Typography] Apply the same relative heading sizes as for Vector. h2 is now clearly bigger than h3.

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

[Resetting assignee due to inactive user account]

Jdlrobson renamed this task from Typography: styling headings h1-h6 (umbrella task) to Suggestion: Reconsider typography of headings h1-h6 (umbrella task).Nov 24 2020, 8:28 PM

Change 576109 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [POC] [Typography] Fix sizes and consistent font usage of headings h1-h6.

Reason:
No need for this to be in the review queue since https://phabricator.wikimedia.org/T245838 is open and this is associated.

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