Improve scannability of headings

[rubinahaddad]

• Increase prominence of headings
• Increase difference between the heading levels

1. All headings should be font-weight: 700;
   -Scanability is key: The user should be able to scan the page and get a sense of its content quickly. Putting a heavy font weight on all headers helps the users can more easily.
2. H1 font-size: 32px, H2 font-size: 24px, H3 font-size: 20px, H4 font-size: 18px, H5 font-size: 16px, H6 font-size: 14px
   -There needs to be more of a visual distinction between headings in order for the user to scan the page more easily, and understand the page structure at a glance.
3. All H2 and under (H3, H4, H5, H6) should have margin-top: 33px;
   -More white space above the header helps chunk the content in a more readable and scanable format.
4. H1 margin-top: 23px;
   -Since the H1 is always at the top of the page, the margin height should stay the same.

[shawnthompson]

How does this differ with the base WET headings? Should we not be using the same as the base?

Are you talking about the heading in the "top tasks?"

    <section class="sect-lnks"> 
    <h3><a rel="external" href="http://weather.gc.ca/?&amp;wb48617274=F4EE897A">Weather information</a></h3>
    <p>Check current conditions, long-term forecasts and public weather alerts, access aviation and marine forecasts, the Air Quality Health Index and historical climate data.</p>
   </section>

I never liked linking the heading here, I think the links should be found in the paragraph and the heading should be headings.

[rubinahaddad]

Its for the Canada.ca theme as it overrides WET's (colours, lines, sizes), the top task headings will still remain links at this time

[shawnthompson]

I believe the only reason we added space and changed the size to the headings was because at the default headings were the same size and close but WET might have fixed that. I'll look into it.

[shawnthompson]

@rubinahaddad : I removed all the custom size in the theme CSS and defaulted back to the WET core styles, so once this PR goes through if there is still issues we can address them to the WET repo.

[shawnthompson]

You will be able to see the changes clearly on this page:
http://wet-boew.github.io/themes-dist/GCWeb/content-en.html

[rubinahaddad]

@shawnthompson am i supposed to see the changes on that page? It looks like nothing has changed...

[shawnthompson]

Give it a few minutes, the PR just got merged, there needs to be a new build.

[shawnthompson]

It has been updated.The headings are now defaulted from the WET base styles.
http://wet-boew.github.io/themes-dist/GCWeb/home-en.html

[rubinahaddad]

@shawnthompson the h1 css hasn't been applied and the headings still need the font-weight change. Also the 41px as an H1 in WET is a bit too large for the GCWeb theme which is why i suggested alternative sizes above

[shawnthompson]

@rubinahaddad shouldn't the font-weight change be done at the base? If so, should we open an issue in the WET repo? I will reopen this issue but I think some of these changes should be made in the base CSS, like the font-weight 700. I would like to optimize the styles as much as possible.

I'll change the size and the top margins but I think the font-weight should be done in the base.

Thoughts, @pjackson28?

[shawnthompson]

I thought we weren't supposed to have any font-size smaller than 16px because of mobile?

[pjackson28]

If the font weight of the headings is supposed to increase to 700 then the PR should go to core (currently it is 500). Is the increased font weight the desired effect? Just looking for confirmation. See the difference it makes:

500 weight:

700 weight:

[pjackson28]

Also @shawnthompson is right, the minimum font size is 16 pixels so no headings should be smaller than the minimum font size.

[rubinahaddad]

@pjackson28 The 700 weight is the desired effect. For min font size i was going by the min on the WET working example page where the h6 is 14px: http://wet-boew.github.io/v4.0-ci/theme/content-en.html

[shawnthompson]

@pjackson28 what about fixing all that in the WET base and GCWeb just fixing the H1? so GCWeb uses all the default sizes from WET?

[pjackson28]

@rubinahaddad Strange, it seems it is set to 85% of the base font (@thomasgohard did that). Not really an issue as I don't ever recall seeing an h6 used in real-world cases.

[pjackson28]

@rubinahaddad What 41 pixel margin-top on h1 are you referring to? The margin-top is set to 0.45em which translates to about 18 pixels (what Firebug is reporting).

[rubinahaddad]

