I think I'm fine with the (pseudo)underline for h2, but the under/overlining of h5 makes it stand out more than h3-4.

It works for me, and the only page I know of with H5 and H6 headings is the Game Courier Developer's Guide, which I wrote anyway. If I'm to do away with the lines, I need an alternative that works as well, and I don't have one. I did try small-caps for H5 and small-caps plus italics for H6, but italicized small-caps differs from small-caps merely by being slanted. So, I chose not to do it that way.

Since you pointed out wikipedia's, note that h4-h6 are all the same, and h3 only differs from those in font-size.

Yes, I'm not a fan of how Wikipedia is styled. I borrowed one idea from Wikipedia, because it seems to work, but I don't like how some of their headings differ only by size. It makes it harder to tell what level something is.

I am trying out a set of headings styles that don't use any horizontal lines. Instead of making all the styles completely different, I am using sharp differences in size between headings using the same style. H5 has the same style as H3, and H6 the same as H4, but each is 0.55em smaller.

After looking at some pages, I decided that the pseudo horizontal rule works better for H2. It more clearly sends the message that this is a major section. Since Wikipedia does it, it should be familiar to people, and I don't think it would be considered an unprofessional look.

I switched back to using Noto Sans for headings on the main site, though I will use Courier Prime for headings in Game Courier for thematic reasons. I could not find any good substitute for Noto Sans among sans serif fonts. I wanted one that put bars on the capital I, and there were few of those. I tried out IBM Plex Sans, but it didn't look as good. I figured out how to keep letters in Noto Sans from touching the horizontal rule by using some bottom padding. Since I'm no longer using small-caps or underlining and overlining, H5 and H6 no longer look as bad as they used to when I was trying out Noto Sans. With these problems taken care of, I figured it was okay to go back to Noto Sans.

It's important to distinguish each heading level by a different visual style.

This is a hobbyist site, weird is a personal opinion, and there are only so many different ways of distinguishing six levels of headings by style.

Wavy underlines, which I already tried out, look much worse.

Fergus, I'm pretty surprised at what I'm reading.  You have suddenly decided, unilaterally, that six levels MUST be displayed so differently that it slaps you in the face.  And, if the double underline looks terrible, hey, at least they are not wavy?  Is that really your answer?

I think you would agree that I have complained about very, very little all these years, despite several large issues worthy of complaint.  I'd rather not go into enumeration, but I will if you doubt it.

The fact is 99% of the content on this site was not created by you.  You cannot just do whatever you want with it.  The huge, bold, double-underline type is categorically unacceptable to me.

You might want to read the later comments before replying to earlier comments that are no longer pertinent. If you still see the double underlines, you need to clear your cache.

After looking at some pages, I decided that the pseudo horizontal rule works better for H2. It more clearly sends the message that this is a major section. Since Wikipedia does it, it should be familiar to people, and I don't think it would be considered an unprofessional look.

OK, this is better. Not necessarily better than last week's styles, but at least not far worse. The typeface no longer sticks out as typewriter-like, which I think is a huge improvement. (It is true it was only used in headers, but visually the headers dominate the impression the page makes, because they have such large font sizes.)

Presented in the comment the full-width underlining struck me as a bit weird, but I must admit that in the typical article with an Introduction / Setup / Pieces / Rules / Notes section it works.

Having headers in italics still strikes me as odd, though. But having 6 header levels seems overly generous; I was nottt even aware that HTML supported h5 and h6, and I cannot imagine I would ever need more than 3. So I suppose there isn't any real downside to having some of the lower-level headers in an uncommon style; most people won't need them, and the few that do need more than 3 levels but less than 6 can skip the styles they don't like.

The h5 style makes the impression of being 'incomplete', because it doesn't have left and right vertical borders. Even then, it is still a very exotic header style. The typeface of h1-h4 'blends in' very well with the typeface of the main text, but h5 and h6 somehow don't.

There still is a lare size gap between h4 and the main text. I would expect there to exist headers that had nearly the same size as the main text, but distinguish themselves by being boldface.

The font that is now on HTML buttons still seems fixed space. I don' think that is a good idea; it makes the buttons unnecessarily wide.

