Fluid typography: UI controls to enable/disable fluid font sizes for custom values

[ramonjd]

Parent issue:

• Tracking: fluid typography  #44888

What problem does this address?

Fluid font sizes, when turned on, has global effect. That is, it will convert all preset and custom font sizes to clamp() value.

Editor users, therefore, have no control over when and where fluid font size is applied.

For theme.json presets, fluid font sizes can be turned on and off individually in theme.json.

It could be useful for have controls in the editor to choose whether custom font sizes are fluid or not.

What is your proposed solution?

Have a UI in the editor to control whether fluid font size is enabled.

We might like to start at the individual block level for custom font sizes.

It might be an on/off "toggle" for custom font sizes:

Further down the line we could investigate the possibility of allowing toggling in global styles (a universal switch), and/or elements and/or block global styles.

Furthermore, there are plans to allow configurable values in theme.json. We might like to allow such values to be edited in global styles as well.

[PH4NTOMiki]

That would be really great

[richtabor]

I was thinking about this while working on Twenty Twenty-Four. I think a better solution would be to not allow fluid font sizes to scale super tiny. For example, perhaps the min size it can scale down to is 12px (if the font size is above 12 of course).

This way we wouldn't need a toggle here.

[ramonjd]

Thanks for thinking about this @richtabor!

There's already a default, minimum limit of 14px, which can be overridden in theme.json:

2023-10-12.11.27.42.mp4

The idea here was to allow folks to turn fluid font sizing off for a text block. I'm not sure that's a useful feature though 😄

[richtabor]

Hm, I'm sure I had a small font size value that went lower than 14px. I need to look up what happened. I think it was with TT4.

[richtabor]

The idea here was to allow folks to turn fluid font sizing off for a text block. I'm not sure that's a useful feature though.

The general issue is that font sizes scale too small when they're a custom value in the editor (but perhaps that has been fixed?). I don't think it's necessary to have a separate control to otherwise turn off fluidity.

[ramonjd]

Hm, I'm sure I had a small font size value that went lower than 14px. I need to look up what happened. I think it was with TT4.

The only exception I'm aware of is when a preset font size defines its own minimum font size, e.g., 2px pixels. The code will honour that. Only where there's no user-defined min font size will the 14px kick in.

don't think it's necessary to have a separate control to otherwise turn off fluidity.

Yeah, the more I think about it the less convinced I am too. This issue has been open for a while with no real call for its implementation. I think I'll close for now and reopen as new ideas come in.

I appreciate the feedback! 🙇🏻

[ramonjd]

Oh wait, I can see in TT4 that it's not adhering to the min font size boundary 🤔

Interesting. Thanks, I'll look into it.

I take that back, I think I was hallucinating.

TT4 behaves as expected.

2023-10-13.14.49.50.mp4

[richtabor]

Good deal, thanks! I'll go ahead and close this for now.