8 ms·

Pixel-fitting – how antialiasing can ruin your logos and icons

291 points by danielzarick 14y ago

ChuckMcM 14y ago
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.
fusiongyro 14y ago
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 http://www.jvuletich.org/Morphic3/Morphic3-201006.html I'd say there's still work to be done in this area.
dtf 14y ago
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.
- deleted 14y ago
  [deleted]
- aardvark179 14y ago
  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 14y ago
    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).
- decklin 14y ago
  I don't know, my "cool Apple owning friends" told me for years that unhinted font rendering was better, and I always thought they could pry my Bitstream Vera from my cold dead hands. Then I used OS X full-time for a while. Upon switching back to Linux, I immediately turned hinting off. It just... looked "wrong".
  - falling 14y ago
    The difference is that with no hinting you optimize for maintaining the shape of the characters, while with hinting you optimize for having the shapes falling on pixels. “cool Apple friends” have often been graphic-oriented people, so they preferred seeing their fonts right. Windows and Linux people only saw blur because they were less trained to look at fonts. (I know, this is a generalization, I disabled hinting myself on my Linux machine years ago, and I’m no graphic person at all)
seanalltogether 14y ago
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 14y ago
  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 14y ago
    Here you go, I created a box, zoomed in, and resized it using my cursor. http://i.imgur.com/Nx0Bx.png 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 14y ago
      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.
Kevin_Marks 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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).
  - __alexs 14y ago
    You can't even reliably fit raster images to screen pixels on the web. Images can easily end up at non-integer screen pixel locations which requires resampling (and ruining your careful alignment) to render. Logo design should be done in-context, not in a dark room at 400% zoom.
- rorrr 14y ago
  Which has nothing to do with logos, which are raster images 99% of the time and don't use subpixel rendering for obvious reasons.
vibrunazo 14y ago
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.
ianterrell 14y ago
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 14y ago
  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 14y ago
    Meh, the effect is trivial and the behavior is bad. The real opportunity is to just fix it.
- sad_panda 14y ago
  Ugh, that widget really stresses me out!
- chrisdroukas 14y ago
  Isn't it a fairly meaningless metric, though? I don't give much credence to the fact that n people gave the article 'kudos' - Dustin is already a trusted reader for most of HN.
- chrisdroukas 14y ago
  Isn't it a fairly meaningless metric, though? I don't give much credence to the fact that n people gave the article 'kudos' - Dustin is already a trusted reader for most of HN.
michael_fine 14y ago
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 14y ago
  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.
jcampbell1 14y ago
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 14y ago
  In Inkscape I think you have to apply a pixel grid (which can be hidden) and turn on grid snapping.
agumonkey 14y ago
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.
daenz 14y ago
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 http://www.kickstarter.com/images/kickstarter-error.gif
- tissarah 14y ago
  Facebook's too? Especially juxtaposed with all of the crisp white text?
- tissarah 14y ago
  Facebook's too? Especially juxtaposed with all of the crisp white text?
crazygringo 14y ago
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".
- kevinchen 14y ago
  He did say that he "probably overcompensated, which resulted in some lost some detail in the P and S"
- huggyface 14y ago
  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 14y ago
    And retina has made pixel matching obsolete, the screen resolution is higher than the eye.
- xsmasher 14y ago
  DC is starting with a bitmap not vector source. He can't move the corner points in a bitmap, just chop off or duplicate rows of pixels. You're right though; The P and S look too plump, and the L looks too skinny. It's not a good advertisement for the procedure.
gurraman 14y ago
If you prefer a video: http://methodandcraft.com/videos/pixel-hinting-vectors-in-photoshop http://methodandcraft.com/videos/pixel-hinting-vectors-in-ph...
ricardobeat 14y ago
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 14y ago
  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.
grannyg00se 14y ago
"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.
- harpastum 14y ago
  I see your point, but "retina" is just a simple stand-in for "pixels so dense individual pixels are no longer distinguishable". It doesn't seem like the author was saying 'just apple devices' -- it's simply a convenient way to reference that class of displays. Once more displays come out with extremely high pixel density, we'll probably have an industry wide name for it.
- AncientPC 14y ago
  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 14y ago
    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 14y ago
      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.
commieneko 14y ago
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/ 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 ...
danboarder 14y ago
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.
ThomPete 14y ago
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.
wlievens 14y ago
That doesn't look like something you can't automate for most of those cases.
tintin 14y ago
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 14y ago
  I find it is easiest to use javascript to set fallbacks.
falava 14y ago
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-icons.html http://www.pushing-pixels.org/2011/11/04/about-those-vector-... http://news.ycombinator.com/item?id=3720363 http://news.ycombinator.com/item?id=3720363
jwr 14y ago
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 14y ago
  That's automated hinting, it's available in TrueType, Freetype and professional type design software.
