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 (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-h2 headings are emphasized with a full-width underline (bottom-border technically).
 * h3-h6 headings are on the other hand bold, balancing the underline and higher font-size of h1-h2.

Note: the  unit is relative to the parent element's font-size. ,.

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.
 * Font-sizes decrease strictly monotonically.
 * The distribution should be close to linear.
 * Break point in linear distribution: h1-h2 (normal weight, underlined) requires more emphasis than h3-h6 (bold, no underline).

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
 * See it in Minerva
 * See it in MonoBook
 * See it in Modern
 * Although Modern has distinguishable headings, h4-h6 are smaller than the content.


 * See it in Timeless
 * Timeless has a decent distribution, no issue there.

H1h1 Heading for top level sections H2h2 Heading for second level sections H3h3 Heading for third level sections H4h4 Headings with the same size in Vector, Minerva and MonoBook H5h5 Headings with the same size in Vector, Minerva and MonoBook H6h6 Headings with the same size in Vector, Minerva and MonoBook

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.

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).

= Suggested distribution for Vector =


 * See it in Vector.

 Heading h1 with format:  Heading h2 with format: Change: +0.1em  Heading h3 with format: 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: Change: +0.2em  Heading h5 with format: Change: +0.1em  Heading h6 with format:

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 =

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.
 * See it in Minerva.

 Heading h1 with format:  Heading h2 with format:  Heading h3 with format: 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: Change: +0.1em  Heading h5 with format: Change: +0.05em  Heading h6 with format:

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.

 Heading h1 with format:  Heading h2 with format:  Heading h3 with format:  Heading h4 with format: <h5 style="font: normal 1.3em 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;"> Heading h5 with format: Change: +0.05em <h6 style="font: normal 1.2em 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif;"> Heading h6 with format:

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

<h1 style="font: normal 1.88em sans-serif;"> Heading h1 with format: <h2 style="font: normal 1.6em sans-serif;"> Heading h2 with format: Change: +0.1em <h3 style="font: bold 1.3em sans-serif;"> Heading h3 with format: Change: +0.02em <h4 style="font: bold 1.2em sans-serif;"> Heading h4 with format: Change: +0.04em <h5 style="font: bold 1.1em sans-serif;"> Heading h5 with format: Change: +0.02em <h6 style="font: bold 1.0em sans-serif;"> Heading h6 with format:

MonoBook could use the same distribution as Vector with h1 = 1.88em. The change is hardly noticeable, while making h5-h6 distinguishable.

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 =

Modern is using the default browser font-size for headings. Comparison is based on chrome's user-agent stylesheet.
 * See it in Modern.

<h1 style="font: bold 2.0em sans-serif;"> Heading h1 with format: <h2 style="font: bold 1.6em sans-serif;"> Heading h2 with format: Change: +0.1em <h3 style="font: bold 1.3em sans-serif;"> Heading h3 with format: Change: +0.13em <h4 style="font: bold 1.2em sans-serif;"> Heading h4 with format: Change: +0.2em <h5 style="font: bold 1.1em sans-serif;"> Heading h5 with format: Change: +0.27em <h6 style="font: bold 1.0em sans-serif;"> Heading h6 with format: Change: +0.33em

Modern could use the same distribution as Vector with h1 = 2em. The change for h2-h3 is barely noticeable, while making h4-h6 readable.

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
h1 - 1.8em normal h2 - 1.5em normal ->  1.6em (+0.1em) h3 - 1.2em bold   ->  1.3em (+0.1em) h4 - 1em bold     ->  1.2em (+0.2em) h5 - 1em bold     ->  1.1em (+0.1em) h6 - 1em bold

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 h3 - 1.2em bold h4 - 1em bold   ->  1.1em (+0.1em) h5 - 1em normal ->  1.05m (+0.05em), bold h6 - 1em normal ->  bold

Timeless
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
Style is imported from core.git/resources/src/mediawiki.skinning/elements.css

h1 - 1.88em normal (Vector + 0.08em) h2 - 1.5em normal                  ->  160%  (change: +0.1em) h3 - 1.28em bold (Vector + 0.08em) ->  130%  (change: +0.02em) h4 - 1.16em bold (Vector + 0.16em) ->  120%  (change: +0.04em) h5 - 1.08em bold (Vector + 0.08em) ->  110%  (change: +0.02em) h6 - 1em bold

Modern
Modern uses the default browser font-sizes for headings in Chrome.

h1 - 2.0em bold (Vector + 0.2em) h2 - 1.5em bold                    ->  160%  (change: +0.1em) h3 - 1.17em bold (Vector - 0.03em) ->  130%  (change: +0.13em) h4 - 1.0em bold                    ->  120%  (change: +0.2em) h5 - 0.83em bold (Vector - 0.17em) ->  110%  (change: +0.27em) h6 - 0.67em 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
h1 = 1.8em; h2 = 1.6em; h3 = 1.53em; + margin-top: .75em; h4 = 1.4em; h5 = 1.325em; h6 = 1.25em; h1 = 2em; h2 = 1.7em; h3 = 1.3em; h4 = 1.2em; h5 = 1.1em; h6 = 1em;
 * 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:
 * 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.