What in my opionion is very important for headings too but often overlooked, is the line spacing/distance of the new heading to the previous paragraphs (above). In my opinion simply a bigger line height is no good solution as it affects both the upper and lower spacing equally and a heading should not be to disconnected from the paragraph below it, as it is literally the heading for that paragraph.
I solved it for our internal design with an additional “margin-top” of >2x the base font size, which looks quite good to my taste. The downside to this simple approach is, it also affects the heading if a heading is the very first thing on a page.
Heading-Test 1
In fact exactly in this forum the heading line spacing above and below an heading are very good combined with their bold style and font size for my taste. See how “Heading-Test 1” fits very good to this paragraph and “Heading-Test 2” has a good distance above it, as it is the heading for the next “thing”.
Heading-Test 2
Just looking at your 3 example pictures:
- Notion: not so good - look at “Headings” the normal paragraph below it and then “Level 2 Headings”: the heading feels like in between and disconnected from the text its the heading for
- relative distance above the heading: 2,18x of the distance below it
- Confluence: very good relative distance, but line height overall is quite high.
- relative distance above the heading: 3x of the distance below it
- Microsoft Loop: Its more compact overall but the relative distance above and below the heading still feels good.
- relative distance above the heading: 2,5x of the distance below it
When using margin-top and margin-bottom, the headings can get smaller overall and still easily pop into the eye. If possible it should be solved a bit more sophisticated, so that there is no margin-top if an heading is the very first thing on a page.
Extra note: (What is weird however on this forum is that the spacing before and after a bullet lists is the same, in my opinion that is an example where the spacing above and below should be the oposite to the headings. It should be small above and larger below.)