Allow themes to opt-in to font-smoothing via theme.json

[kjellr]

One reset-adjacent feature that many themes opt-into is font smoothing. Sure, they could do this with a couple lines of CSS, but I wonder if this is common enough that we should just allow it to be a single line in theme.json instead.

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

The past three default themes (Twenty Nineteen, Twenty Twenty, and Twenty Twenty-One) all opted into this via CSS, and I'd like to do it for Twenty Twenty-Two as well.

[sagarnasit]

Hi @kjellr

I use theme.json for almost all the themes I am currently working on. This looks like an excellent feature to add.

Let me know if I can take on adding this feature in the Gutenberg.

[kjellr]

Hey @sagarnasit — go for it! I think a PR would be worthwhile.

[sagarnasit]

Great! @kjellr

This feature would go in styles -> typography -> fontSmoothing in the theme.json file

{
	"version": 1,
	"style": {
		"typography": {
			"fontSmoothing": true,
			...
		}
	}
	...
}

I have a couple of questions in mind.

1. Adding the above style should work fine. Does it require adding settings as well for font-smoothing?

2. Does this feature require support for elements and block level styles too?

[kjellr]

Adding the above style should work fine. Does it require adding settings as well for font-smoothing?

I do not think we need any UI/settings for this.

Does this feature require support for elements and block level styles too?

I think just a global toggle would make sense for now.

[scruffian]

Looks like a good addition to me. I might even make it opt out...

[chthonic-ds]

Can this be kept as opt in, please? Those two lines of CSS are not supported for many users. For those it does affect, there's also the potential for a11y issues when applied to smaller text and/or text with a light font weight.

[sagarnasit]

@chthonic-ds Yes, this feature would be opt-out by default.

[bgardner]

Just throwing my two cents in:

1. I absolutely love the suggestion to add support for font-smoothing in theme.json. It’s something I use on practically every site I design.

2. I agree that it should not be turned on by default, for the reasons @chthonic-ds has said (among a few others, I am presuming.)

Given the simplicity of this PR/issue, I hope it finds its way into Gutenberg 11.9, and consequently 5.9. Huge win, IMO if it does.

[kjellr]

Closing as per the thoughts in #36092 (comment).

[SamuelMiller]

As a said note, there are critics of anti-aliasing font smoothing (-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;) who say that it actually degrades the clarity of fonts on computer screens, particularly the typical dark text on a light background. It switches rendering from subpixel-rendering to pixel level rendering:
https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
google/fonts#1170

The Twenty Twenty Two's CSS has antialiasing enabled. Perhaps this is a mistake.