undefined | Better HN

0 pointsnojs2y ago0 comments

Ha, you're right about `font-smoothing` - it appears in the OP CSS like this but I guess they meant `font-smooth` [1] (which has a giant red warning akin to what you said).

> 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

2. https://tailwindcss.com/docs/font-smoothing

3. https://www.refactoringui.com/

0 comments

chrismorgan2y ago

Even font-smooth isn’t a thing, never was. It was part of a very early draft, and dropped, unimplemented, something like twenty years ago because people realised it was a bad idea and had no place in CSS.

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.

nojsOP2y ago

Here is a somewhat convincing argument why it can be considered a “fix” for MacOS [1]

I have found this to be true with some fonts - they’re excessively thick on MacOS with the default subpixel antialiasing.

1. https://icomoon.io/news/grayscale-antialiasing

chrismorgan2y ago

The biggest idiosyncrasy of Apple’s font rendering is what they horribly misname “font smoothing” in their UI, which is actually glyph dilation: by default, they make glyphs a little thicker than they were designed.¹ This is considered a feature of macOS. A frustrating feature that I wish didn’t exist (I strongly suspect it’s a contributing factor to many uses of font-weight 300 or less, which are inappropriately thin for body text on all other platforms), but a feature nonetheless.

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.

j / k navigate · click thread line to collapse

0 pointsnojs2y ago0 comments

Ha, you're right about `font-smoothing` - it appears in the OP CSS like this but I guess they meant `font-smooth` [1] (which has a giant red warning akin to what you said).

> As a generalisation, you should not do things like this, but leave it to the platform or the user to decide.

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

2. https://tailwindcss.com/docs/font-smoothing

3. https://www.refactoringui.com/

0 comments

chrismorgan2y ago

nojsOP2y ago

Here is a somewhat convincing argument why it can be considered a “fix” for MacOS [1]

I have found this to be true with some fonts - they’re excessively thick on MacOS with the default subpixel antialiasing.

1. https://icomoon.io/news/grayscale-antialiasing

chrismorgan2y ago

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.

—⁂—

¹ 0.3px at typical body text sizes: https://twitter.com/pcwalton/status/918991457532354560, https://twitter.com/pcwalton/status/918593367914803201.

j / k navigate · click thread line to collapse