Skip to content
This repository has been archived by the owner on Nov 18, 2024. It is now read-only.

Add font size presets #36

Closed
carolinan opened this issue Aug 16, 2024 · 5 comments · Fixed by #93
Closed

Add font size presets #36

carolinan opened this issue Aug 16, 2024 · 5 comments · Fixed by #93
Labels
[Status] Needs Design Feedback Needs general design feedback.

Comments

@carolinan
Copy link
Contributor

carolinan commented Aug 16, 2024

Figma link: https://www.figma.com/design/dzGCSntVch4EQdVERTqyVK/Twenty-Twenty-Five?node-id=3112-304&t=qC1CDiog2u4tpIsg-4

In the Figma file I am seeing the following sizes:

Headings Paragraphs
H1: 70px -
H2 48px -
H3 38px Extra large 38px
H4 28px Large 28px
H5 24px -
H6 22px Regular 22px
- Small 18px
- Extra Small 14px
- Tiny 12px

Which gives us 9 font sizes. My recommendation would be to:

  • Not use 12 and 14 because they are difficult to read (arguably, depending on the font family).

  • Use 24px for the H5 heading as a one-off size under styles > elements > heading similar to TT4:
    https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyfour/theme.json#L860

  • Possibly also use either 28px or 38px as a one-off size under styles > elements > heading.
    I do not know how widely used these sizes are in the design, but 70 and 48 are common.
    Having a gap from 22 to 48 is rather large, so my preference would be to remove 28px from the scale.

Small 18px
Regular 22px ( The default body text size.)
Large 28px or 38px
Extra large 48px
Extra Extra large 70px

@carolinan carolinan added the [Status] Needs Design Feedback Needs general design feedback. label Aug 16, 2024
@carolinan
Copy link
Contributor Author

carolinan commented Aug 17, 2024

Pinging @beafialho @jasmussen @richtabor for visibility.

Same as with the spacing: if you already know what the expected sizes are, including all fluid, min and max settings, please provide them.

@hanneslsm
Copy link

hanneslsm commented Aug 17, 2024

A tiny typo in your table: Extra-Small 14px.

When it comes to paragraphs, we should also focus on the line-height.
The current design is also not easily possible to develop because, If I'm not mistaken, it's not possible set line-heights for the paragraph presets: WordPress/gutenberg#56227

@beafialho
Copy link
Contributor

beafialho commented Aug 19, 2024

It is a little hard for me to establish min/max values without testing them in the editor, so I gave it a go in the editor itself and defined the fluid paragraph font sizes, heading font sizes, buttons, pull quotes, captions, etc. I did not set the spacing presets though. Here is the theme.json file:

theme.json.zip

@carolinan please test it and let me know what you think.

@beafialho
Copy link
Contributor

Also, in this theme.json file, text is using the Manrope Light weight. This is correct even though on Figma it is specified Regular. This discrepancy happens because I don't think the theme will use font smoothing, and without it, the Regular weight looks way too rough so I made that adjustment.

@carolinan
Copy link
Contributor Author

carolinan commented Aug 20, 2024

I have copied the font sizes and some other typography styles into a PR: #93
But I did not include things like the button block border radius.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
[Status] Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants