fontSizes labels in editor

[ooksanen]

At the moment editor shows fontSizes as a number without unit, so 24px = "24" and 1.5rem = "1.5", which can be quite unclear for users.

For example a scenario I have at the moment is that I have two custom font-sizes on top of the default value, 1.25rem. Small font-size, which is 1rem and large font-size which is 1.5rem so the user only sees 1 and 1.5 (unless I define a size "Default" as well) which might lead the user to think that the value "1" is the default size when in fact it's the small size. And even with a "default" size defined in theme.json, I think it's pretty unclear that in this situation the 1.25 is the default value. I believe a lot of users would still think 1 is the default, 1.25 is 25% larger etc. I know the options have a tooltip, but imho it's not clear enough for the end user.

For this reason I think the fontSizes should be presented by their Name such as "Large" / "Small", not the value without a unit. That way the selection value would be clear for a user who has no idea of ems, rems, etc. or what is the default font-size of the site. This would also make the select work better with responsive font-sizes, such as clamp(), which now just show 1, 2, 3 which tells the user nothing.

Also, I think that clicking the selected font size value should unselect the value and reset the font size to default value. At the moment there is no way that I could find except "Reset all" under the Typography [+] dropdown, to reset the font size back to default, which it is before making a selection.

[Jugibur]

Good point! Unselecting a font size would behave the same way as selecting a color – the "Reset all" menu item is a bit too hidden and cumbersome in my opinion. It would be ideal to name the font sizes themselves, e.g. according to T-shirt sizes (XS, SM, MD, LG, XL).

[paaljoachim]

I think that @ntsekouras and @aristath might have some more information about this issue.

[aristath]

How are you defining font-sizes in theme.json? Do you use a name for them? Or just use slug & size? If I'm not mistaken, if you add a name you should see the labels

{
    "name": "Large",
    "slug": "lg",
    "size": "1.125rem"
},

[ooksanen]

I do have names set for them

"fontSizes": [
    {
        "slug": "small",
        "size": "1rem",
        "name": "Small"
    },
    {
        "slug": "default",
        "size": "1.25rem",
        "name": "Default"
    },
    {
        "slug": "large",
        "size": "1.5rem",
        "name": "Large"
    }
]

but still only see 1, 1.25 and 1.5 for the above example.

[ooksanen]

Any further thoughts on this @aristath?

At the moment I'm working on a theme to which I've set the font-sizes like this:

"fontSizes": [
    {
        "name": "Small",
        "slug": "small",
        "size": "calc( var(--body-font-size) * 0.875 )"
    },
    {
        "name": "Default",
        "slug": "default",
        "size": "var(--body-font-size)"
    },
    {
        "name": "Large",
        "slug": "large",
        "size": "calc( var(--body-font-size) * 1.25 )"
    }
]

And the editor shows the options like this

So, yeah, it shows the selected name above the options and as a tooltip when user hovers over an option, but the actual values on the buttons themselves don't tell the user anything about the font size so they basically need to click or hover through different options to find the right one.

Also because there's no easy way to unselect an option, I also need to define a "Default" font size, which imho is a bit redundant and could be remedied with the suggestions in my original post.

[ntsekouras]

Thanks for the issue @ooksanen and sorry for being late to reply here.

So, yeah, it shows the selected name above the options and as a tooltip when user hovers over an option, but the actual values on the buttons themselves don't tell the user anything about the font size so they basically need to click or hover through different options to find the right one.

We show an incremental sequence of numbers as a label of the font size when we have at most five font sizes and at least one the them contains a complex css value(clamp, var, etc..). We do this because complex css values cannot be calculated properly and the incremental sequence of numbers as labels can help the user better mentally map the different available font sizes. That's your case above with calc( var(--body-font-size) * 1.25 ) etc..

Also because there's no easy way to unselect an option, I also need to define a "Default" font size, which imho is a bit redundant and could be remedied with the suggestions in my original post.

I'm not familiar with all the aspects of theme designing, but wouldn't a default always make sense? If not applied by the theme explicitly, wouldn't it take the browsers default font size if no css rule is applied?

[ooksanen]

No worries @ntsekouras, thanks for taking the time to reply!

We show an incremental sequence of numbers as a label of the font size when we have at most five font sizes and at least one the them contains a complex css value(clamp, var, etc..). We do this because complex css values cannot be calculated properly and the incremental sequence of numbers as labels can help the user better mentally map the different available font sizes. That's your case above with calc( var(--body-font-size) * 1.25 ) etc..

