Heading font size "Default" does not match visual size in dropdown

[mapk]

Problem

The default font size doesn't match the size visually in the dropdown. Most other font sizes match visually. When I see the default size and go to click on a larger option in the dropdown, it actually renders as smaller to what the default was. Picking a larger option in the dropdown to see it rendered smaller is confusing.

Example of problem

Solution

The default font size should reflect the visual size as the other options do in the dropdown.

[hedgefield]

Agreed! What is the dropdown font size based on now, if not the actual font? I guess it doesn't take into account theme styles? I bet the ALL CAPS doesn't exactly help the size perception either. Anyway, seems like a win to fix this one. What do we need to solve this, code-wise?

[paaljoachim]

The following is a test in WordPress 5.7.
Theme: Twenty Twenty One
Activated plugins: Gutenberg 10.0.0 RC and the WordPress beta tester plugin.
Chrome
OSX 10.15.7

It looks like it has been improved.
Can you also take a look @hedgefield Tim?

[hedgefield]

Just looking at that gif I can see that in the dropdown extra small is bigger than default, and small is the same size as extra small. Large, extra large, huge and gigantic are also the same size. That's not right.

*I realized later the ticket is about default only, but feels weird to not scale the other options proportionally to the default.

[paaljoachim]

Perhaps @carolinan Carolina will have some thoughts on the themes Twenty Twenty and Twenty Twenty One in regards to font selector previews in the backend.

[carolinan]

I don't think I understand the problem, perhaps someone can try to explain it in different words?, or someone who worked on the updated size control can reply.

large ... actually renders as smaller to what the default was

I don't find it strange that a headings default size is larger than "large".
These are set pixel sizes, the large for a heading is not larger than large for a paragraph.

I also see that the controls are different in the two gifs?

[hedgefield]

What we mean is that the text in the font size dropdown is not the same size as the font size shown in the editor on the left. Default kinda matches, but then the small option has a bigger font size in the dropdown than default does. How can a user judge which font size they want to pick if the options don't look the same as the result?

[carolinan]

The font sizes in the drop down used to match the number of pixels that were assigned to that font size.
But this broke the drop down because a size of 140px doesn't fit.

So if I understand correctly now, it would be better if all the text in the drop down is displayed with the same size.

[CandaceJohnsonDesigns]

I do agree that the default should also reflect its scale in comparison to the other font size options. However, the default size option is generated by not adding a "has-{font-size-slug}-font-size" class to the block. Because the theme determines the default size for the block, typically in CSS, we cannot access this size to imitate it in the select menu.

On top of that, as @carolinan mentioned, if the font size is larger than the max font size display (currently set to 25px in Wordpress 5.8) it gets capped and can no longer be compared visually to other font sizes that have been capped. As that max font size is not that large, most of them are displayed as 25px. This completely defeats the purpose of this feature.

I propose that scale comparison be removed from the select menu and all font sizes display the same and instead add a feature that will temporarily add the class to the block while hovering over the font size option in the select menu. This allows the user to visualize it without needing to select each and every option.

In that same note, I also propose removing "Custom" as an option and only displaying it if a custom value is set in the "Custom" input. Currently, if you select the "Custom" option and the input for "Custom" is empty, it changes the selection to "Default" and appears to do nothing. That can potentially create frustration for users.

[CandaceJohnsonDesigns]

After more thought, adding a class on "hover" would restrict the devices to only those who handle pointer events (ie not mobile). This may not be a big deal, but with over half of internet usage being on mobile devices, who knows...

I still think that scale comparison should be removed if it is not consistent with the theme design. Some themes change type scale for responsive design as well and font sizes are not reflective of responsive design at this point. For example, the designer sets the initial font size presets for mobile and in CSS, updates the CSS variable presets values for different breakpoints.

Also, the font family affects how the type displays and it does not mimic the font family used on the blocks; it is the standard Wordpress UI font-family. I know that font-families are a WIP though so maybe one day...

Thoughts?

[ntsekouras]

I'm closing this as with the updated Font Size picker we show all the available options with the same size.