
Pixel-fitting – how antialiasing can ruin your logos and icons - danielzarick
http://dcurt.is/pixel-fitting
======
danboarder
One problem with 'pixel-fitting' is that certain letterforms will appear
sharper or crisper than others. For example, in the article the PLUS (from
Hulu Plus), the PLU are sharper than the S because more of their outer
surfaces conform to square pixels, while the S has continuous curves that have
to alias all the way around. So you end up with some characters looking overly
crisp while the S looks soft. I prefer to not draw attention to specific
characters and have consistent aliasing across all the characters of a
logotype. Photoshop has several font rendering modes that let designers choose
how aliasing is rendered (Strong, Crisp, etc) to achieve a desirable result,
depending on the typeface and font size chosen.

------
dtf
This equivalent to TrueType hinting, right? It's funny that hinting went out
of fashion over the years, mainly due to a fairly sensible argument from Apple
that displays would get better - which they undoubtedly have if you look at an
iPad 3. Linux users, who had a choice, started switching from patent-
encumbered pixel-fitted full hinting to the softer anti-aliased look, perhaps
in part because many of their cool Apple owning friends told them that it
"looked right".

So in a way, because of all this history, the pixel-fitted logo actually looks
_too sharp_ , and hence a little uncool.

~~~
aardvark179
This sort of thing is a tough call. I'd say the pixel fitted logo looks better
if each is considered in isolation, but viewed as a set the anti-aliased ones
look better as they look more consistent.

Fonts have a similar issue. The TrueType font hinting made fonts more readable
but sacrificed correct horizontal spacing and often made them less
aesthetically pleasing IMO. If I were considering a font purely for on screen
work without scaling then I think a carefully designed and hinted font looks
best, but if there is going to be any scaling (through different font sizes or
zooming in or out) then I'll go with the Apple style every time.

~~~
wtallis
I've always felt that the strong hinting used by Windows optimizes for
individual glyph legibility by sacrificing kerning and overall readability.
I've found that I can't read a whole ebook on a Windows system, but on a Mac I
can tolerate it (if I use a large enough font size).

------
ChuckMcM
This reads exactly like Microsoft's ClearType patent where they shift the
'rendered' glyph around to maximize the number of 'whole pixels' it uses.
Sounds like 'pixel fitting' is the same process (albeit done manually it
seems).

Waaaay back when I was at USC the Image Processing Institute there here some
interesting image filter analysis of high frequency images. Basically when you
take a horizontal line, and plot it x/y with X being the horizontal position
and Y being the value of the pixel there, you can treat that as a signal and
measure the frequency of it. If you look at B&W text you will see a series of
very sharp transitions from background level to foreground level and back
again. These are square waves which have well defined harmonics. So taking the
image and increasing the rate of change between high to low or low to high
'sharpens' it, similarly if you are _rendering_ an image and you have choices
about the function which determines which pixel represents which part of the
rendered image, you can do several renders with pixel offsets and maximize
harmonics for maximum sharpness.

------
crazygringo
I actually find the "sharper" Hulu icon to look _worse_... because the curved
parts of the letters stay blurry, while the straight parst are razor-sharp.
The "L" and "S" look in the "pixel-fitted" version look totally different,
like they don't go together at all.

I don't mind the "extra blurriness" all over everything on my screen at all,
because the mind gets used to it quite quickly, and it actually allows for
_more_ detail, because our brain automatically interprets sub-pixel width
changes, curvatures, etc. This is why fonts on Macs look have more accuracy
and detail in their letterforms, because they aren't hinted, i.e. "pixel-
fitted".

~~~
huggyface
_I don't mind the "extra blurriness" all over everything on my screen at all_

Add that many of us roll at a zoom level != 100%, immediately undoing all of
this pixel-perfection work. Only when you're targeting the iOS devices do you
have any realistic control over pixel to pixel mapping.

~~~
valisystem
And retina has made pixel matching obsolete, the screen resolution is higher
than the eye.

------
jcampbell1
When using the vector tools in photoshop, it is important to make sure "snap
to pixels" is selected. It fixes this issue when creating things like boxes
and buttons.

~~~
pbhjpbhj
In Inkscape I think you have to apply a pixel grid (which can be hidden) and
turn on grid snapping.

------
commieneko
As someone who has been creating digital graphics for broadcast for over 20
years, typically at resolutions that are far lower than anything we have to
deal with now, it's interesting to see all this activity lately on HN.