captaincrunch 14y ago
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 http://www.verelo.com/images/logo.png (is it using anti-aliasing?)
benhoyt 14y ago
Very interesting. Reminds me of pixelsnap, an Inkscape plugin my brother wrote to do this very thing: http://code.google.com/p/pixelsnap/ http://code.google.com/p/pixelsnap/
lnanek 14y ago
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...

291 points by danielzarick 14y ago

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.

fusiongyro 14y ago

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 http://www.jvuletich.org/Morphic3/Morphic3-201006.html I'd say there's still work to be done in this area.

dtf 14y ago

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.

deleted 14y ago
[deleted]
aardvark179 14y ago
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 14y ago
  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).
decklin 14y ago
I don't know, my "cool Apple owning friends" told me for years that unhinted font rendering was better, and I always thought they could pry my Bitstream Vera from my cold dead hands. Then I used OS X full-time for a while. Upon switching back to Linux, I immediately turned hinting off. It just... looked "wrong".
- falling 14y ago
  The difference is that with no hinting you optimize for maintaining the shape of the characters, while with hinting you optimize for having the shapes falling on pixels. “cool Apple friends” have often been graphic-oriented people, so they preferred seeing their fonts right. Windows and Linux people only saw blur because they were less trained to look at fonts. (I know, this is a generalization, I disabled hinting myself on my Linux machine years ago, and I’m no graphic person at all)

seanalltogether 14y ago

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 14y ago
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 14y ago
  Here you go, I created a box, zoomed in, and resized it using my cursor. http://i.imgur.com/Nx0Bx.png 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 14y ago
    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.

Kevin_Marks 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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).
- __alexs 14y ago
  You can't even reliably fit raster images to screen pixels on the web. Images can easily end up at non-integer screen pixel locations which requires resampling (and ruining your careful alignment) to render. Logo design should be done in-context, not in a dark room at 400% zoom.
rorrr 14y ago
Which has nothing to do with logos, which are raster images 99% of the time and don't use subpixel rendering for obvious reasons.

vibrunazo 14y ago

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.

ianterrell 14y ago

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 14y ago
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 14y ago
  Meh, the effect is trivial and the behavior is bad. The real opportunity is to just fix it.
sad_panda 14y ago
Ugh, that widget really stresses me out!
chrisdroukas 14y ago
Isn't it a fairly meaningless metric, though? I don't give much credence to the fact that n people gave the article 'kudos' - Dustin is already a trusted reader for most of HN.
chrisdroukas 14y ago
Isn't it a fairly meaningless metric, though? I don't give much credence to the fact that n people gave the article 'kudos' - Dustin is already a trusted reader for most of HN.

michael_fine 14y ago

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 14y ago
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.

jcampbell1 14y ago

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 14y ago
In Inkscape I think you have to apply a pixel grid (which can be hidden) and turn on grid snapping.

agumonkey 14y ago

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.

daenz 14y ago

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 http://www.kickstarter.com/images/kickstarter-error.gif

tissarah 14y ago
Facebook's too? Especially juxtaposed with all of the crisp white text?
tissarah 14y ago
Facebook's too? Especially juxtaposed with all of the crisp white text?

crazygringo 14y ago

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

kevinchen 14y ago
He did say that he "probably overcompensated, which resulted in some lost some detail in the P and S"
huggyface 14y ago
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 14y ago
  And retina has made pixel matching obsolete, the screen resolution is higher than the eye.
xsmasher 14y ago
DC is starting with a bitmap not vector source. He can't move the corner points in a bitmap, just chop off or duplicate rows of pixels. You're right though; The P and S look too plump, and the L looks too skinny. It's not a good advertisement for the procedure.

gurraman 14y ago

If you prefer a video: http://methodandcraft.com/videos/pixel-hinting-vectors-in-photoshop http://methodandcraft.com/videos/pixel-hinting-vectors-in-ph...

ricardobeat 14y ago

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 14y ago
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.

grannyg00se 14y ago

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

harpastum 14y ago
I see your point, but "retina" is just a simple stand-in for "pixels so dense individual pixels are no longer distinguishable". It doesn't seem like the author was saying 'just apple devices' -- it's simply a convenient way to reference that class of displays. Once more displays come out with extremely high pixel density, we'll probably have an industry wide name for it.
AncientPC 14y ago
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 14y ago
  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 14y ago
    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.

commieneko 14y ago

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

danboarder 14y ago

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.

ThomPete 14y ago

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.

wlievens 14y ago

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

tintin 14y ago

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 14y ago
I find it is easiest to use javascript to set fallbacks.

falava 14y ago

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-icons.html http://www.pushing-pixels.org/2011/11/04/about-those-vector-... http://news.ycombinator.com/item?id=3720363 http://news.ycombinator.com/item?id=3720363

jwr 14y ago

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 14y ago
That's automated hinting, it's available in TrueType, Freetype and professional type design software.

captaincrunch 14y ago

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 http://www.verelo.com/images/logo.png (is it using anti-aliasing?)

benhoyt 14y ago

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

lnanek 14y ago

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