Issue #9 - No difference in prominence between level 2 and 3 titles on website

As can be seen on http://www.spi-inc.org/donations/ there is no difference in size for HTML H2 and H3 elements. Both use a 19.2 pixels font size by default. Both also have CSS font-weight of 700. There is a difference between the two in that level 3 is italicized, making it possible for people used to the site tell which is which, but newcomers looking at a level 3 section heading cannot tell from style alone that the section is part of its level 2 section.

This probably affects all spi-inc.org pages, but there are apparently few pages using level 3 sections.

HTML allows 6 levels of sections, making it a bit hard to allow distinguising all easily using size alone without making level 1 titles huge, so it is a good idea to keep using styling other than size in addition.

--
Philippe Cloutier
http://www.philippecloutier.com

* Philippe Cloutier <chealer(at)gmail(dot)com> [2018-07-01 14:02]:
> As can be seen on http://www.spi-inc.org/donations/ there is no
> difference in size for HTML H2 and H3 elements. Both use a 19.2
> pixels font size by default. Both also have CSS font-weight of 700.
> There is a difference between the two in that level 3 is italicized,
> making it possible for people used to the site tell which is which,
> but newcomers looking at a level 3 section heading cannot tell from
> style alone that the section is part of its level 2 section.

Yeah, I noticed that too. Valessio, since you did the CSS, can you
look into this?

--
Martin Michlmayr
https://www.cyrius.com/

Hello Philippe,

Thanks for the feedback.

The current work of the site was done in a few hours, I confess that
afterwards I had no way to continue. I made a quick and temporary
adjustment for the titles; I kept the previous encoding pattern in%.
The code is like this:

h2 { font: bold 120% sans-serif }
h3 { font: italic 100% sans-serif; font-weight: bold; }
h4, h5, h6 { font: small-caps 100% sans-serif; font-weight: bold; }
h4 { font-size: 90%; }
h5 { font-size: 80%; }
h6 { font-size: 70%; }

If you have any suggestion, you can send it here and apply it there. I
think we can improve a lot with some contrast scheme and pastel
colors.

What do you think?

Cheers,
Valessio Brito
Em dom, 1 de jul de 2018 às 15:04, Martin Michlmayr <tbm(at)cyrius(dot)com> escreveu:
>
> * Philippe Cloutier <chealer(at)gmail(dot)com> [2018-07-01 14:02]:
> > As can be seen on http://www.spi-inc.org/donations/ there is no
> > difference in size for HTML H2 and H3 elements. Both use a 19.2
> > pixels font size by default. Both also have CSS font-weight of 700.
> > There is a difference between the two in that level 3 is italicized,
> > making it possible for people used to the site tell which is which,
> > but newcomers looking at a level 3 section heading cannot tell from
> > style alone that the section is part of its level 2 section.
>
> Yeah, I noticed that too. Valessio, since you did the CSS, can you
> look into this?
>
> --
> Martin Michlmayr
> https://www.cyrius.com/

Hi Valessio,

On 2018-07-01 17:37, Valessio Brito wrote:
> Hello Philippe,
>
> Thanks for the feedback.
>
> The current work of the site was done in a few hours, I confess that
> afterwards I had no way to continue.

No problem. But I notice that my Firefox (Debian stable's) has default CSS which deals with header font size, giving each one a different size. Perhaps there is value in using those sizes, which users may be somewhat accustomed to,

> I made a quick and temporary
> adjustment for the titles; I kept the previous encoding pattern in%.
> The code is like this:
>
> h2 { font: bold 120% sans-serif }
> h3 { font: italic 100% sans-serif; font-weight: bold; }
> h4, h5, h6 { font: small-caps 100% sans-serif; font-weight: bold; }
> h4 { font-size: 90%; }
> h5 { font-size: 80%; }
> h6 { font-size: 70%; }

At least, that makes all levels distinct in size, except for 1 and 2. But if spi-inc.org only uses level 1 once per page, I guess its size does not matter much.

>
> If you have any suggestion, you can send it here and apply it there. I
> think we can improve a lot with some contrast scheme and pastel
> colors.
>
> What do you think?

I am fine with that, thank you.

>
> Cheers,
> Valessio Brito
> Em dom, 1 de jul de 2018 às 15:04, Martin Michlmayr <tbm(at)cyrius(dot)com> escreveu:
>> * Philippe Cloutier <chealer(at)gmail(dot)com> [2018-07-01 14:02]:
>>> As can be seen on http://www.spi-inc.org/donations/ there is no
>>> difference in size for HTML H2 and H3 elements. Both use a 19.2
>>> pixels font size by default. Both also have CSS font-weight of 700.
>>> There is a difference between the two in that level 3 is italicized,
>>> making it possible for people used to the site tell which is which,
>>> but newcomers looking at a level 3 section heading cannot tell from
>>> style alone that the section is part of its level 2 section.
>> Yeah, I noticed that too. Valessio, since you did the CSS, can you
>> look into this?
>>
>> --
>> Martin Michlmayr
>> https://www.cyrius.com/

--
Philippe Cloutier
http://www.philippecloutier.com