XWIKI-21333: Update the weight and font size of headings

[manuelleduc]

Jira: https://jira.xwiki.org/browse/XWIKI-21333

• Replace the headings sizes with a size scale
• Make the headings size proportional to the viewport width, the size is still bounded and won't get smaller below 768px, or larger above 1200px.
• The size scale is based on two headings size scale (1.250 for the larger screens, and 1.125 for the smaller screens)

I agree the code is complex, I'm looking for ways to simply.
Also, if we drop the viewport scale improvement, the code gets muuuch simpler.

TODO

• fix the page title edition field, which is not high enough for the new text size

How are headings size computed

Inspired from https://www.smashingmagazine.com/2016/05/fluid-typography/#controlling-the-rate-of-scale

You can find below the actual font-size used for h1 headings with the default values.

• given a screen size between 768px and 1200px;
• 23px = the minimal font size a h1 heading can have (on 768px or smaller screens), computed following the formula 14px * pow(1.125, 4)
• 35px = the maximal font size a h1 heading can have (on 1200px or lager screens), , computed following the formula 14px * pow(1.250, 4)

h1 {
  font-size: max(23px, min(35px, calc(23px + (35 - 23) * (100vw - 768px) / (1200 - 768))));
}}

The same goes for the other headings, but the power applies to the ratio is decremented for each sub-level (ranging from 4 for h1 to -1 for h6).

Home page

Before

1200

768

After

1200

768

Sandbox

Before

1200

768

After

1200

768

[manuelleduc]

On thing I don't like with the current result is the h5 which is the same size and weight as normal text.
You can see below the result with weights 400, 500, and 600.
The current default is 400, but was 500 (bootstrap default), until https://jira.xwiki.org/browse/XWIKI-10838

Note that the weigh currently applies to the whole page, be we could limit it to the content only to avoid regression or change of style on UI elements relying on headings for various purpose.

400

500

600