fontSizes labels in editor #39643

ooksanen · 2022-03-22T14:44:34Z

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 · 2022-03-24T15:29:32Z

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 · 2022-03-30T15:27:20Z

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

aristath · 2022-04-01T08:17:12Z

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 · 2022-04-01T08:19:32Z

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 · 2022-04-13T12:49:18Z

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 · 2022-05-09T14:59:28Z

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 · 2022-05-09T16:15:32Z

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 · 2022-05-09T18:36:52Z

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 · 2022-05-11T10:41:58Z

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 · 2022-05-11T15:11:47Z

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 · 2022-05-12T17:03:59Z

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 · 2022-05-12T17:28:59Z

@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 · 2023-02-17T11:46:07Z

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 · 2023-04-07T08:29:38Z

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

PaulGalinsky · 2023-08-04T20:30:20Z

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 · 2024-01-12T16:16:53Z

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 · 2024-01-25T20:17:15Z

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 · 2024-05-28T15:39:52Z

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 · 2024-06-20T15:22:37Z

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 :/

paaljoachim added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Mar 30, 2022

mikachan mentioned this issue May 11, 2022

Simplify the font size control in the Typography panel #41000

Closed

jordesign added the [Type] Enhancement A suggestion for improvement. label Sep 14, 2023

jhallbachner mentioned this issue Oct 15, 2024

Font size abbreviations in FontSizePicker are misleading when the theme declares multiple "small" sizes. #44245

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fontSizes labels in editor #39643

fontSizes labels in editor #39643

ooksanen commented Mar 22, 2022 •

edited

Loading

Jugibur commented Mar 24, 2022

paaljoachim commented Mar 30, 2022

aristath commented Apr 1, 2022

ooksanen commented Apr 1, 2022 •

edited

Loading

ooksanen commented Apr 13, 2022

ntsekouras commented May 9, 2022

ooksanen commented May 9, 2022

paaljoachim commented May 9, 2022 •

edited

Loading

ntsekouras commented May 11, 2022

jorgefilipecosta commented May 11, 2022

ooksanen commented May 12, 2022

ooksanen commented May 12, 2022 •

edited

Loading

wwdes commented Feb 17, 2023

zkingdesign commented Apr 7, 2023 •

edited

Loading

PaulGalinsky commented Aug 4, 2023

amooreTO commented Jan 12, 2024 •

edited

Loading

tatof commented Jan 25, 2024 •

edited

Loading

matthewfarlymn commented May 28, 2024

vyskoczilova commented Jun 20, 2024

fontSizes labels in editor #39643

fontSizes labels in editor #39643

Comments

ooksanen commented Mar 22, 2022 • edited Loading

Jugibur commented Mar 24, 2022

paaljoachim commented Mar 30, 2022

aristath commented Apr 1, 2022

ooksanen commented Apr 1, 2022 • edited Loading

ooksanen commented Apr 13, 2022

ntsekouras commented May 9, 2022

ooksanen commented May 9, 2022

paaljoachim commented May 9, 2022 • edited Loading

ntsekouras commented May 11, 2022

jorgefilipecosta commented May 11, 2022

ooksanen commented May 12, 2022

ooksanen commented May 12, 2022 • edited Loading

wwdes commented Feb 17, 2023

zkingdesign commented Apr 7, 2023 • edited Loading

PaulGalinsky commented Aug 4, 2023

amooreTO commented Jan 12, 2024 • edited Loading

tatof commented Jan 25, 2024 • edited Loading

matthewfarlymn commented May 28, 2024

vyskoczilova commented Jun 20, 2024

ooksanen commented Mar 22, 2022 •

edited

Loading

ooksanen commented Apr 1, 2022 •

edited

Loading

paaljoachim commented May 9, 2022 •

edited

Loading

ooksanen commented May 12, 2022 •

edited

Loading

zkingdesign commented Apr 7, 2023 •

edited

Loading

amooreTO commented Jan 12, 2024 •

edited

Loading

tatof commented Jan 25, 2024 •

edited

Loading