The Immortal Jellyfish (2015)(amnh.org) |
The Immortal Jellyfish (2015)(amnh.org) |
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
① I believe this only affects macOS, and has no effect on any other platform.
② There’s no such property as font-smoothing. Only -webkit-font-smoothing and -moz-osx-font-smoothing, with their different values.
③ Attempting to control this is highly controversial. You may prefer it one way, but others may prefer it otherwise. See, for example, https://usabilitypost.com/2012/11/05/stop-fixing-font-smooth.... (Note that discussion of these things tends to be from 7–15 years ago. I have no idea what the present situation is; I know macOS largely eschews subpixel antialiasing these days, so maybe the effect of this property has changed now, or maybe it literally does nothing, I don’t use macOS.) As a generalisation, you should not do things like this, but leave it to the platform or the user to decide. Features like this don’t tend to end up part of the standardised web platform, because you normally shouldn’t be able to control them, and when people control them, they’re normally doing so in order to work around platform-specific issues, or just because they’re copying and pasting what someone else did without understanding.
> As a generalisation, you should not do things like this, but leave it to the platform or the user to decide.
Tailwind also does it (e.g. see the CSS behind this page [2]). Those guys wrote probably my all-time favourite resource on UI design [3], so I do put value on little tricks like this that they're using.
1. https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
As for Tailwind, speaking bluntly: Tailwind includes some terrible ideas. Just because it supports something, or even because they use it on their own page, doesn’t mean it’s good. (I mean really, just look at that “Applying conditionally” subsection! Changing antialiasing technique on hover or by media query? Have they completely taken leave of their senses!?) Some people like the font-smoothing change. Others loathe it. Overall, changing from normal behaviour is hazardous.
I have found this to be true with some fonts - they’re excessively thick on MacOS with the default subpixel antialiasing.
If the greyscale antialiasing in a browser doesn’t do that (I don’t know), honestly, that’s a bug, if it leads to it rendering things inconsistently with the rest of the platform.
I also strongly suspect that argument will be at least partially obsolete, as there were major changes the next year. Far too many people talking about these things cite articles from 2010–2017, even though the environmental conditions have changed radically since then, and they don’t tend to reexamine them and clarify if they’re still completely accurate.
—⁂—
¹ 0.3px at typical body text sizes: https://twitter.com/pcwalton/status/918991457532354560, https://twitter.com/pcwalton/status/918593367914803201.
How do you do that? That sounds cool! Make everything else #eee?