Heading h6 is looking bigger than the heading h5.

[NidhiDhandhukiya74]

Description

When you choose heading block and check it with h5 and h6 then h6 looks bigger than the h5.

Step-by-step reproduction instructions

1. Take Heading block.
2. Add some text.
3. check it the same text with the h5 and h6

Expected behavior

h6 had to be smaller than the h5.

Screenshots

Environment info

[troychaplin]

There seems to be some inconsistencies in heading sizes across the various themes. In some case h1 and 2 are x-large, 3 and 4 are large, and 5 is medium, 6 is small. In other cases 5 is med, 6 is small. And I think there are a couple more cases like this.

@juanfra @beafialho is there a conssitent pattern we want for headings? I can review and update those accordingly.

[beafialho]

@troychaplin I believe all style variations heading sizes have been reviewed, already. But just to double check, from which variation is the screenshot you shared in the issue?

[beafialho]

This is how it's looking and this is how it should look.

[troychaplin]

@beafialho That looks like the default style, I didn't create the issue originally. I did notice that there are some differences in the afternoon theme, the h5 is set to medium and it looks bigger than the h4

[juanfra]

@NidhiDhandhukiya74 thanks for creating the issue.

Can you please share which style variation you are seeing this in? I'm assuming it's the default, as it's a white background. But maybe you can share more information on what you are doing to see things like that. Can you also confirm you don't have any customization in place? I believe there's no style variation where the heading is pink.

Thanks.

[sabernhardt]

The screenshots below ~should~ have no customizations, and they are taken at a width of ~480 pixels.~ 1,200 pixels and cropped. (I created a new set of screenshots with a fresh installation of WordPress RC and TT5 trunk. I added links to each original 480px screenshot below the related embedded image.)

Default

H6 same size as H5, heavier weight, uppercase, wider letter spacing

Default style at 480px

Evening

H6 same size as H5, heavier weight, uppercase, wider letter spacing

Evening style at 480px

Noon

H6 smaller size than H5, heavier weight, uppercase, wider letter spacing

Noon style at 480px

Dusk

H6 smaller size than H5, heavier weight, uppercase, wider letter spacing

Dusk style at 480px

Afternoon

H6 smaller size than H5, same 400 weight, less letter spacing, no text-transform

Afternoon style at 480px

Twilight

H6 same size as H5, heavier weight, uppercase, wider letter spacing

Twilight style at 480px

Morning

H6 same size and weight as H5, uppercase, with normal letter spacing for both

Morning style at 480px

Sunrise

H6 same size as H5, lighter weight, uppercase, wider letter spacing

Sunrise style at 480px

Midnight

H6 same size and weight as H5, uppercase, wider letter spacing

Midnight style at 480px

[beafialho]

The sizes and appearance in the screenshots in the comments above are all intended, they use font size presets and Heading 6 has specific letter case occasionally.

The only thing I noticed was Afternoon's H5. It looks bigger because it has letter spacing 0,5px. That could be removed, since it creates an illusion that H5 is bigger than H4.

Everything else is looking as expected.

[troychaplin]

The sizes and appearance in the screenshots in the comments above are all intended, they use font size presets and Heading 6 has specific letter case occasionally.

The only thing I noticed was Afternoon's H5. It looks bigger because it has letter spacing 0,5px. That could be removed, since it creates an illusion that H5 is bigger than H4.

Everything else is looking as expected.

After looking through your screenshot I do see one of the inconsistencies relating to what I mentioned early. In each style the h4 is slightly larger than the h5, except in the afternoon styles. Once the letter spacing is fixed, both the h4 and h5 are the same size, which is inconsistent with every other style option.

That doesn't strike me as being intentional

[troychaplin]

@beafialho Wanted to provide more detail on what might be a needed change. In each theme style the headers get smaller as we go down the list, except for Noon and Afternoon (note: this screenshot of noon would include the letter spacing changes from #633)

In all the other styles this is the default size of each level of header:

• H1: var(--wp--preset--font-size--xx-large)
• H2: var(--wp--preset--font-size--x-large)
• H3: var(--wp--preset--font-size--large)
• H4: var(--wp--preset--font-size--medium)
• H5: var(--wp--preset--font-size--small)
• H6: var(--wp--preset--font-size--small)

In Noon both the H3 and H4 are set as large.

In Afternoon both the H4 and H5 are set as medium

Proposed change: make the H4 in Noon medium, and the H5 in afternoon small.