-
Notifications
You must be signed in to change notification settings - Fork 111
Add font size presets #36
Comments
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. |
A tiny typo in your table: Extra-Small 14px. When it comes to paragraphs, we should also focus on the line-height. |
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: @carolinan please test it and let me know what you think. |
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. |
I have copied the font sizes and some other typography styles into a PR: #93 |
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:
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
The text was updated successfully, but these errors were encountered: