Add font size presets

[carolinan]

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]

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]

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: https://github.com/WordPress/gutenberg/issues/56227

[beafialho]

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]

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]

I have copied the font sizes and some other typography styles into a PR: https://github.com/WordPress/twentytwentyfive/pull/93 But I did not include things like the button block border radius.