Material-ui: subpixel-antialiased for css baseline

[hc-codersatlas]

As per https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth:

subpixel-antialiased - On most non-retina displays, this will give the sharpest text.

Most desktop displays aren't retina. CSS Baseline should include a media query to use this instead of antialiased for better font smoothing.

[oliviertassinari]

@hc-codersatlas Interesting concern. What implementation do you have in mind?
It would be awesome to run a benchmark on what font smoothing the other website is using. It seems that the best strategy depends on the platform and the font used:

#facebook ._-kb.mac {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: subpixel-antialiased
}

Facebook

.J-M {
    -webkit-font-smoothing: antialiased;
    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
}

Gmail

[...] to continue

[hc-codersatlas]

I was more thinking of using a combination of screen size and pixel ratio in a media query, though not sure if it's that accurate on all devices. I'm sure mobile sets pixel ratios.

html { ... -webkit-font-smoothing: antialiased }
@media only screen and (min-width: 1200px) {...}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {...}

[eps1lon]

Most desktop displays aren't retina. CSS Baseline should include a media query to use this instead of antialiased for better font smoothing.

Sounds about right.

It doesn't state that antialiased will be better on retina (though it seems to imply it). We could switch to that smoothing.

According to css-tricks

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

should to the trick

[larsenwork]

I'd suggest either

1) not adding any custom font smoothing on CSS baseline as this depends very much on which font-family and font-weights you are using. It also depends on if you have predominantly white text and a dark background or the inverse.

2) Have it user tweakable/overwritable somehow.

So I'd remove https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js#L7-L8 completely or expose it in the CssBaseline or Theme API somehow...

An (old) post on the topic:
https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

[oliviertassinari]

@larsenwork 2. is already possible with the theme.overrides feature, same as https://material-ui.com/customization/typography/#self-hosted-fonts.
I recall a similar discussion regarding the letter spacing, maybe we could use something similar? We only set the font smoothing for Roboto?

https://github.com/mui-org/material-ui/blob/f2d74e9144ffec1ba6a098528573c7dfb3957b48/packages/material-ui/src/styles/createTypography.js#L54-L56

Related: https://github.com/twbs/bootstrap/pull/7253

Or what if we were only enabling it for MacOs?

[larsenwork]

@larsenwork 2. is already possible with the theme.overrides feature, same as https://material-ui.com/customization/typography/#self-hosted-fonts.

Ah, cool - didn't realise it was already possible.

I recall a similar discussion regarding the letter spacing, maybe we could use something similar? We only set the font smoothing for Roboto?

https://github.com/mui-org/material-ui/blob/f2d74e9144ffec1ba6a098528573c7dfb3957b48/packages/material-ui/src/styles/createTypography.js#L54-L56

Seems a bit "over engineered" to me.

Related: twbs/bootstrap#7253

Or what if we were only enabling it for MacOs?

Related discussion that somehow ends up with the project owner making the "wrong" conclusion in my opinion: https://github.com/material-components/material-components-web/issues/248

I just tested a couple of google products (docs and flight) that both use Roboto and none of them have any custom font smoothing applied but respect user and OS settings.
https://material.io/design/foundation-overview/ does though... 🤷‍♂

[oliviertassinari]

@larsenwork The fact that Gmail and Google font uses antialiased for the Roboto font is, from my perspective, a strong signal that we need to keep it, for Roboto.

I'm curious regarding the developers facing this problem, are you using a different font?

[larsenwork]

@larsenwork The fact that Gmail and Google font uses antialiased for the Roboto font is, from my perspective, a strong signal that we need to keep it, for Roboto.

ok 😃

Maybe the docs could be updated with instructions on how to disable it? So that this:

https://github.com/mui-org/material-ui/blob/c06a88d24235685dd769c1a3df82152ded17a6ca/docs/src/pages/components/css-baseline/css-baseline.md#L67

becomes:

- Custom font-smoothing is applied for better display of the Roboto font on macOS. You can customise/disable it with theme overrides.

[oliviertassinari]

Maybe the docs could be updated with instructions on how to disable it?

@larsenwork I love the idea, we had recently a thread on this matter. We mention this capability in https://material-ui.com/customization/typography/#self-hosted-fonts, but it's not obvious.

What about this diff?

diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md
index 286b8be42..d1031660d 100644
--- a/docs/src/pages/components/css-baseline/css-baseline.md
+++ b/docs/src/pages/components/css-baseline/css-baseline.md
@@ -65,3 +65,7 @@ You can learn more about the implications of changing the `<html>` default font
 - Set the `theme.typography.body2` style on the `<body>` element.
 - Set the font-weight to `theme.typography.fontWeightBold` for the `<b>` and `<strong>` elements.
 - Font antialiasing is enabled for better display of the Roboto font.
+
+## Customization
+
+Head to the [global customization](/customization/globals/#global-css) section of the documentation to change the output of these components.
\ No newline at end of file
diff --git a/docs/src/pages/customization/globals/globals.md b/docs/src/pages/customization/globals/globals.md
index 239adf67b..3799975ed 100644
--- a/docs/src/pages/customization/globals/globals.md
+++ b/docs/src/pages/customization/globals/globals.md
@@ -29,6 +29,32 @@ The list of these customization points for each component is documented under th
 For instance, you can have a look at the [Button](/api/button/#css).
 Alternatively, you can always have a look at the [implementation](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js).

+## Global CSS
+
+In the event you are using the [CssBasline](/components/css-baseline/) component to apply global resets, you can reuse the infrastructure to apply global styles. For instance:
+
+```jsx
+const theme = createMuiTheme({
+  overrides: {
+    MuiCssBaseline: {
+      '@global': {
+        html: {
+          WebkitFontSmoothing: 'auto',
+        },
+      },
+    },
+  },
+});
+
+// ...
+return (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+);
+```
+
 ## Default props

 You can change the default props of all the Material-UI components.

[larsenwork]

@oliviertassinari Even better 👏

One super pedantic thing: I'd call it Custom font-smoothing instead of Font antialiasing

You don't enable anti-aliasing when setting -webkit-font-smoothing: antialiased but rather set it to a specific type af anti-aliasing — pixel-based instead of subpixel-based.

-webkit-font-smoothing: auto defaults to subpixel-antialiased as per https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

[oliviertassinari]

Sounds great

[mattstobbs]

Is this still a change that is waiting to happen? If so, I'm happy to put up a PR for it

[oliviertassinari]

@mattstobbs Yes, I think that it's still relevant :)

[mattstobbs]

@oliviertassinari Just so I understand the change, should the CssBaseline component be updated? The discussion seems to conclude that the WebkitFontSmoothing property should be "antialiased" (which it already is), but the docs should be updated to make it more clear that this can be overridden?

[oliviertassinari]

@mattstobbs From what I remember, the conclusion was that Gmail uses the same strategy as Material-UI, so we can keep the current smoothing tradeoff, at least with the Roboto font. Then, we went to identify documentation gap opportunities.

Gmail is huge, and its first use case is reading content: https://www.similarweb.com/website/mail.google.com#overview. You can bet the people behind the product had a discussion about this problem, more than once. If they didn't, why should we?!

[mattstobbs]

@oliviertassinari Can't argue with that! I'll update the docs with what was suggested and put up a PR :)