Stephanie EcklesHere’s an appropriately spooky topic… 👻
Give me your hot takes (and evidence based ones too) for whether or not to apply antialiasing to fonts.
Go!
Tyler Sticka@5t3ph Do you mean via CSS using smoothing/rendering properties or just generally?
@tylersticka yes, via CSS
@5t3ph My problem with these props is that they may exaggerate the difference in rendering between platforms (Mac vs. Windows, for example).
I see a lot of teams reach for these to fine-tune font weight, which is no longer as necessary thanks to variable fonts.
A few years ago, a large company we worked with kept turning these props off and on again. I worked with one of the stakeholders to commission a new version of their typeface with better hinting instead.
Michelle Barker@5t3ph Depends on the font! Some light weight fonts are really hard to read with antialiasing on
Brian Levy@5t3ph Pixel fonts look terrible with antialiasing.
Noah Liebman@5t3ph the only time I’ve ever had to mess with it was for an inlined font. Smoothing was too aggressive on macOS on a not-hidpi/retina display such that you could barely see the inline. (It was a while ago, but at one point I played with a @-media(resolution) query but didn’t end up going that way.) https://www.whatfontis.com/CR_Ostrich-Proper-Inline-Open-otf-400.font
Otherwise, I’m with @[email protected] that the OS can and should handle it better than authors.
Mike Aparicio@5t3ph I find myself adding it often because designers and stakeholders will complain that the website doesn’t look like the Figma file and it’s not a hill I’m going to die on.
Roel Nieskens@5t3ph I find that `-webkit-font-smoothing: antialiased` helps render the glyph "as is". If your font has a units-per-em value of, say, 512, and you render it at 32px, that would give you 16upm per pixel. If your glyph contours land exactly on multiples of 16, they will fall on pixel boundaries and will be rendered sharp, without anti-aliasing (which you'd probably expect).
@5t3ph But without `-webkit-font-smoothing: antialiased`, the browser finds a need to anti-alias that edge, even though it originally is sharp. So you'll get a more fuzzy, bold look.
So I kinda prefer the letter shapes to be rendered as close as possible to what the font dictates. But I like browser defaults even more, so I don't use `-webkit-font-smoothing: antialiased` unless I want the glyphs to be pixel perfect (icons, or examples on specimen sites)
meduz'@5t3ph My rule is: test each font you use on any possible combination of browser engine [Chromium, Firefox, Webkit] × OS [macOS, Windows] × screen DPI (1x, 2x).
Reason: I remember some fonts looking crappy on a low DPI screen on Firefox Windows, but not on Firefox macOS. So I kept the habit of checking all these combinations. Adding Android/iOS to the mix is never required as far as I remember.
Vadim Makeev@5t3ph I have an impression that most people who add antialiasing to their code have no idea what they’re doing. When I ask why, they say something like “to make fonts look better” or “idk, I just copied it from my previous project”. And then they run away from me 🤨
Also, there’s no spec, which makes it even funnier.