CSS: reduce size differential between headings and text

[sebalis]

CSS: reduce size differential between headings and text

[mejo-]

I have to admit that I agree. I never use H1 or H2 for exactly that reason.

@nextcloud/designers what do you think about shrinking the size of the heading fonts?

[jancborchardt]

Yeah, sounds good to reduce it a bit.

Keep in mind there still needs to be a bit of difference though to show the structure.

I suggest we use the same sizing rules as on the MDN page for headings (only sizes, not the italic):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

This would make h1 twice the text size, and h2 150%. A drawback is that h5 and h6 would have to be the same as h4. We could make h5 font-weight: 600 and h6 font-weight: 500.

What do you think? Also cc @marcoambrosini regarding structuring and @susnux as we talked about adjusting the headings in the Nextcloud interface itself.

[sebalis]

That MDN page is of course in no way a standard and not necessarily well thought through, as excellent as MDN generally is as a reference source for web development. There is a box further down the article without italics and more or less the same sizes. They are (H1–H6): 2, 1.5, 1.17 (the first example with italics has 1.2), 1, 0.83, 0.67. I wonder if it is wise to have a size below 1 at the lowest two levels. Also, to end up at 2 is still a little high to me. I’ve made some calculations and suggest some slightly rounded numbers with an increase of 9.4%–10.2% at each step, for H1–H6 they are: 1.75, 1.6, 1.46, 1.33, 1,21, 1,1, See attached LibreOffice spreadsheet.

[sebalis]

My iniital suggestion was to end up at 1.5 and is based on my experience of formatting text documents, where levels don’t usually go down to 6. I still believe that 1.5 is a good choice for H1. Here is a different suggestion, with differences decreasing from 11.1% (H1→H2) to 4.8% (H5→H6), ending up at 5% larger than text size. The numbers are, again from H1 down to H6: 1.5, 1.36, 1.25, 1.167, 1.1, 1.05. This is a new row in my updated spreadsheet.

(I don’t know how quickly this is being read, so a note that I edited this comment to change one number, I made the corresponding change in the new version of my spreadsheet)

[susnux]

I think the numbers are a bit weird, because 1.05 will result in no size change and even 1.1 would only be 16px.

How about something like:

• default (text etc):
  • font-size: 15px
  • font-weight: normal
• h1
  • font-size: 30px
  • font-weight: 600
• h2
  • font-size: 26px
  • font-weight: 600
• h3
  • font-size: 23px
  • font-weight: 600
• h4
  • font-size: 20px
  • font-weight: 600
• h5
  • font-size: 17px
  • font-weight: 600
• h6
  • font-size: 15px
  • font-weight: 700

[sebalis]

I don’t actually consider it a bad thing if H6 gets the same size as P. At least it’s better than the MDN page suggested above, where H4 has the same size as P and H5 and H6 are actually smaller. That would definiitely be weird.

Regarding font-weight, does 700 vs. 600 actually make a visible difference?

But mainly, I do believe we wouldn’t achieve what this issue aims for if H1 ends up at 2 times the size of P. I think the factor needs to be less than that, which is why I gave you two sequences ending in 1.5 or 1.75.

[susnux]

which is why I gave you two sequences ending in 1.5 or 1.75

Which would be h3 from the example above, then the rest of the heading can be hardly distinguished due to only 7,5px difference between h1 and p.

You only have one h1 normally so it should work in most cases and is already smaller than currently.

Regarding font-weight, does 700 vs. 600 actually make a visible difference?

I think yes but I did a mistake there. My idea was to make it different from <p><strong> but that it font-size: 15px; font-weight: 700;.

[sebalis]

which is why I gave you two sequences ending in 1.5 or 1.75

Which would be h3 from the example above, then the rest of the heading can be hardly distinguished due to only 7,5px difference between h1 and p.

That appies to one of my suggestions, the one that ends with 1.5 for H1. For the other sequence that ends at 1.75, the absolute difference is 11.75px. Both these calculations assume a text size of 15px, but that is not set in stone either. But I also don’t agree with your statement that the levels H4 and H5 can hardly be distinguished, I think the difference is small but clear to see.

In any case, the important factor to me is the one between normal text and H1. Currently this factor is 240% and if we only bring it down to 200% then I don’t think we will have done enough. It does not matter to me as much whether the lowest level ends up at 105%, 110% or 120%.

You only have one h1 normally so it should work in most cases and is already smaller than currently.

To only have one H1 is a frequently found recommendation for web pages, but it is not universally agreed. A quote from this source: “Does Google recommend using one H1 heading? The answer is no.” For the text editor, this point applies even less; text documents might well have several sections at the top level. Consider a protocol of a meeting – each agenda item would rightly have a first-level heading. The same applies to any topical text. Both these types of documents may have a title (stating the date of the meeting, or the topic of the text). But if there is a title, it does not necessarily follow that this title is the only first-level heading – often this does not fit well with the structure of the document.

Regarding font-weight, does 700 vs. 600 actually make a visible difference?

I think yes but I did a mistake there. My idea was to make it different from <p>\<strong\> but that it font-size: 15px; font-weight: 700;.

I haven’t checked widely if fonts offer weights beyond the most common 400 and 700 so I don’t know. Checking Roboto as offered by Google, which is one of the font alternatives for the Nextcloud text editor at the moment, it supports several other weights but 600 happens to be missing.

[susnux]

For the text editor, this point applies even less; text documents might well have several sections at the top level. Consider a protocol of a meeting – each agenda item would rightly have a first-level heading. The same applies to any topical text. Both these types of documents may have a title (stating the date of the meeting, or the topic of the text). But if there is a title, it does not necessarily follow that this title is the only first-level heading – often this does not fit well with the structure of the document.

Yes but especially also for text documents I almost never saw using more than 1 level 1 heading.
In your example of a protocol the sections would be only H2 and the title of the meeting would be h1.

[sebalis]

Yes but especially also for text documents I almost never saw using more than 1 level 1 heading. In your example of a protocol the sections would be only H2 and the title of the meeting would be h1.

Absolutely not. I already covered that in my previous comment.

A title does not have to be the only first-level heading – it could be one of several first-level sections, or the title might not be regarded part of the logical structure at all. There can be documents without an immediately apparent title too, and it should not be required to add an invented title for purely formal reasons.

Think of the way headings are numbered if numbering is used in a structured document. In many cases the scheme is not 1. Title, 1.1 First Main Section, 1.2 Second Main Section. The title has no number and the sections have 1., 2., 3. – meaning that the title is more of a boilerplate, not part of the logical structure.

[Aveyron-RetD]

Can i also add a suggestion?

The text part is not justified, which is less appealing visually. I understand it is not possible on markdown but could the .css be modified to the text part being justified.