I completely get this and honestly it's not a huge issue for me, but I'm looking at this from the UX standpoint, specifically from the end user's perspective. The issue here, in my opinion, is that even if I define the font-sizes like this:

"fontSizes": [
    {
        "name": "Small",
        "slug": "small",
        "size": "1em"
    },
    {
        "name": "Default",
        "slug": "default",
        "size": "1.25em"
    },
    {
        "name": "Large",
        "slug": "large",
        "size": "1.5em"
    }
]

The end user, who might have no idea that em/rem etc type units even exist, only sees options 1, 1.25 and 1.5 and they have no way of telling which one is the "default" other than hovering over all options or clicking through them. Especially in this example where 1 is actually small, the user could easily interpret that as the "normal size". That's why I think it would make sense to show the labels/names like Small, Default and Large which would immediately be more clear to the end user than a unitless value.

A visual example:

vs

Which one would you say is easier for the user to understand?

I'm not familiar with all the aspects of theme designing, but wouldn't a default always make sense? If not applied by the theme explicitly, wouldn't it take the browsers default font size if no css rule is applied?

It might, or it might not. 😄 Overall I think this is a minor issue that can, like you said, be easily remedied by always defining the default size, but it's maybe just a bit inconsistent with how some other components work (for example Clear button for colours) and even with the default size defined the size selector doesn't indicate that it's selected by default (see the first screenshot above). It also adds an often unnecessary class has-font-size-default (or something like that) to the text element when selected. But, again, this is just a minor issue.

[paaljoachim]

I too find it confusing with font size numbers. + There is no easy way to go back to the default size.

I added this comment to the latest Full Site Editing program testing. https://make.wordpress.org/test/2022/04/28/fse-program-testing-call-14-rallying-recipe-reviewers/#comment-2473 Change the font size of the post title. Going to Typography I see Size Default. Then I can choose to select size 1, 2, 3 or 4. It would be more helpful if I knew which px size these would be (hover perhaps?). Currently it is not possible to deselect a size and go back to the default size. (There is an issue for it somewhere.) Which means I have to do an undo to go back to the default size if I do not like any of the sizes I can choose from.

I'll let @annezazu know about this issue.

[ntsekouras]

When I was talking about default I didn't have in mind to add it in the fontSizes like this:

{
    "name": "Default",
    "slug": "default",
    "size": "1.25em"
},

This can lead to confusion because you are using default as label, but is not taking the default value from theme.json and uses the specific value. Why do you need to have this there? In order for users to know what is the default?

I too find it confusing with font size numbers. + There is no easy way to go back to the default size.

You can do it through the tools panel. There are discussions in various places about the improvement/discoverability of this though..(like here)

--cc @jorgefilipecosta about the default settings in font sizes, if you have any input.

[jorgefilipecosta]

I think to address the problem of users not knowing the default one should set a font size with theme.json. If we have this:

styles {
    typography: {
        fontsize: var(--wp--preset--font-size--)
    }
}
...
"fontSizes": [
    {
        "name": "Small",
        "slug": "small",
        "size": "calc( var(--body-font-size) * 0.875 )"
    },
    {
        "name": "Medium",
        "slug": "medium",
        "size": "var(--body-font-size)"
    },
    {
        "name": "Large",
        "slug": "large",
        "size": "calc( var(--body-font-size) * 1.25 )"
    }
]

On the global styles, font size picker medium will appear as the selected font size, so users know that medium is the default.

[ooksanen]

When I was talking about default I didn't have in mind to add it in the fontSizes ... Why do you need to have this there? In order for users to know what is the default?

Was this a question about my use case @ntsekouras? If so, I added it because there was no clear way of resetting the font size after you had set it to something else than default. I've been using Gutenberg before it was included in the core and I only found out from your link that you can (/have to, since 5.9 I believe) reset font size like that, without having to click + and then Reset all, which I mentioned in my OP.

The user interface is imo really bad at the moment and I'm glad this is being discussed here and in other threads!

[ooksanen]

@jorgefilipecosta could you elaborate? I tried adding the typography settings to my theme.json as per your suggestion:

"styles": {
    "spacing": {
        "blockGap": "clamp(2rem, 5vw, 4rem)"
    },
    "typography": {
        "fontSize": "var(--wp--preset--font-size--medium)"
    }
},
...
{
    "name": "Medium",
    "slug": "medium",
    "size": "var(--body-font-size)"
},

(your code is missing something from the var name) but it doesn't seem to make any difference. Any text without an explicitly set font size, shows "Default" as size and none of the selectors are active. Tried with different variables, but none seemed to display the default/medium size as active unless selected by clicking.

