Add support for line height in settings.typography.fontSizes

[richtabor]

I would expect to be able to assign an appropriate line height value to text that is using a font size preset. This way I can style text using presets entirely, instead of having to rely on also adding line-height to every instance of text using a preset size.

I can assign font size presets and specific line heights to headings within theme.json, which works fine when using headings. But when I assign a font size preset to any other text, the body line height is the only value that is used.

Why

Take a look at the visual below, where I have a paragraph and a H1 heading, both with the XXL font size preset applied (using Twenty Twenty-Four). The theme has applied a line height specific to the H1 in theme.json, so the block inherits the appropriate line height. I can't set a line height for XXL font size preset applied to the paragraph. Instead, I have to manually apply a line height via the typography controls and try to figure which value I need to use for consistency.

If we could assign line heights that are correlated to the presets, then the paragraph block would look as expected when the preset is applied. Also, patterns in the directory would be able to lean further into presets, rather than hard-coding line-height into the pattern, which will result in unexpected results as the forced line-height may not be readable, dependent on the font-size preset value.

Proposal

"settings": {
    "typography": {
        "fontSizes": [
            {
                "fluid": {
                    "min": "3rem",
                    "max": "4rem"
                },
                "lineHeight": "1.1",
                "name": "Large",
                "size": "4rem",
                "slug": "large"
            }
        ]
    }
}

Originally explored on https://github.com/WordPress/gutenberg/issues/27100#issuecomment-1278257784, but surfacing this as its own effort.

[dabowman]

I was thinking about this exact thing. I've gotten around it by using a responsive line height token that bases it off the em value of the element it's applied to. But that feels ... a little complex for most folks.

(If you're curious, this is the function I've been using for all my heading line heights line-height: clamp(1.1em, calc(1.25em + -0.4vw), 1.2em);.)

One thing I was thinking about that might be a bit different than what you had in mind but might solve some other issues I've been having with typography in general is to add a new type style support.

I basically just want Gutenberg to behave like design tools—you can define individual typography properties, but you can save combinations of them as styles to be applied at once. I've achieved this with block styles, but the UI isn't great and then it takes up your block style slot. A new support that lets users define combinations of existing supports like line height and type size and then save them as presets to be applied might solve this. Selecting a type style and applying it might just apply the combination of attributes you would have applied with the individual supports. You could then override them and tweak them if you like or disable all the other typography block supports for a more streamlined experience that would still respect the core attributes and supports if you wanted to turn that stuff on later or enable it for a sub-set of users. This probably needs to be it's own issue but I thought i'd mention it here to see if it might solve the problem you're experiencing with line height.

[webexpr-dhenriet]

I think we need to be able to declare lineHeight presets in the same way as fontSizes, so we can combine them. fontSizes presets are useful to type content other than headings with the same rendering without affecting SEO, but this is only possible with size. Today, if a paragraph has a fontSize of h3 preset, it's not possible to apply a responsive lineHeight (clamp) to it, but just a custom lineHeight 'style=""'. Or you can do it with css, but each paragraph with a fontSize preset will always have the same css line-height, so two parapgraphs with the same size can't have two different line-heights.

p.has-h4-font-size {
    line-height: calc(2px + 2ex + 1px);
}

Furthermore, the settings.typography.fluid parameter (true/false) seems to be applied only to font-size.

/* custom font-size/line-height with settings.typography.fluid.fontSize = true */
<p 
   class="has-text-align-left has-green-100-color has-text-color" 
   style="font-size:clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);line-height:1.5"
>
    Lorem
</p>

It would be nice to be able to choose which typography properties are affected by settings.typography.fluid.

Example: settings.typography.fluid.lineHeight : (true/false) settings.typography.fluid.fontSize: (true/false)

To be able to define lineHeight presets and as for settings.typography.fluid.fontSize, it would be nice to have something like this

"settings": {
    "typography": {
        "lineHeight": [
            {
                "name": "XL",
                "slug": "xl",
                "lineHeight": "clamp(1.2rem, 0.7600rem + 0.9178vw, 1.5rem)"
            }
        ]
    }
}

/* line-height and font-size presets */
<p class="has-xl-line-height has-h-4-font-size" >
    Lorem
</p>