Review: Header Options

This first set is H2 Headers:

Short Header Product Operating Model

This is the default setting for H2.

IMO this setting is too large in relation to the article body. I’d like to get a different default setting if we can.

Short Header Product Operating Model

This is H2 with the “L” size selected.

IMO, this setting is something that we might occasionally want to use, but it’s generally still too large in relation to the article body. (FYI, “M” setting is too small.)

Short Header Product Operating Model

This is the H2 Header with a custom 28 pixel font and with appearance set to “default.”

IMO this is the best font size for a header in relation to the font size in the article body. If we agree on this, I can see if our dev team can set this to the default size for an H2 header so that we don’t have to change the font setting when using this header.

I’ve applied this header setting to all headers in the sandbox version of the latest article. Let me know if you’d like this deployed in the “live” version.

Short Header Product Operating Model

This is the H2 header with 28 pixel font, bolded.

IMO bolded headers create a jarring contrast between the header and the article body. I prefer unbolded headers. There are variations of “bold” available in the appearance settings, but none of them seem right to me.

Short Header Product Operating Model

This is the H2 header with 26 pixel font and with appearance set to “default.”

IMO, this isn’t bad, but when I look at this in shorter header formats, it doesn’t differentiate itself from the article body enough and I’ve personally noticed that I seem to struggle to read headers at this setting (something a bit off in the way it’s displayed onscreen I think).

Longer Header Changing How You Decide What to Build Product Strategy

This is the H2 header at 28 pixel font with default appearance for a longer header.

When the header is longer, the wraparound text retains double spacing which looks bad on certain screen sizes. Headers will probably not be this long in most cases and this looks okay on mobile, but I’m going to request that we eliminate double spacing in headers while retaining spacing between the header and the body text. (I don’t see any way to do this in WP myself.)

This next one is an H4 header (H3 is similar in appearance to H2):

Longer Header Changing How You Decide What to Build – Product Strategy

This is the H4 header with 28 pixel font and with appearance set to “default.”

The primary difference in appearance is that the wraparound spacing is less noticeable. While this is better at certain screen sizes, we would potentially be losing SEO benefit by using H4 as our “go-to.” I’d like to see if we can fix the spacing in H2, H3, but we can use H4 if we have an extra long headers in the interim.

Note this reduces the space between the header and the paragraph body which I don’t think looks as good as the extra spacing when H2 and H3 are used. Extra space can be created with a “hard return” after the header.