User:Aron Manning/Vector headings typography fix

Topic: A study of current heading sizes and typography in active skins and a solution to the undifferentiated headings bug in Vector (phab:T72004).
Please discuss on the talk page.

The core issue of the headings in Vector is that h1-h2 use the serif font stack, but h3-h6 use the browser default sans-serif font. This inevitably leads to inconsistent metrics and confuses readers. To distinguish headings from content the most obvious sign is to use the same font for all headings h1-h6, which is different from the body content. Using the same font, font sizes can be distributed nearly equally between the largest h1 (1.8em) and smallest h6 (1.0em), thus ensuring that heading levels can be distinguished.

Significant differences between headings:

• h1 is only used for the article title typically.
• h1-h2 headings are emphasized with a page-width underline (bottom-border technically).
• h3-h6 headings are on the other hand bold, balancing the underline and higher font-size of h1-h2.
• h5-h6 is seldom used.

To clearly distinguish headings from content it should be considered to underline h3-h6 headings too (only the text, not page-width). This is not part of this solution, though.

Note: the em unit is relative to the parent element's font-size. 1.0em == 100%, 0.1em == 10%.

Constraints:

• Headings h1-h6 use the same font, so the actual character size is consistent with the font-size setting.
• The smallest heading should be bigger or the same font-size as the content.
• Range: h1 font-size 1.8em, h6 font-size 1.0em.
• Articles typically use h2-h4. These need to be easier to distinguish than the rest.
• Article content should be easily distinguishable from the smallest heading typically used: h4 font-size should be 1.2em minimum.

The decision to be made is: how to distribute the font-size range 1.8em - 1.0em between 6 headings.

The problem

See it in:   Vector   Minerva   MonoBook   Modern   Timeless

H1h1 Heading for article title

The lede is here.

Some meta lorem ipsum to give a sense of content relative to headings: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

H2h2 Heading for top level sections

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

H3h3 Heading for second level sections

Cras nibh lorem, fermentum pretium libero at, rutrum blandit libero. Fusce ac nisi nisl. Vestibulum laoreet quam quis massa interdum molestie. Praesent malesuada mollis pharetra. Maecenas eu lorem vitae erat commodo consequat et eget magna. Praesent ultrices porta commodo. Cras efficitur porta faucibus.

H4h4 Heading for third level sections, same size as below in Vector, Minerva and MonoBook

Nunc tempus vitae nulla id hendrerit. Donec consequat risus at tellus aliquet, vitae egestas velit sodales. Curabitur pellentesque convallis posuere. Pellentesque lorem mi, cursus a ante in, malesuada dapibus quam. Sed eros lacus, maximus ut mollis in, molestie auctor dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin dui tempus purus consequat, vitae ornare dolor vestibulum. Nam ac turpis sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

H5h5 Headings with the same size in Vector, Minerva and MonoBook

Articles generally don't use this level.

Morbi at venenatis turpis. Phasellus commodo lacus non interdum venenatis. Suspendisse iaculis lorem eu est interdum euismod. Mauris vel auctor urna. Cras dignissim eros eu diam aliquet tincidunt.

H6h6 Headings with the same size in Vector, Minerva and MonoBook

Articles generally don't use this level.

Nam velit metus, volutpat id tincidunt vel, tincidunt nec justo. Donec varius eleifend velit ut dignissim. Morbi ultrices quis ipsum sed vulputate. Duis eu turpis eget mi suscipit tincidunt id at arcu. Suspendisse diam nibh, gravida non sem eu, porta commodo dui. Maecenas metus ante, convallis at urna eget, posuere volutpat mauris.

Suggested distribution for Vector

• See it in Vector.

Article title h1 with format: 1.8em

Distinguishing article title from the next heading is not a problem. The lede is here.

Heading h2 with format: 1.7em

Change: +0.2em

Heading h3 with format: 1.4em serif

Change: +0.2em
The bigger step between h2-h3 (-0.3em) balances the prominence of the bold h3 compared to the normal weight h2.

Heading h4 with format: 1.2em serif

Change: +0.2em

Some article content. Morbi et ultrices elit, sit amet lobortis magna. Vivamus sit amet suscipit nibh, non accumsan nunc. Donec a odio tortor. Praesent mollis ante sit amet posuere euismod. Vestibulum sed ullamcorper felis. Donec quis mattis sapien. Pellentesque eu venenatis tellus. Aenean turpis libero, faucibus et cursus ac, tincidunt vitae nibh. Proin interdum magna eget nisi accumsan iaculis. Nunc a volutpat sapien.