@pjackson28 ok so then my proposed font sizes aren't an issue since only the h6 is below 16px ?

[pjackson28]

@rubinahaddad Yes, it looks like h5 is 16px so it should be fine.

[rubinahaddad]

@pjackson28 41px is the font-size of the WET h1

[pjackson28]

@rubinahaddad Wasn't the original issue that the heading sizes were not distinct enough? This actually makes the situation much worse globally for WET where the size difference diminished significantly for all but h1 vs h2 (+1px) and h5 vs h6 (no change).

Current:

• h1 - h2 = 7px
• h2 - h3 = 6px
• h3 - h4 = 8px
• h4 - h5 = 4px
• h5 - h6 = 2px

Proposed:

• h1 - h2 = 8px (+1px)
• h2 - h3 = 4px (-2px)
• h3 - h4 = 2px (-6px)
• h4 - h5 = 2px (-2px)
• h5 - h6 = 2px (no change)

[rubinahaddad]

@pjackson28 From the GCWeb theme it’s an improvement, but in regards to WET you are right. The issue with the default WET headings is the h1 is way too big therefore I had to start with an h1 size that is larger than the current GCWeb h1, but not so large that it starts changing the layouts of the GCWeb pages. The next challenge was creating a large visual distinction between h1 and h2s because those are the headings you will see on every page, and then I averaged down after that.

[pjackson28]

@rubinahaddad Why does the h1 need to be so small? The proposal is for it to be smaller than the h2 was in WET originally. Where is the size of the h1 causing problems?

[rubinahaddad]

Currently the h1s are 27px. To go from 27px to 41px is a huge jump, and not necessarily needed. I think generally 41px is really big for a heading, and it doesn't need to be that big. If we start at h1 being the same as the WET h2 which is 34px I'm ok with that, but i think visually the 41px is too big.

Especially in pages with long titles such as this one: http://www.cic.gc.ca/francais/information/carte-rp/index.asp

[pjackson28]

The issue is that with the propose approach the headings start really looking similar. There is still a significant difference between h1 and h2 but it much more difficult to distinguish between the other headings. It will be even harder to distinguish them on small screens where the differences will be much subtler due to screen size.

Before:

After:

[shawnthompson]

What about the margin-top @rubinahaddad is asking for? Change in WET or in GCWeb?

[pjackson28]

@rubinahaddad The WET global h1 margin-top is 0.45em which translates to about 18px. Is the proposal to globally increase it to 23px?

[rubinahaddad]

@pjackson28 23px is what i got when using the developer tool in IE. So plz leave the h1 margin as is - the 0.45 em. For all other margins, can you increase them a bit? It helps when scanning the page

[rubinahaddad]

@pjackson28 As for the heading difference i think h1 h2 and h3 are the most important differences we need to cater towards, as most pages will have them. Again, i don't think the h1 needs to be the 41px which is why i started at 32px (which is now 34px). "Content page" doesn't look bad with the 41px, but when you start getting into longer headings it is pretty overwhelming.

[pjackson28]

@rubinahaddad I'd caution against only focusing on h1, h2 and h3 as the use of h4 is not uncommon (e.g., http://www.cra-arc.gc.ca/ndvdls-fmls/menu-eng.html). I wouldn't really bother with h5 and h6 though as their usage is very rare. As for why 41px was chosen for h1, that would be a question for @thomasgohard.as he set it at 2.6 times the base font size. I'm not familiar with the basis for the multiplier of 2.6.

I'm not arguing for any particular size for the h1 (@thomasgohard is in a better position to discuss actual sizes and the rationales behind them), I'm more interested in ensuring there is sufficient differentiation between the h1 to h4 headings. What sizes do you suggest for ensuring good differentiation for h1 to h4 (rather than h1 to h3)?

[rubinahaddad]

@pjackson28 fair enough:
I would recommend the following then:

H1 font-size: 34px,
H2 font-size: 26px,
H3 font-size: 22px,
H4 font-size: 18px,
H5 font-size: 16px,
H6 font-size: 14px

[shawnthompson]

Changes made, closing

[thomasgohard]

The font size multipliers are from Bootstrap. I did not change them, but I don't know their source nor is it documented from what I can tell.