

Why using Fonts as Icons can prove tricky: Subpixel Aliasing and Webkit - destraynor
http://blog.woop.ie/post/18899095065/webkit-subpixel-aliasing-and-icon-fonts

======
dhotson
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
>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%.

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

------
tomkin
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
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.

