Font size: design updates

[kellychoffman]

Design updates needed for 5.9

• Add tooltips that show “medium”, “small”, etc. to the font size segmented control.
• Scrolling issues with appearance dropdown (report). (discussion/PR)

Design updates proposed for 5.9

• There are only 5-6 font sizes but the styles sidebar still shows a big dropdown. Make sure Twenty twenty two theme uses the segmented control for font sizes.
  • Any complex CSS values currently force a dropdown
  • Non-integer values are now considered simple values as per #36636
• “Custom” should not be an option in the dropdown given there is a specific button for showing the custom size controls.
  • "Custom" might actually be required
• “Default” should not be an option. Unsetting styles should be done with the reset button.
  • "Default" might actually be required

[javierarce]

If I'm not mistaken, we are not showing the segmented controls because of two problems related to the theme.json:

• We have a couple of items that use CSS properties to calculate their values (Large & Huge)
• We have a couple of items that contain a dot inside the size (Normal & Medium)

  {
    "name": "Small",
    "size": "1rem",
    "slug": "small"
  },
  {
    "name": "Normal",
    "size": "1.125rem",
    "slug": "normal"
  },
  {
    "name": "Medium",
    "size": "1.75rem",
    "slug": "medium"
  },
  {
    "name": "Large",
    "size": "clamp(1.75rem, 3vw, 2.25rem)",
    "slug": "large"
  },
  {
    "name": "Huge",
    "size": "clamp(2.5rem, 4vw, 3rem)",
    "slug": "huge"
  }
]

The first problem will require some design changes to show that those two values contain custom values. The second one could be fixed in code.

I'll provide a design slightly based on my proposed solution for this issue

[javierarce]

Here's a couple of ideas:

The first one is more complicated technically (and maybe impossible to do). It would require calculating a value (in the case of a clamp function, the lower limit) and showing it with an asterisk to indicate that it's a special kind of number (= dynamically calculated).

The second idea is easier to implement: we simply show the initial letter of the name. In case two labels start with the same name, we could append a number (L1, L2).

Related PR | Figma file

[kellychoffman]

Nice!

Some feedback:

If we can do the first version, I would remove the *. Even though it's dynamically generated, I'm not sure its imperative the user knows that. Unless I am missing something.

For the second version, I think mixing numbers in with letters in the same UI is a bit too confusing. I would do one or the other. Something along the lines of:

[ndiego]

@kellychoffman for the font size hints with decimal points, I already have a PR ready for that, just needs final approval: #36420 Obviously a more technical solution for calculating values that include var, clamp etc is needed down the line.

[Mamaduka]

@javierarce, I'm moving this issue back to the To-do column. The "Needs Review" is mainly for PRs.

[javierarce]

@javierarce, I'm moving this issue back to the To-do column. The "Needs Review" is mainly for PRs.

Oh, thanks @Mamaduka, I didn't know that! 😓

---

Even though it's dynamically generated, I'm not sure it's imperative the user knows that. Unless I am missing something.

The only problem I see with that approach (showing a number that was dynamically calculated without any indication of its nature) is that a user could select 48, visit the site and see a totally different size. Also, the result of calculating the dynamic value could be smaller or equal to any of the fixed values. So that's why I think it's important to indicate when those values are calculated.

For the second version, I think mixing numbers in with letters in the same UI is a bit too confusing.

True. The all-initials approach makes more sense to me, although I would still indicate that L & H are dynamic on the hint label.

I guess that the logic for the segment control would then be this one:

• If all the values are fixed, show numbers.
• If any of the values are dynamic, show initials.

Also, maybe the theme.json file could also have a property to force the second mode.

[ntsekouras]

There are only 5-6 font sizes but the styles sidebar still shows a big dropdown. Make sure Twenty twenty two theme uses the segmented control for font sizes.

This cannot be done, because now we don't have a way of calculating dynamic values (css vars, clump, etc...). So if we have at least one such value we show the select control. The current check for displaying the segmented control is if we have less than five options and if all of them are simple css values(no dynamic calculation).

The proper solution is to calculate the dynamic values which is not really simple. @jorgefilipecosta I think had some PR about this..

An alternative would be to show a segmented control with labels, but this will need to take into account other things, because these labels could be too big and make the control incomprehensible, as we have limited space in

“Default” should not be an option. Unsetting styles should be done with the reset button.

“Custom” should not be an option in the dropdown given there is a specific button for showing the custom size controls.

Both these values (default, custom) exist because for both cases if we switch back to the select control, we should have an available option in the select control. For example if we unset through the reset button, what will be shown? Then if we have a custom value and toggle to maybe select something else from the available font sizes, something should be shown there as well.