There are times and places where "hand fitting" your pixels is useful, but
they are few and far between. Good filtering will almost always get you a
better looking result. The constraints on old NTSC monitors are/were
horrendous, so you simply _have_ to filter things or you will end up with text
and designs that are not only "crunchy" looking, as my assistant used to say,
but with images that vibrate, strobe, comb, and burn. Burn like a soul in
hell.

The first thing to learn is almost never work with full on black or white. (Or
fully saturated color) In broadcast video there are _legal_ reasons for this.
But even there, you should always work at least 5% inside your "legal" gamut,
or color space. There's plenty of contrast in the remaining space, and it
gives you some "headroom" for your filtering to work.

For "white" I like to work down about 15%. The bottom around 10%. This is a
starting point, and different designs may make me change things. Anything
above or below this should be the result of filtering or as a very, _very_
light application of color, usually feathered and not noticeable. You should
be able to "feel" the effect, but not see it.

There's really no getting around the fact that whoever is designing your stuff
should know their way around a color wheel. You can use complementary colors
to achieve useful contrast. Select your colors to work well together. It's not
just a matter of looking "pretty", but a matter of controlling the viewer's
eye. It's a form of engineering. And yes, tons of designers don't really get
this. The better ones do and are worth the extra money.

Filtering is a matter of making the highly synthetic image you are creating
look like something your optical viewing system would find in the real world.
All that laborious pixel fitting is simply going to make your image "ring"
like a bell if you don't do the other stuff. And if you do the other stuff,
correctly, and away from pathological situations, you probably _don't_ need to
do the pixel fitting.

If an image is too sharp, it looks fake. Phony. Synthetic. If you are creating
a design that is supposed to look like a 15 year old video game graphic, then
go for it. (But _those_ were actually pretty blurry and were typically viewed
on crummy NTSC monitors.)

So a controlled amount of blur, and I'm not talking about anti-aliasing, can
actually help you here. It does help if the image is anti-aliased, but not if
the structure of your element is close to the sample size of your image. You
shouldn't even be doing that kind of thing. Unless you are creating "small
type" that you don't want anyone to read, type should be large enough to
filter. If this doesn't fit with your design spec, you've got a design spec
done by an amateur.

Now, once you've blurred your image, just a bit, and at the right scale(!),
then you can sharpen it a bit. What!?!? But you just blurred it! Yep. Don't go
overboard. And don't try it on small details (they probably don't need
sharpening anyway. They are small, right?) You can run into trouble on
corners, particularly concave ones. Here you _might_ want to do a bit of pixel
fiddling, but it should be subtle, and filtered. _Don't_ just go and plunk
down a single pixel color change, or a flat color. If you do, that defect will
ring like a bell. I used to keep a whole library of photoshop layers with
filtery, blurry, corners and edges for dropping into tight spots.

Control your environment. Drop shadows are not a decorative item. Well, they
can be, but in this case the thing they do is to create a sense of
environment. Soft and fuzzy. Extended, but subtle. You are creating your own
fake radiousity space here. And yes, a little creative use of color bleed and
fake reflection can work wonders here. But don't overdue it. If the viewer can
notice it, explicitly, you've probably overdone it. The window drop shadows on
OS X are probably just a touch too strong for my taste. YMMV.

The drop shadow doesn't actually have to be a shadow. It can be though of as
merely a filtered edge.

