4 ms·

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 wha

by nojs 3y ago

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 https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth 2. https://tailwindcss.com/docs/font-smoothing https://tailwindcss.com/docs/font-smoothing 3. https://www.refactoringui.com/ https://www.refactoringui.com/

chrismorgan 3y 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.
- nojs 3y 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 https://icomoon.io/news/grayscale-antialiasing
  - chrismorgan 3y 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/918991457532354560, https://twitter.com/pcwalton/status/918593367914803201 https://twitter.com/pcwalton/status/918593367914803201.

by nojs 3y ago

chrismorgan 3y 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.

nojs 3y 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 https://icomoon.io/news/grayscale-antialiasing
- chrismorgan 3y 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/918991457532354560, https://twitter.com/pcwalton/status/918593367914803201 https://twitter.com/pcwalton/status/918593367914803201.