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

Theme Directory Redesign: H1 size is very small #49

Closed
mathetos opened this issue May 2, 2024 · 2 comments
Closed

Theme Directory Redesign: H1 size is very small #49

mathetos opened this issue May 2, 2024 · 2 comments
Labels
[Component] Theme Templates, patterns, CSS

Comments

@mathetos
Copy link

mathetos commented May 2, 2024

Describe the bug
The H1 for the new Theme Directory feels very small.

The size is currently set at as var(--wp--preset--font-size--heading-5) which is the second smallest heading size in terms of the variables in the stylesheet
image

Suggested Change
It seems the H1 should be var(--wp--preset--font-size--heading-1), but that feels a bit large.

I'm suggesting to use var(--wp--preset--font-size--heading-2) instead of var(--wp--preset--font-size--heading-5)

Here's what that looks like:
image

Additional context
It kind of begs the question of why the variables for font-size are set the way they are if they aren't sufficient for the actual H1 on the screen.

@ryelle
Copy link
Collaborator

ryelle commented May 2, 2024

Hello, thanks for checking out the theme preview! This hasn't gone through any design review process yet, so these font sizes are pretty much placeholder at the moment. I've already heard from @WordPress/meta-design that they plan to do a typography review, so maybe we can use this issue to discuss the typography on the Theme Directory holistically.

It kind of begs the question of why the variables for font-size are set the way they are if they aren't sufficient for the actual H1 on the screen.

This type scale is used across the entire WordPress.org network, and in some cases we do want the fonts to be this big (the homepage, About subpages, etc), and they're used as-is there. In other areas of the site, that size is too large, so we just scale it down. I probably went too far with heading-5 here, heading-3 would match the current font-size of 36px.

@jasmussen
Copy link

Good issue, reasonable. The context for the current heading size is this exploration:

Screenshot 2024-05-03 at 09 07 22

36px feels like a good size for this heading. The thing to also be mindful of is to be responsible with the density and whitespace, so it doesn't push good content too far down. To that end, 36 is probably a good place to start, and then we can go from there.

@ryelle ryelle added [Component] Theme Templates, patterns, CSS and removed [Status] Needs Design Feedback labels May 3, 2024
@ryelle ryelle closed this as completed in 3ad207b May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Theme Templates, patterns, CSS
Projects
Status: Done
Development

No branches or pull requests

3 participants