Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Heading h6 is looking bigger than the heading h5. #629

Open
NidhiDhandhukiya74 opened this issue Oct 23, 2024 · 8 comments · May be fixed by #633
Open

Heading h6 is looking bigger than the heading h5. #629

NidhiDhandhukiya74 opened this issue Oct 23, 2024 · 8 comments · May be fixed by #633
Assignees
Labels
[Type] Bug An existing feature does not function as intended.

Comments

@NidhiDhandhukiya74
Copy link

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

Image

Environment info

@NidhiDhandhukiya74 NidhiDhandhukiya74 added the [Type] Bug An existing feature does not function as intended. label Oct 23, 2024
@troychaplin
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Contributor

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

Image

@troychaplin
Copy link
Contributor

@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

Image

@juanfra
Copy link
Member

juanfra commented Oct 24, 2024

@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
Copy link

sabernhardt commented Oct 24, 2024

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 headings at 1,200 pixels wide

Default style at 480px

Evening

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

Evening headings at 1,200 pixels wide

Evening style at 480px

Noon

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

Noon headings at 1,200 pixels wide

Noon style at 480px

Dusk

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

Dusk headings at 1,200 pixels wide

Dusk style at 480px

Afternoon

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

Afternoon headings at 1,200 pixels wide

Afternoon style at 480px

Twilight

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

Twilight headings at 1,200 pixels wide

Twilight style at 480px

Morning

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

Morning headings at 1,200 pixels wide

Morning style at 480px

Sunrise

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

Sunrise headings at 1,200 pixels wide

Sunrise style at 480px

Midnight

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

Midnight headings at 1,200 pixels wide

Midnight style at 480px

@beafialho
Copy link
Contributor

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
Copy link
Contributor

troychaplin commented Oct 25, 2024

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

Image

@troychaplin troychaplin self-assigned this Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants