Remove `font-smoothing: antialiased` from mdc-typography

CSS -webkit-font-smoothing:antialiased is set by mdc-typography class. I’m no graphics expert, but someone who sounds like one say this is a no no. Also, MDN says no no.

stop “fixing” WebKit font smoothing by disabling subpixel rendering. … for main portions of text where readability is paramount please leave the default setting alone and let the operating system handle the smoothing.

• Dmitry Fadeyev 2012

Do not use it on production sites facing the Web.

Webkit implements something similar with a different name: -webkit-font-smoothing and different values, however, just like font-smooth, this is non-standard and should not be used. font-smooth - MDN

[indrekpaas]

Following this discussion—and after some quick tests—I found defaulting font-smoothing on high-density screens to produce very balanced results. Evidently this targets only large-screen desktop users where type can indeed be made more legible.

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

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
}

[traviskaufman]

So what I’m seeing here is largely theoretical evidence suggesting that font-smoothing: antialiased should not be applied, and largely concrete evidence that shows that fonts show up better on devices when it is applied (at least for Roboto, which is what mdc-typography uses as its base font). Thus, I’m closing this issue and electing to keep the property, for now.

Regarding the stop “fixing” article: in a perfect world operating systems would be smart enough to determine whether or not a font should have subpixel antialiasing applied based on its heuristics, but based on visual evidence provided by @shyndman that doesn’t seem to be the case.

Regarding MDN’s warning, we use the vendor prefixes directly because of this. And furthermore, Mozilla is pretty aggressive when it says not to use things. It also says not to use KeyboardEvent.keyCode 😉 which - at least until all browsers support KeyboardEvent.key - is untenable.

I’m essentially coming at this from the same place as David Walsh:

“I don’t pretend to be a typography or design expert – I just know what looks good and what doesn’t”

To me, until I see some evidence that these font-smoothing applications make our components / typographic system look worse, I don’t see the value in removing it.

On a final note, if you use your own fonts and font-smoothing turns out to make it less legible, simply add an override via css:

<link rel="stylesheet" href="material-components-web.css">
<style>
  .mdc-typography {
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
  }
</style>