twentytwentythree icon indicating copy to clipboard operation
twentytwentythree copied to clipboard

style.css and functions.php are only required to handle font-smoothing

Open mikachan opened this issue 3 years ago • 3 comments

Currently, the style.css and functions.php files are only required to add the following CSS:

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

I don't believe we'll need to add any other CSS, so it's a shame to include these files just to handle font-smoothing. Unfortunately, the current system font we're using looks significantly worse without the above CSS.

A solution could be to choose a different default font, but that may require bundling more font files.

Another idea could be to add a theme.json setting that opts-in to font-smoothing, however this has been discussed previously: https://github.com/WordPress/gutenberg/issues/35934

Would love to hear any more ideas.

mikachan avatar Aug 10 '22 14:08 mikachan

I use font-smoothing on every theme/site I design—and that is many of them. I was bummed to see the initial issue closed because I think the move to css-less building is a good one. And I feel you @mikachan, loading a style sheet just for font-smoothing is hard to digest, but given my love for font-smoothing, is something I could get behind.

bgardner avatar Aug 10 '22 14:08 bgardner

Better to load the CSS than choose an alternative font. Otherwise other fonts added by variations would have the same limitation.

To that end one of the comments against:

We use theme.json for two things, essentially:

  • to be able to easily access CSS values for displaying them in the matching UI controls
  • to coordinate values that come from different sources (core, theme, user) so we only enqueue one of them

It looks like this property doesn't check any of the boxes.

doesn't seem to fit the bill any more. A variation or child theme may want a different font-smoothing configuration based on font sizes chosen or typefaces provided. This seems to make it a good reason to provide the option in theme.json.

For example, if a variation leverages "8-bit style fonts" or something that doesn't render well with smoothing there's no option to disable it.

I think it makes sense to revisit 36092 again.

pbking avatar Aug 10 '22 15:08 pbking

Agreed. Something like settings.typography.fontSmoothing to true.

richtabor avatar Aug 10 '22 16:08 richtabor

Here are two good articles about the problems with font smoothing: https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ https://ui.dev/rwd/articles/font-smoothing

IMO we should remove this CSS, it's unhelpful and all other themes will follow it.

scruffian avatar Sep 09 '22 08:09 scruffian