Simplify the font size control in the Typography panel

[jameskoster]

There are a number of problems here:

1. The most helpful label is hidden in a tooltip
2. The labels in the control feel arbitrary. Are they associated with units? Is "1" small or large?
3. After selecting an option, reseting to default is a convoluted and unintuitive process
4. It's not obvious how to set a custom value
5. Displaying the selected value next to the label doesn't feel conventional

A more traditional select dropdown control can solve all of these issues, and provide opportunity to contextualise theme-supplied values.

[javierarce]

This looks good, and I know this was a quick mockup but if we add an icon (and maybe we don't need them) they should look different.

I'm also wondering if we could indicate that one of the values is the default one without requiring the top option.

And maybe we should indicate dynamic values somehow. Here's the typography section of the theme.json for twentytwentytwo:

  "huge": "clamp(2.25rem, 4vw, 2.75rem)",
  "gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
  "colossal": "clamp(3.25rem, 8vw, 6.25rem)"

[beafialho]

I like how quick the current selection is, for the mere fact that you don't need to click to see a dropdown. But overall I find your solution much more complete and informational.

I'm also wondering if we could indicate that one of the values is the default one without requiring the top option.

I also agree with @javierarce, this could work.

[jameskoster]

All good points.

if we add an icon

The 'icon' was my attempt at providing a relative preview of the setting, similar to Figma's type styles. I agree we probably don't need it though.

I'm sure we can combine the default option, and probably list dynamic values too:

[javierarce]

Much better!

Regarding showing the literal dynamic operations, I just remembered this comment by Kjell on this issue:

We don't want to display these exact CSS calculations, since that'll be too complicated for the user. But we also shouldn't show a blank form field, since the user doesn't know that there's actually a value there. Is there something else we can display in cases like this?

I agree with the idea, and maybe we could simply say "Dynamic value" (or something similar) and then… show the exact calculation inside a tooltip?

[mikachan]

I agree that the font size controls should be simplified. I like the idea of using a dropdown like your example, especially as you can fit so much information in this way.

I also wanted to note there is a similar discussion about the font size labels over in this issue: #39643

[jameskoster]

Perhaps there are ways to simplify the dynamic values so that they're more human-readable? The tooltip idea feels a little bit cumbersome 🤔

[beafialho]

I think showing the actual sizes "14px, 16px" is much simpler and obvious for the regular user. It also adds more value than saying "Variable size".

I do like your option of showing dynamic values on hover with the black tooltip, but it might be too much info at the same time 😅

[jameskoster]

I suppose the issue is that if absolute values are displayed while dynamic ones hidden then folks won't understand why. So I think we need to display something.

Having the "Variable" label in lieu of an absolute value seems like a fair starting place, and perhaps it's enough. I don't know how useful it is to see the actual operation for the variable sizes. By that point the 'at a glance' scan-ability of the size label kind of evaporates :D

[Andrew-Starr]

Is there any reason why the options could not be displayed as the actual font size? Do not show either absolute or dynamic size values or even the word "Variable".

I think the average user won't understand "Variable" in this context. "How/when/why does the size vary?"

There is also the problem of information overload just for the sake of adding more information that is perhaps not necessarily needed.

[jameskoster]

Hmm, that does seem sensible.

Could the previews inherit the typeface too, and would the scale need to be relative to account for very large / small sizes? I suppose those are the main arguments against this, would a pseudo-preview be confusing?

[aristath]

It used to be a dropdown last year... and it used to show a preview of the font-sizes as well - just like in the mockups above. If I'm not mistaken, it still has that behavior if there are many (more than 6) available font-sizes to choose from

[javierarce]

Is there any reason why the options could not be displayed as the actual font size? Do not show either absolute or dynamic size values or even the word "Variable".

I think that the problem is that the dynamic sizes depend on a combination of the base font size and the viewport size. In some cases, there wouldn't be much difference between some previews, especially since the dropdown is narrow. In other cases, because of the dynamic nature of the calculations, the list wouldn't be ordered from small to big. And then there's the problem of rendering texts written in different languages in different sizes, which could break things or make the list difficult to scan.

[aristath]

There's also the issue of large font-sizes... I remember last year when it used to be that way, there was a serious issue with large/huge font-sizes in the default themes.

[jameskoster]

The previews would need to be dynamic themselves. But that also has issues – outliers can throw the whole scale off, to the point where the smallest previews are unreadable.

For now it would probably be best to concentrate on the biggest issues with the current control – the labels feel meaningless, and resetting to default / choosing a custom value is unintuitive. A dropdown is only one potential solution, perhaps there are others?

It's also worth thinking about other potential applications for this control; font-weight, line-height, letter-spacing, etc?

[pablohoneyhoney]

Some relevant context
#37038 (comment)

[mtias]

This seems to be going in full circles! Please, refer to #34345 which has a lot of context on the details of the control. "Default" has always been challenging because its value cannot be known for all contexts. It should be handled separately.

[jameskoster]

I'll close this can of worms :D

The tshirt sizes in #34345 (comment) seem worth exploring, assuming they make sense from an i18n perspective.

Setting defaults and custom values can be investigated in dedicated issues.