Use a better scale in headings typhography

[lud]

Hello,

Sometimes I find that document structure is hard to read, especially in markdown guides. Here is an example:

---

---

• Plug integration is an H2
• Plug options is an H3
• Using a module is an H4

To me there is too little difference between H2 and H3 levels, which make section look like they are unrelated. Fortunately the different whitespace margin helps.

Also, the H4 level feels way too small, I feel like it should be at least as high as the copy font. (In my opinion H6 should be paragraph size and other headings larger).

What do you think about this?

Thank you :)

[DavidOliver]

Agreed. I'll look to better differentiate the levels of heading.

[lud]

I don't know if you are familiar with typography scales. It can help to quickly chose sizes that fit together.

[DavidOliver]

I'm aware of the concept but hadn't come across that particular tool, which looks great. Thanks.

If heading levels 1-6 all need to be appreciably distinct from their nearest neighbours, it can be hard to depend on size alone without level 1 being awkwardly large in the context of documentation pages, so I expect I'll also be experimenting with devices such as horizontal rules.

[josevalim]

In our case, I think we can adjust the sizes assuming folks will use h1 to h4. H5/H6 is rarely used and we can use font weight or similar for those.

[lud]

The Major Third scale is not too big on H1 but yes, H5 could be just bold and h6 normal with a margin top.