Heading h5 with format: 1.1em serif, bold

Change: +0.1em

Articles generally don't use this level.

Heading h6 with format: 1em serif, bold

Articles generally don't use this level.

Donec nec lorem nibh. Sed a tortor eu nibh accumsan semper. Nulla quis metus ut urna vestibulum interdum id id ipsum. Proin hendrerit nibh sit amet libero lobortis, finibus interdum arcu mattis. Etiam sollicitudin risus vel quam tincidunt scelerisque. Morbi mattis sem nisi, in vestibulum nulla aliquet sit amet. Pellentesque sit amet magna nec justo lacinia tristique id ac lectus. Nullam placerat mi quis ipsum facilisis mollis. Praesent sapien erat, ullamcorper a risus sed, pretium laoreet eros.

Suggested distribution for Minerva

• See it in Minerva.

The example is presented with Minerva's content font-size (16px), therefore the 1.7em h1 is bigger than Vector's 1.8em h1 with content font-size being 14px.
The sizes have been adjusted using 'Roboto Slab' (Android, serif), 'Linux Libertine', 'Georgia' fonts. 'Roboto Slab' and 'Georgia' requires a step of -0.3em between h2 and h3, with -0.2em the bold h3 would look similar sized as the normal h2. 'Linux Libertine' also works with -0.2em. Not tested with 'San Francisco' (iPhone/iOS).
The range between 1.2em - 1.0em is distributed non-linearly between h3-h6, making h3-h4 a more significant than h4-h6, which is less often used.

Article title h1 with format: 1.7em

Distinguishing article title from the next heading is not a problem. The lede is here.

Heading h2 with format: 1.6em

Change: +0.1em

Heading h3 with format: 1.3em

Change: +0.1em
The bigger step between h2-h3 (-0.3em) balances the prominence of the bold h3 compared to the normal weight h2.

Heading h4 with format: 1.15em

Change: +0.15em

Some article content. Morbi et ultrices elit, sit amet lobortis magna. Vivamus sit amet suscipit nibh, non accumsan nunc. Donec a odio tortor. Praesent mollis ante sit amet posuere euismod. Vestibulum sed ullamcorper felis. Donec quis mattis sapien. Pellentesque eu venenatis tellus. Aenean turpis libero, faucibus et cursus ac, tincidunt vitae nibh. Proin interdum magna eget nisi accumsan iaculis. Nunc a volutpat sapien.

Heading h5 with format: 1.07em, bold

Change: +0.07em

Articles generally don't use this level.

Heading h6 with format: 1em, bold

Articles generally don't use this level.

Vestibulum cursus luctus sem vitae tempus. Suspendisse interdum neque eu pharetra feugiat. Nam nisl ante, vestibulum non sem sed, mattis scelerisque erat. Integer vitae sodales arcu. Ut vel ultrices elit, a viverra ipsum. Donec ultrices enim tempus, ullamcorper arcu in, faucibus augue. Sed vitae massa eu quam ultricies consequat sed mattis ante.

Suggested distribution for Timeless

• See it in Timeless.

Timeless h3-h6 headings are all non-bold, necessitating a slightly bigger font-size: currently +0.2em compared to Vector. The current font sizes clearly distinguish different heading levels.

Article title h1 with format: 2.0em

Distinguishing article title from the next heading is not a problem. The lede is here.

Heading h2 with format: 1.8em

Heading h3 with format: 1.6em

Heading h4 with format: 1.4em

Some article content. Morbi et ultrices elit, sit amet lobortis magna. Vivamus sit amet suscipit nibh, non accumsan nunc. Donec a odio tortor. Praesent mollis ante sit amet posuere euismod. Vestibulum sed ullamcorper felis. Donec quis mattis sapien. Pellentesque eu venenatis tellus. Aenean turpis libero, faucibus et cursus ac, tincidunt vitae nibh. Proin interdum magna eget nisi accumsan iaculis. Nunc a volutpat sapien.

Heading h5 with format: 1.3em

Change: +0.05em

Articles generally don't use this level.

Heading h6 with format: 1.2em

Articles generally don't use this level.

