3 ms·

Why using Fonts as Icons can prove tricky: Subpixel Aliasing and Webkit

42 points by destraynor 15y ago

masklinn 15y ago
Actual second part of the title: subpixel anti-aliasing and some webkits on some platforms depending on the underlying text renderer.
dhotson 15y ago
Icon designers have been saying this for years. For small icons, you really want to tune every pixel. Vector sounds great in theory (infinitely scalable!) but it just ends up being a blurry mess at small sizes.
mistercow 15y ago
>The above test is using Modern Pictograms and Safari. subpixel-antialiased is too blurry, antialiased is too thin. If anyone can find a goldilocks solution that would be great. Render the whole shebang twice (including the background), once with "subpixel-antialiased", and once with either "antialiased" or "none". The latter should be in a div in front of and aligned with the subpixel version, and with an `opacity` value of your choosing, probably somewhere around 80%. Edit: Maybe closer to 60%.
tomkin 15y ago
I am trying hard to see the point of this article. Is he suggesting that we stop using fonts as icons for buttons and menus? Or assuming that if we did use them, we wouldn't have the good sense to ensure they look essentially the same across the board? If your argument is "they don't look good at X size": don't use them at that size. And don't bother using sprites, either because the milage will vary greatly. If your argument is "they have a huge kb footprint": don't use web fonts that suck. For every negative (so far, just one or two) point against @font-face, I can find 2 or 3 positive, more important points. Creating time-wasting sprites with multiple colors and then a giant section in my stylesheet aligning all of these "icons" is bullshit compared to the simplicity of @font-face. If this anti-@font-face banter is by purists, you don't really understand what a purist is, or your definition is wildly obsolete.
- jakejake 15y ago
  I think he's just pointing out the fact that you get subtle variations at different sizes & with different CSS settings. I don't think he is saying not to use them. In most cases we just want the icons to look "good" and it doesn't matter if there's subtle differences in anti-aliasing. But other times a designer may want to be pixel-exact, in which case sprites still serve a purpose.

42 points by destraynor 15y ago

Actual second part of the title: subpixel anti-aliasing and some webkits on some platforms depending on the underlying text renderer.

dhotson 15y ago

Icon designers have been saying this for years. For small icons, you really want to tune every pixel. Vector sounds great in theory (infinitely scalable!) but it just ends up being a blurry mess at small sizes.

mistercow 15y ago

>The above test is using Modern Pictograms and Safari. subpixel-antialiased is too blurry, antialiased is too thin. If anyone can find a goldilocks solution that would be great. Render the whole shebang twice (including the background), once with "subpixel-antialiased", and once with either "antialiased" or "none". The latter should be in a div in front of and aligned with the subpixel version, and with an `opacity` value of your choosing, probably somewhere around 80%. Edit: Maybe closer to 60%.

tomkin 15y ago

I am trying hard to see the point of this article. Is he suggesting that we stop using fonts as icons for buttons and menus? Or assuming that if we did use them, we wouldn't have the good sense to ensure they look essentially the same across the board? If your argument is "they don't look good at X size": don't use them at that size. And don't bother using sprites, either because the milage will vary greatly. If your argument is "they have a huge kb footprint": don't use web fonts that suck. For every negative (so far, just one or two) point against @font-face, I can find 2 or 3 positive, more important points. Creating time-wasting sprites with multiple colors and then a giant section in my stylesheet aligning all of these "icons" is bullshit compared to the simplicity of @font-face. If this anti-@font-face banter is by purists, you don't really understand what a purist is, or your definition is wildly obsolete.

jakejake 15y ago
I think he's just pointing out the fact that you get subtle variations at different sizes & with different CSS settings. I don't think he is saying not to use them. In most cases we just want the icons to look "good" and it doesn't matter if there's subtle differences in anti-aliasing. But other times a designer may want to be pixel-exact, in which case sprites still serve a purpose.