[wwdes]

I've just stumbled across this. It seems there is no way to control what labels the size buttons get. Is this correct? Furthermore there is no way to specify a default size which will be controlled from the same panel? If that's the case then that is beyond weird!

[zkingdesign]

I have the same question as wwdes above. It would be really useful to know.

[PaulGalinsky]

Same issue as @wwdes and @zkingdesign - If you have five or fewer font sizes, the WordPress FontSizePicker component will default to the labels 'S / M / L / XL / XXL'.

There doesn't appear to be a way to change these labels, which can problematic, for example if your names begin XS rather than S, or you use numbers for names e.g. 10 / 30 / 50.

It would be useful to add a 'short-label' field to theme.json settings.typography.fontSizes, which would be used instead of the defaults by the FontSizePicker react component, when five or fewer font sizes are used.

[amooreTO]

In a theme I am building, I have two custom sizes I want editors to be able to select.

"fontSizes": [ { "slug": "small", "size": "16px", "name": "Small" }, { "slug": "large", "size": "20px", "name": "Large" } ]

However, the editor is displaying the wrong label for Large:

This is certainly confusing for authors. Adding a short-label field like @PaulGalinsky suggested would be a big help.

This seems like a bug instead of an enhancement.

[tatof]

Ugly but workable fix, load admin styles and target the "data-value". Hide the div and add the right label with ::after content

 // Font size fix [display text admin panel]
    .components-font-size-picker__controls{

        button[data-value="var(--ps-size)"], button[data-value="var(--pm-size)"], button[data-value="var(--pl-size)"],
        button[data-value="var(--pxl-size)"], button[data-value="var(--pxs-size)"],
        button[data-value="var(--hxxs-size)"], button[data-value="var(--hxs-size)"], button[data-value="var(--hs-size)"],
        button[data-value="var(--hm-size)"], button[data-value="var(--hl-size)"], button[data-value="var(--hxl-size)"],
        button[data-value="var(--hxxl-size)"]{
            div{display: none}
            &::after{display: block;}
        }

        button[data-value="var(--hxxs-size)"]::after{content:"XXS";}
        button[data-value="var(--hxs-size)"]::after{content:"XS";}
        button[data-value="var(--hs-size)"]::after{content:"S";}
        button[data-value="var(--hm-size)"]::after{content:"M";}
        button[data-value="var(--hl-size)"]::after{content:"L";}
        button[data-value="var(--hxl-size)"]::after{content:"XL";}
        button[data-value="var(--hxxl-size)"]::after{content:"XXL";}

        button[data-value="var(--pxs-size)"]::after{content:"XS";}
        button[data-value="var(--ps-size)"]::after{content:"S";}
        button[data-value="var(--pm-size)"]::after{content:"M";}
        button[data-value="var(--pl-size)"]::after{content:"L";}
        button[data-value="var(--pxl-size)"]::after{content:"XL";}
    }

theme.json file:

"blocks": {
            "core/heading": {
                "typography": {
                    "fontSizes": [
                        {
                            "slug": "hxs",
                            "size": "var(--hxs-size)",
                            "name": "Extra small"
                        },
                        {
                            "slug": "hs",
                            "size": "var(--hs-size)",
                            "name": "Small"
                        },
                        {
                            "slug": "hm",
                            "size": "var(--hm-size)",
                            "name": "Medium"
                        },
                        {
                            "slug": "hl",
                            "size": "var(--hl-size)",
                            "name": "Large"
                        },
                        {
                            "slug": "hxl",
                            "size": "var(--hxl-size)",
                            "name": "Extra large"
                        }
                    ]
                }
            },
            "core/paragraph": {
                "typography": {
                    "fontSizes": [
                        {
                            "slug": "ps",
                            "size": "var(--ps-size)",
                            "name": "Small"
                        },
                        {
                            "slug": "pm",
                            "size": "var(--pm-size)",
                            "name": "Medium"
                        },
                        {
                            "slug": "pl",
                            "size": "var(--pl-size)",
                            "name": "Large"
                        }
                    ]
                }
            }
        }

[matthewfarlymn]

Looking for an update on this as it is a poor user experience and should be pushed up on the roadmap for a fix.

[vyskoczilova]

Hi! I've just encountered this issue. My site has only three sizes (default, big, and "perex"), and sizes like this are very confusing. Why doesn't it just take the "name" I set or add a "display name" option? Before it worked just fine, when there was a dropdown :/