Integer ut nisi hendrerit, condimentum nibh sit amet, vulputate risus. Nullam vestibulum, sem sed ornare lacinia, nibh nibh laoreet est, vitae molestie diam velit sit amet tellus. Nulla fermentum nisi ut dignissim tincidunt. Integer sed porta est, ut molestie velit. Quisque at venenatis erat. Quisque nec libero vel leo luctus ornare. Sed eget metus leo. Cras varius congue sem, non sagittis nunc dictum aliquam. Vestibulum vel sapien id ex facilisis mollis non a libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Suggested distribution for MonoBook

• See it in MonoBook.

This style is imported from the legacy common skinning css: core.git/resources/src/mediawiki.skinning/elements.css
MonoBook could use the same distribution as Vector with h1 = 1.88em. The change is hardly noticeable, while making h5-h6 distinguishable.

Article title h1 with format: 1.88em

Distinguishing article title from the next heading is not a problem. The lede is here.

Heading h2 with format: 1.7em

Change: +0.2em

Heading h3 with format: 1.4em

Change: +0.12em

Heading h4 with format: 1.2em

Change: +0.04em

Some article content. Morbi et ultrices elit, sit amet lobortis magna. Vivamus sit amet suscipit nibh, non accumsan nunc. Donec a odio tortor. Praesent mollis ante sit amet posuere euismod. Vestibulum sed ullamcorper felis. Donec quis mattis sapien. Pellentesque eu venenatis tellus. Aenean turpis libero, faucibus et cursus ac, tincidunt vitae nibh. Proin interdum magna eget nisi accumsan iaculis. Nunc a volutpat sapien.

Heading h5 with format: 1.1em

Change: +0.02em

Articles generally don't use this level.

Heading h6 with format: 1em

Articles generally don't use this level.

Sed est velit, semper nec nulla sed, sodales porttitor neque. Vestibulum sed ligula eu arcu venenatis consequat. Sed consectetur, nisl dapibus viverra ornare, erat dui sagittis dui, sed imperdiet odio lorem ut dui. Maecenas laoreet dui odio, quis bibendum justo mattis in. Duis leo eros, consectetur non felis non, malesuada aliquet nisl. Nulla turpis nibh, scelerisque quis tristique eu, eleifend in tortor. Sed congue velit vitae ex ullamcorper, a placerat ipsum vestibulum. Nunc in aliquam augue, vel ullamcorper lectus.

Suggested distribution for Modern skin

• See it in Modern.

Modern is using the default browser font-size for headings. Comparison is based on chrome's user-agent stylesheet.
Modern could use the same distribution as Vector with h1 = 2em. The change for h2-h3 is barely noticeable, while making h4-h6 readable.

Article title h1 with format: 2em

Distinguishing article title from the next heading is not a problem. The lede is here.

Heading h2 with format: 1.7em

Change: +0.2em

Heading h3 with format: 1.4em

Change: +0.23em

Heading h4 with format: 1.2em

Change: +0.2em

Some article content. Morbi et ultrices elit, sit amet lobortis magna. Vivamus sit amet suscipit nibh, non accumsan nunc. Donec a odio tortor. Praesent mollis ante sit amet posuere euismod. Vestibulum sed ullamcorper felis. Donec quis mattis sapien. Pellentesque eu venenatis tellus. Aenean turpis libero, faucibus et cursus ac, tincidunt vitae nibh. Proin interdum magna eget nisi accumsan iaculis. Nunc a volutpat sapien.

Heading h5 with format: 1.1em

Change: +0.27em

Articles generally don't use this level.

Heading h6 with format: 1em

Change: +0.33em

Articles generally don't use this level.

Nunc eu pharetra ligula. Suspendisse potenti. Fusce sollicitudin nulla hendrerit dolor malesuada commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eget ornare lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi ipsum ligula, efficitur et fringilla ac, commodo at magna. Maecenas non finibus arcu. Duis suscipit justo et tincidunt mollis. Ut pulvinar massa in sem laoreet, sed feugiat leo luctus. Sed eu sapien ut eros consequat elementum ac sit amet est.

Summary of font size changes

Vector

Sample in Vector.

h1 - 1.8em normal
h2 - 1.5em normal  ->  1.7em (+0.2em)
h3 - 1.2em bold    ->  1.4em (+0.2em)
h4 - 1em bold      ->  1.2em (+0.2em)
h5 - 1em bold      ->  1.1em (+0.1em)
h6 - 1em bold

