Open NidhiDhandhukiya74 opened 3 days ago
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.
@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?
This is how it's looking and this is how it should look.
@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
@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.
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.)
H6 same size as H5, heavier weight, uppercase, wider letter spacing
H6 same size as H5, heavier weight, uppercase, wider letter spacing
H6 smaller size than H5, heavier weight, uppercase, wider letter spacing
H6 smaller size than H5, heavier weight, uppercase, wider letter spacing
H6 smaller size than H5, same 400
weight, less letter spacing, no text-transform
H6 same size as H5, heavier weight, uppercase, wider letter spacing
H6 same size and weight as H5, uppercase, with normal letter spacing for both
H6 same size as H5, lighter weight, uppercase, wider letter spacing
H6 same size and weight as H5, uppercase, wider letter spacing
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.
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
@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:
var(--wp--preset--font-size--xx-large)
var(--wp--preset--font-size--x-large)
var(--wp--preset--font-size--large)
var(--wp--preset--font-size--medium)
var(--wp--preset--font-size--small)
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.
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
Expected behavior
h6 had to be smaller than the h5.
Screenshots
Environment info