Varia: Bold/non-bold option for heading works inconsistently

[iamtakashi]

In most of the Varia based themes, the font-weight option for heading doesn't work. (Except the themes that don't use bold weight for headings)

This is probably because bold is hardcoded as default in the theme. cc @allancole

[allancole]

This is a tricky one to solve because heading tags are set to bold in many browsers by default.

The “$heading--font-weight” variable in Varia is meant to give theme designers a way to globally change the weight of all headings (both inside and outside of Gutenberg). Since there’s no way to change the font weight of post-titles, widget-titles, and site-title, etc. we probably can’t simply change the variable to something like font-weight: 400; without drastically impacting the design.

Instead, it might make sense to add a new variable for headings that deals with <strong> inside of <h1> tags.

Something like this might do it:

$heading--font-weight: bold;
$heading--font-weight-strong: bolder;

[iamtakashi]

This is tricky. A heading that doesn't use the block isn't an issue, but for those in content, the option doesn't make any visual difference.

Instead, it might make sense to add a new variable for headings that deals with <strong> inside of <h1> tags.

That could work if the font has bolder weight, but if not, should we make it lighter? It feels counter-intuitive though.

This is probably something we should change in Varya. Since heading block won't default to bold, the default weight for heading should be 400 or the second boldest weight.

[iamtakashi]

Circling back to this issue as I've been having a hard time with not being able to use non-bold headings in block patterns.

I feel like themes should not force bold for the heading block as the block's default is non-bold. @kjellr What's your opinion this? Would this issue be addressed in Varya?

cc @ianstewart @alaczek

[kjellr]

I feel like themes should not force bold for the heading block as the block's default is non-bold. @kjellr What's your opinion this? Would this issue be addressed in Varya?

Using bold text for headings is a fairly common pattern (it's even the browser default), so I don't see us avoiding that in the future. The difficulty here is that we're currently unable to let Gutenberg know that we've used a bold weight, and so we can't activate the "Bold" setting for the block. Hopefully this is something that we'll be able to change when Global Styles comes along, but in the meantime, I think we're more or less stuck this way.

The only potential options I can see to get out of this would be:

1. Use @allancole's bolder suggestion above. This is what themes typically do in this situation. The issue is that oftentimes a bolder variant of the font is not available. It also wouldn't help you if you're trying to set a lighter weight.
2. Set the <strong> tags inside these headings to use a lighter weight. This allows you to use that lighter weight, but it's obviously the exact opposite of how folks would expect this to work. For what it's worth, Twenty Nineteen and Twenty Twenty do this: When you select "Bold", they swap the 700 weight for a 600 weight.

Neither one is a great solution.

[iamtakashi]

Thanks for your input, @kjellr. Much appreciated.

As you said, neither of these workarounds don't seem to make the option in the way the user expects :/

Using bold text for headings is a fairly common pattern (it's even the browser default), so I don't see us avoiding that in the future.

Yes, it is a common pattern, but I still feel that decision should be left to the user in the end, and a theme should avoid styling the block in the way that contradicts the block settings.

The difficulty here is that we're currently unable to let Gutenberg know that we've used a bold weight, and so we can't activate the "Bold" setting for the block

With this, I understand that we won't be able to fix this issue in the themes that have already launched, but it wouldn't be a blocker for new themes, would it? That's why I was hoping non-bold heading is the default in Varya and new themes going forward.

Hopefully this is something that we'll be able to change when Global Styles comes along

I hope so too. Otherwise, the users will be kept locked in with the weight while the tool provides them with flexibility. Also, it will save users from a rough transition with their old contents.

[ianstewart]

This was something I commented on in when I was experimenting with my own block-based theme and trying to resolve it at the theme level.

My thoughts at the time were something like:

1. "The theme needs to adapt to this. I'll use one font-weight for headings and another font weight for strong elements inside of headings. This reminds me of how I don't like themes that use text transform on headings. It takes away my ability to use the editor. Like, I'd think, now I can't make sentence or title case headings — great. Feels the same here where the theme is affecting my ability to use the editor. Like, oh I can make my heading bold but … it does nothing?"
2. "I don't like how this looks. My bold headings are now more like semi-bold. I wish this was something I could tell Gutenberg I want set as a default or something. And then that could just be a default somewhere. That'd be the best of both worlds?"

For the first thought, I agree with Takashi, I think. I think it'd be good to have styled going forward.

For the second … is there an issue yet for Gutenberg for this? We should make one!

[kjellr]

For the second … is there an issue yet for Gutenberg for this? We should make one!

I've added one here: WordPress/gutenberg#22641

[katiebethbrown]

User report here: 23863501-hc

[scruffian]

See also #2744

[MaggieCabrera]

Is this still happening?

[mrfoxtalbot]

Yes, this is still happening @MaggieCabrera, but it is a bit more complicated.

Varia itself DOES show different weights in the published post:

But the weights are actually reversed in the editor (the bold one looks in fact thinner than the regular one):

In the case of Maywood, the published post shows the same weight regardless of the setting added in the editor.

[tbob18]

Yes, this still happens. I added a simple override to the admin CSS.

.wp-block-heading {
font-weight: 400;
}
.wp-block-heading b, .wp-block-heading strong {
font-weight: 700;
}