Minerva

Sample in Minerva.

Minerva uses the serif font stack for all h1-h6, thus there is no confusing inconsistency, but h5-h6 are not bold (same as body content).

h1 - 1.7em normal (Vector - 0.1em)
h2 - 1.5em normal  ->  1.6em (+0.1em)
h3 - 1.2em bold    ->  1.3em (+0.1em)
h4 - 1em bold      ->  1.15em (+0.15em)
h5 - 1em normal    ->  1.07m (+0.07em), bold
h6 - 1em normal    ->  bold

Timeless

Sample in Timeless.

Timeless has a decent distribution, no issue there.

h1 - 2.0em normal (Vector + 0.2em)
h2 - 1.8em normal (Vector + 0.3em)
h3 - 1.6em normal (Vector + 0.4em)
h4 - 1.4em normal (Vector + 0.4em)
h5 - 1.25em normal (Vector + 0.25em)  ->  1.3em (+0.05em)
h6 - 1.2em normal (Vector + 0.2em)

MonoBook

Sample in MonoBook.

Style is imported from core.git/resources/src/mediawiki.skinning/elements.css

h1 - 188% normal (Vector + 0.08em)
h2 - 150% normal                  ->  170%  (change: +0.2em)
h3 - 128% bold (Vector + 0.08em)  ->  140%  (change: +0.12em)
h4 - 116% bold (Vector + 0.16em)  ->  120%  (change: +0.04em)
h5 - 108% bold (Vector + 0.08em)  ->  110%  (change: +0.02em)
h6 - 100% bold

Modern

Sample in Modern.

Modern uses the default browser font-sizes for headings in Chrome. Although it has distinguishable headings, h4-h6 are smaller than the content.

h1 - 200% bold (Vector + 0.2em)
h2 - 150% bold                    ->  170%  (change: +0.2em)
h3 - 117% bold (Vector - 0.03em)  ->  140%  (change: +0.23em)
h4 - 100% bold                    ->  120%  (change: +0.2em)
h5 -  83% bold (Vector - 0.17em)  ->  110%  (change: +0.27em)
h6 -  67% bold (Vector - 0.33em)  ->  100%  (change: +0.33em)

Former attempts

Previous demo

• Vector
• Timeless
• Minerva
• MonoBook
• Modern

Previous tasks

• https://phabricator.wikimedia.org/T65844 (Apr 2014) h3 should not be more prominent than h2 headings
• https://phabricator.wikimedia.org/T71998 (Aug 2014) Vector: h3 should not appear as heavier weight than h2
• https://phabricator.wikimedia.org/T71999 (Aug 2014) MonoBook: h3 should not appear as heavier weight than h2
• https://phabricator.wikimedia.org/T72004 (Aug 2014) h4, h5, and h6 headers should not have the same styling

Merged patches

• https://gerrit.wikimedia.org/r/c/mediawiki/core/+/164713

Reduces h3 font-size for all skins from 1.32em to 1.28em in core.git/resources/src/mediawiki.skinning/elements.css.

• https://phabricator.wikimedia.org/T50671 (May 2013) h5 and h6 have the same font size at default settings in some skins

Increases h5 font-size for all skins from 105% to 108% in core/skins/common/commonElements.css (mediawiki.skinning/elements.css now).

• https://phabricator.wikimedia.org/T87685 (Jan 2015) h3 and h4 are styled the same
• Nov 2 2016 - https://gerrit.wikimedia.org/r/#/c/242086/ (phab)

This makes h4-h6 the same size in Blueprint skin.

Abandoned patches

• May 19, 2015 - https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/162304 - This fixes the font-stack inconsistency. The font sizes are too close, though, particulaly h2-h3:

 h1 = 1.8em;
 h2 = 1.6em;
 h3 = 1.53em; + margin-top: .75em;
 h4 = 1.4em;
 h5 = 1.325em;
 h6 = 1.25em;

• Oct 26, 2015 - https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/164712 - This doesn't fix the font inconsistency, h1,h2 are quite bigger than Vector's 1.8em.

 h1 = 2em;
 h2 = 1.7em;
 h3 = 1.3em;
 h4 = 1.2em;
 h5 = 1.1em;
 h6 = 1em;