The h5 style makes the impression of being 'incomplete', because it doesn't have left and right vertical borders.

It also doesn't have horizontal borders. If you are seeing it with any borders, you need to clear your cache.

The typeface of h1-h4 'blends in' very well with the typeface of the main text, but h5 and h6 somehow don't.

Also, those no longer use small-caps. Clear your cache to see how it currently looks.

You might want to read the later comments before replying to earlier comments that are no longer pertinent. If you still see the double underlines, you need to clear your cache.

You are correct - my appologies.  I'm travelling and on my father's computer, so I didn't want to clear cache, but I've opened a different browser so I can see how it looks now.  This is a definite improvement.  I think the H2 text size is very, very large.  I'd like to see that scaled down a bit, but things are looking better.  

You can press ctrl+f5 to clear cache for current page only

I think the H2 text size is very, very large. I'd like to see that scaled down a bit, but things are looking better.

Is that because you are used to it being smaller, or because there are specific pages on which the H2 heading is too long?

I looked into the default sizes of H1-H6, and I learned that by default, H4 is the same size as the body text, and H5 and H6 are even smaller. This doesn't make sense to me. Headings should always be larger than the body text. Additionally, higher level headings should be larger than lower level headings, and size differences between headings of the same style should be large enough to tell them apart. Bearing these considerations in mind results in the headings all being larger than they are by default. This doesn't leave a lot of room for adjusting the size of H2, which is already closer to the size of H3 than to the size of H1.

Additionally, text is appearing larger on Chrome than on Firefox. I normally develop on Firefox, but if you're using Chrome, you will see larger fonts than I normally do. When I inspect the page h1-h6-test.html, which has no CSS or styling, it gives me the same values for the font sizes even though it appears larger on Chrome. In inspecting, Xiangqi, I get the same values for the style elements, though I cannot get Firefox to give me the size in pixels. I need to look into why text is larger on Chrome and see if there is some way to standardize the size in different browsers on the same computer. You may inspect these pages yourself with Developer Tools on Chrome or Web Developer Tools on Firefox.

There are pages on which I plan to use a different style or a lower heading level. These would include link pages, Zillions pages, and Game Courier preset pages, which normally have fewer sections and less text than other pages. I'll work on that later.

I looked into the default sizes of H1-H6, and I learned that by default, H4 is the same size as the body text, and H5 and H6 are even smaller. This doesn't make sense to me. Headings should always be larger than the body text.

Someone might want to add paragraphs in a smaller-than-standard font. And these might need headers too.

Four header levels already seems quite generous to me.

Someone might want to add paragraphs in a smaller-than-standard font.

If you want small text, you can enclose your text in <small>small tags</small>.

But can you also do that with headers?

Instead of setting the body text at 18px, I have erased code for setting the size of the body text, so that it will now use the system default. On the Windows desktop, at least, this is typically 16px. I checked multiple devices, and on each one, it seemed to make the text smaller, though Android and iOS devices did not let me inspect the elements and determine the precise size.

One reason for making this change is that Literata, which is now the body font instead of Lora, has a clearer look at smaller sizes. Another is that it should make the display more responsive to particular devices. Instead of using a fixed size across all devices, it lets the device determine the size. Also, I had previously set the font-size for comments to 16px, and I haven't had trouble reading comments. However, comments will now display text at the same size as the main content instead of at a smaller size. So, comments should generally display at the same size as they used to. Finally, the font size will now better match whatever zoom level someone prefers to use his browser at.

Since the heading sizes are defined with the em unit, which is determined by the body font size, they adjust according to the body font size. So, with the body font a bit smaller on most devices, the headings will also be a bit smaller.

I have adjusted the em values for the headings so that specific integer pixel values will be used when the body font is 16px. These are 36px for H1, 32 for H2, 29 for H3, 26 for H4, 21 for H5, and 18 for H6. Instead of making the differences the same between each pair of neighboring headings, I used smaller differences where the style changed more, and I put a distance of .5em (8px) between distant headings using the same style.

I want to thank those who gave feedback. I was trying to solve specific problems, and feedback helped me learn that solutions I found acceptable were not acceptable to others, which prompted me to find other solutions that worked better.