If you really want to get into it, find a good book on oil painting. These
tricks have been around for a while. I can recommend the Andrew Loomis classic
from the 1930s-40s, _Creative Illustration_. It's full of all kinds of
filtering tricks. For a more modern book, James Gurney's _Color and Light_ and
_Imaginative Realism_ are both quite good. You can also pick up a copy of one
of his Dinotopia books, it won't help designing graphics, but, hey, dinosaurs.
Right? (He also has an excellent website:
<http://gurneyjourney.blogspot.com/>)

Gradients and ramps are useful, both to break up large flat areas of color and
to add depth and a sense of space. But they are also useful on flat, graphic
(old sense of the word) designs. A gentle use can place it in the viewer's
world space without disrupting the, well, flatness. Just apply the effects
uniformly, always being aware of color. Use of these _within_ color fields can
be useful and add visual interest and verisimilitude as well. A lighter hand
is usually better than screaming "HEY, COLOR GRADIENTS!!!!"

Noise and dithering are also very useful, but can be very dangerous. Less is
usually more. Noise is particularly useful on large areas, especially those
with gradients. 24 bit color space is actually pretty limited when you start
throwing gradients across all your colors.

I grey smallish elements slightly, unless I need them to pop (but you probably
_shouldn't_ be needing smallish elements to pop!) Over a uniform or low detail
background, a bit of transparency can help, but there are technical
limitations here on the web (see below).

When I need the user to look at different areas, instead of "glows" or
movement in rollovers, use shifts in saturation instead. High saturation
should be used only for directing attention. These days I discourage
interactive things like rollovers because, they are a crutch, and mobile
devices don't support them. (I have been playing around with using saturation
with drag and drop, but it's more for fun and to see what happens. If you try
this, be careful.)

Finally, you can use all these effects over the entire visual field. This is
more useful inside illustrations or in environments where the content is
contained. Vignettes and hot spots, if subtly applied can control the eye,
filter the entire scene, and control perceived depth. This is harder in
typographic environments, like the main areas of web pages and such. You can
use these techniques, but you run the risk of looking less like a web page and
more like a "Crazy Eddie" TV ad.

This is all mostly for display areas, illustrations and display type. For the
reading typographical areas most of the filtering will need to be done by the
OS and you don't have much control over that. You _don't_ want to be screwing
around with ham handed filtering on body type. You can _still_ control color
and contrast here, but remember old folks eyes, and don't unnecessarily grey
the type.

In the new world where we can use Canvas and 8 bit alpha transparency, I've
been known to slip in a few vignettes and hot spots as environmental effects.
But think of the poor user's CPU, and only do this when it either pays off big
time or is in a "display" area like a landing page or interstitial page of
some type. Even then, try and talk yourself out of it.

For what it's worth, the hulu logo example in the article looks fine to me. It
looks to me like it's been filtered, not just anti-alised. The "improved" one
rings, to my eyes. Particularly in the corners.

YMMV.

Edit: Hinting mostly works best with very small elements, like body type, and
even then in high contrast situations at high resolutions. Like laser
printers. I've always found it annoying on CRTs and flat panels. I used to
keep an old pair of reading glasses around to "filter" my screen. These days,
with largers monitors, I use a 24 inch, at an appropriate distance, I don't
need any filtering than my own aging eyes. The body type looks just great.
Younger, sharper eyed readers may not agree, but just wait a few years ...

~~~
Pheter
Do you have a blog? I found this really interesting and would like to read
more.

Also, I'm curious - what are the legal reasons for not working with full black
or white in broadcast video?

~~~
robomartin
It's not "legal" as in "a matter of law". It's about the technical
specifications of television and how television signals are processed and
transmitted. In analog TV the transmission uses AM (Amplitude Modulation). You
could create signals that over-modulate the transmitter if not careful. Hence
the use of the terms "legal" to refer to signals that would pass through the
transmitter without causing any trouble. Most stations would use boxes called
"legalizers" to prevent bad signals from reaching the transmitter. However,
broadcasters generally have specification documents that content providers
must follow in order to submit material that will not be rejected by their QC
department.

~~~
commieneko
No, it actually was "legal" as in FCC regulations; and you could get fines for
broadcasting signal out of spec. (Though I've _never_ known of it happening.)

I'm not sure what the situation is now with digital TV. My last years in the
industry were before the mandatory switch, and the places I was working were
simulcasting. So we were creating stuff that was NTSC safe. By then most of
the software we were using took care of keeping things in spec, but some of
the older equipment we were using, mostly character generators and few really
cranky old switchers and effects boxes, still required that we be careful
about our input levels.

~~~
robomartin
OK, you are probably right. It's been a while. I played in broadcast some time
ago.

I think you jogged my memory further. I think the way it worked is that the
transmitter over-modulation due to illegal levels would/could interfere with
adjacent channels and that's why the FCC made the rules.

------
ricardobeat
Manual hinting may be fine for simple vector shapes like that, but in most
cases it does more harm than good. It's the same debate of windows vs OSX
anti-aliasing: windows tries to fit shapes in to the pixels for a sharper
look, while OSX favors preserving the exact shapes resulting in more blur.

In the Hulu pixel-fitted example, the typeface is mutilated beyond
recognition. Yes, it's sharper, but it doesn't look right, the 'u's even
appear higher than the x-height.

In a screen where everything is anti-aliased, images like that stick out like
8-bit art. And just like in HD vs FullHD, most people can't even tell the
difference. Be patient and we'll be over this in a couple years :)

~~~
jmpeax
As a programmer, I switched from Windows 7 to Mac (Lion) since everyone at my
new medical-related job uses Macs. I must say that I much prefer the W7 anti-
aliasing, because I care little about how close my characters are to their
true glyph shapes and care much about how crisp a page of code looks like on
my monitor. I've gotten used to the blur now, but whenever I go back and look
at my old W7 machine the crisp nature of the text really jumps out at me.

------
michael_fine
I hope I'm not naively over-generalizing a complex process, but is 80% of what
he doing just not anti-aliasing straight lines? If that is most of it,
couldn't pixel-fitting be improved by just doing that?

~~~
thristian
It's slightly more complicated than that.

For example, in his "Markdown Mark" example, he's careful to make sure that
the rectangular border is exactly three pixels wide on every side. Just
rounding straight lines to the nearest pixel boundary wouldn't guarantee that
(it's pretty easy to wind up with shapes that _should_ look even, but are 2px
on one side, and 4px on the other).

TrueType fonts face exactly the same challenges as described in the article,
and they include bytecode for a specialised VM to describe how to nudge
control points to pixel boundaries. The open-source FreeType rasteriser has
code that's pretty good at doing this automatically, but it's very domain-
specific to font-rendering; it would be no use to a general SVG renderer, for
example.

------
ianterrell
Great post. I would have kudo'd it were I not so annoyed with having been
tricked by the kudo button's hover-for-irrevocable-action on another article
in the past.

~~~
rpicard
I went back to see what you were talking about and now I'm in the same boat as
you. I think it's a good opportunity for another cool effect though. I imagine
you could hover (after "kudoing") and the animation would happen in reverse
resulting in an "un-kudoing".

~~~
dpark
Meh, the effect is trivial and the behavior is bad. The real opportunity is to
just fix it.

------
grannyg00se
"Until we have Retina displays everywhere, we're going to have to live with
antialiasing techniques"

I don't think Apple needs to come in and rescue every display maker in the
world with their branding. Any sufficiently high resolution display will do.

~~~
AncientPC
I agree. Why use the term Retina? That term means nothing to many consumers.

Why not use the company agnostic term HD? You can be even more technical and
say displays with 100+ DPI.

~~~
lparry
Perhaps because HD got railroaded by the TV people and now it's commonly taken
to mean 1920x1080 rather than a DPI measurement?

Also, your "more technical" definition is off by a long shot; people have been
using 100-125 DPI screens for years, that's 100+ and it's not what would pass
for a retina display unless it was 40" across and you sat at TV viewing
distances away. Retina is being used in the generic sense to say "2X the DPI
you're used too", or 250+ DPI for the current examples available. But even
that DPI measurement is flexible because it's related to viewing distance.

So rather than stretching for generic terms that dont actually make it any
clearer what you're describing, lets just stick with "retina" until we really
have a better term :)

~~~
AncientPC
HD means high definition. The TV people have adopted that term for HDTV, so be
it.

I threw a number out there, but should have known better since someone was to
nitpick it.

The correct term is PPI (screens) over DPI (printers). Also, PPI is pixels per
inch. PPI is not relative to viewing distance. DPI is not relative to viewing
distance.[1]

An iPhone 4S has 326 PPI. We already have a technically accurate method to
measure pixel density, so let's use it. Use bytes to describe data, not
Libraries of Congress.

Retina is a marketing term. Does phone A had better PPI than phone B? I don't
know, is Retina better than Super AMOLED++? Why not just compare technical
details instead of resulting in fuzzy marketing word arguments?

[1]: DPI does not change with viewing distance, but the closer the viewing
distance the higher the DPI needs to be to achieve the same visual effect. A
billboard can look the same as a postcard at a much lower DPI because at that
distance the human eye can't discern the individual dots.

------
Kevin_Marks
What the author misses is that with colour LCD displays you can do sub-pixel
anti-aliasing with the 3 RGB sub-pixels, if you start from a vector, which is
why HTML type looks better than Photoshop rendered type.

~~~
dcurtis
I purposefully chose to ignore subpixel antialiasing because it's complicated
and you have little control over how it works. It's done at a layer further
abstracted from the source file, so you can't accurately pixel-fit anything to
a subpixel. It's also just another hack, using a smaller unit than a half-
pixel, and, like most hacks, it has some serious negative side-effects.

~~~
lordlicorice
He's not suggesting that you subpixel antialias manually. He's pointing out a
benefit of leaving your images as vectors: the browser knows the subpixel
order of the display, and can make the image prettier than you can without
that information.

~~~
exogen
It can make it effectively higher-resolution than you can, but that doesn't
mean it can make it prettier. It could still look end up looking worse (from
the color bleeding effect, for instance).

------
vibrunazo
A small tip here: if instead of using 2d vectors like Illustrator, you use 3d
vectors like Blender for your logos and icons. Then the smooth shading of the
3d objects (versus the opaque shading 2d styles usually go for) makes these
manual hinting problems meaningless. So 3d vectors are much easier to scale
automatically than 2d vectors, without worrying about quality loss.

So many choose 2d logos and icons instead of 3d, simply out of style. But this
little advantage is certainly something to at least consider.

------
gurraman
If you prefer a video:

[http://methodandcraft.com/videos/pixel-hinting-vectors-in-
ph...](http://methodandcraft.com/videos/pixel-hinting-vectors-in-photoshop)

------
ThomPete
Fireworks have had a nice little feature for a while

Apple+k and it finds the nearest pixel.

It's doesn't always do good, but sometimes it's just what the doctor ordered.

------
falava
Vector icons tend to look horrible at small sizes. A post from a month ago:

[http://www.pushing-pixels.org/2011/11/04/about-those-
vector-...](http://www.pushing-pixels.org/2011/11/04/about-those-vector-
icons.html)

<http://news.ycombinator.com/item?id=3720363>

------
tintin
Also note that SVG logo's are rendered far better than a scaled down pixel
version. I tried a lot of different reduction methods but the SVG version was
always "sharper". Just include it in your image-tag: <img src="logo.svg"
alt="my logo">

I think you can use a background image as fallback.

~~~
justincormack
I find it is easiest to use javascript to set fallbacks.

------
agumonkey
Anyone feels this everlonging problem is related to autofocus ? Pretty sure it
wouldn't be very hard to automatically realign subparts to fit based on
Fourier analysis.

------
seanalltogether
I really wish Fireworks or some image editor was designed for asset creation
first and took care of these kinds of issues. Even with Fireworks if you zoom
in on the palette and draw a box you can end up creating it on the half pixel
and get anti aliasing issues. I want a tool that restricts you to whole pixels
for everything, including when it does automatic resizing.

~~~
blehn
Can you clarify your issue with Fireworks? By "palette" do you mean "canvas"?
From my experience, there are no sub-pixels initially on the edges of boxes
drawn in Fireworks. Sub-pixels will occur if you use the Scale tool (Q) to
resize the box, however you may subsequently snap the box to full pixels using
Cmd+K. Also, if you resize the box using the X/Y dimension inputs in the
Properties inspector, the edges will remain at full pixels.

~~~
seanalltogether
Here you go, I created a box, zoomed in, and resized it using my cursor.
<http://i.imgur.com/Nx0Bx.png> The pixel dimensions show whole numbers.
Punching in numbers into the properties inspector isn't always an option, for
instance when you're trying to resize a box with rounded corners while
preserving the corner radius.

~~~
blehn
I see, so it's after you've created the box. I agree that there should at
least be a mode where everything snaps to a full pixel. Anyhow, the Cmd+K
trick would be useful in your case. Also, corner radii should be preserved if
you resize with the properties inspector.

------
jwr
This seems like it could be automated algorithmically — it looks like an
optimization problem where you want to minimize the number of partially-filled
(e.g. "gray") pixels, especially along vertical and horizontal lines.

For rectangular shapes, even a simple repositioning could do a lot.

~~~
ricardobeat
That's automated hinting, it's available in TrueType, Freetype and
professional type design software.

------
fusiongyro
This article reminded me of an article by Juan Vuletich about the application
of signal processing to anti-aliasing:

<http://www.jvuletich.org/Morphic3/Morphic3-201006.html>

I'd say there's still work to be done in this area.

------
captaincrunch
While this has the attention of some of the best designers, I'd appreciate a
real quick look at our logo for criticism, it's here:
<http://www.verelo.com/images/logo.png> (is it using anti-aliasing?)

------
daenz
I'm pretty sure this is what drives me nuts about the kickstarter logo. It
could be so much crisper:

<http://www.kickstarter.com/images/kickstarter-error.gif>

~~~
tissarah
Facebook's too? Especially juxtaposed with all of the crisp white text?

------
benhoyt
Very interesting. Reminds me of pixelsnap, an Inkscape plugin my brother wrote
to do this very thing: <http://code.google.com/p/pixelsnap/>

------
lnanek
I hate to break it to the guy, but I can't remember the last time my browser
was at 100% zoom, so his perfect pixels will never look perfect on my screen
anyway...

------
wlievens
That doesn't look like something you can't automate for most of those cases.

