Pixel-fitting – how antialiasing can ruin your logos and icons
dcurt.is
dcurt.is
So in a way, because of all this history, the pixel-fitted logo actually looks too sharp, and hence a little uncool.
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.
“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)
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.
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".
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.
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.
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 ...
Regarding this:
So a controlled amount of blur, and I'm not talking about anti-aliasing,
it's worth pointing out that anti-aliasing is a form of blur, but most software usually uses a box filter which is a really a poor filter. I have some demonstration images here:
http://www.freedesktop.org/~sandmann/tigers
Compare these two especially:
http://people.freedesktop.org/~sandmann/tigers/tiger-box.png
http://people.freedesktop.org/~sandmann/tigers/tiger-jinc-ga...
The first one is what cairo produces; the second is improved in three ways: (1) The antialiasing filter is based on the Jinc function rather than a box, (2) white and black are offset slightly from the top and bottom, and (3) the compositing is done in linear light, not sRGB.
The strokes in the second image are also somewhat wider in order to compensate for the lighter appearance that gamma-aware compositing produces.
When I'm saying anti-aliasing I'm really meaning super sampling and weighted assignment of brightness values. There's a lot of ways to do that, all with their own artifacts and advantages.
Filtering is used as a catch all for operations that reduce image sampling and display artifacts.
Most website designers will be using Photoshop and its blur and Gaussian blur filters. Those work just fine. If you need anything fancier, or can make use of it, you probably don't need to have read my comment.
For this type of work I've found that techniques developed by oil painters over the centuries work just fine. A little math goes a log way.
My point is that if you are fiddling with pixels, you probably aren't looking at the whole image, and probably should be. Counter intuitive as it may seem, sharpness is not always your friend. You've got bigger things to worry about.
In the "real world" nearly everything we look at is seen by reflected light, with pigments subtracting frequencies and value from the available light. Edges come and go due to characteristics of our visual system. Brightness levels are incredibly wide compared to what we get on the screen. On a computer screen we are looking at emitted light, with a very strange, and constrained gamut. Edges and areas are defined by additively mixed samples and other artifacts. Go outside some evening, just as the sun is setting, and walk through a residential neighborhood with a lot of trees, houses and such. Very peaceful. Except for the neighbor who has his living room window open and lets his TV shine like a demon in the night, destroying the ambience and mood. (And don't get me started talking about audio!)
A good designer knows how to use those characteristics, the limitations of his/her medium, to recreate the experience of the world, or to control them to create something different that serves their purposes. It's why a painting can look better than even a very good photograph. Or why a highly manipulated photograph can look better than an un-staged one. Portrait studios are not the site of a documentary :)
Followup questions:
What do you think about the effect that pixel-alignment produces specifically in the context of this comparison?
There seem to be a couple of basic problems with the "clarity" of the pixel-aligned images (please correct):
- As lines diverge from rectilinear, aliasing is inevitable. Either the aliasing or the anti-aliasing will produce discontinuity.
- High-contrast neighbors on pixel boundaries are more likely to highlight perceptual problems related to frequency.
The part that interests me here is the presentation of this comparison on Dustin Curtis' site. His site seems to be pursuing visual impact as an ultimate goal, and contrast is a big part of that: http://i.imgur.com/UC8ZX.png (OP with histogram overlay)
Does the context minimize the negative effects you've described? Do the filtered images look out of place in such a stark environment?
Patient: Doctor, Doctor! It hurts when I do this! Doctor: Well don't do that!
Thank you, thank you. I'll be here all week ...
Seriously ...
With sampled images displayed on a rectilinear grid, you are going to get into pathological situations that hurt. So don't do that.
One trick you can sometimes get away with is to rotate the work so that it isn't orthogonal to the display grid. Of course then, parts that were okay before may become problems. And the client, bless them, may not like it. No body said life was going to be easy.
Contrast at the edges is where you have the most hurt in this case. Drop shadows, very subtle, please, can help as can can vignetted edges. I've been known to do unclean things like create a 2 or 3 pixel rule the shape of the edge, blur it and multiply or screen it on top of the offending parts. You can even dodge and burn it more or less in the nasty bits. (blending modes are a big topic!) Worse case scenario, try and use the problem as a design element. Once I took a particularly truculent logo and grudged it up with some high frequency noise that was applied with a transparency just so.
Now one thing I used to do all the time for animation was to use temporal sampling to smooth over the rough edges. Even for seemingly static elements, a little bit of focus wiggle or even a slow, smooth slide, barely perceptible, will often cover a world of sins. We probably aren't to the point where that kind of thing is going to be useful on web pages for "static" elements, but the day is coming. There are other advantages, as this allows the graphics to "breath" and seem part of an environment. Of course you may very well not want that effect. But even so, higher resolution displays, faster processors, more resources, will mean that such things, subtly applied, can give us more tools to work with in troublesome situations.
But the best advice, for nearly every case, is "Then don't do that!"
To me, the fitted hulu logo looks so much better. I like the crispness.
But emitted imagery is going to ring in areas of detail and high contrast. Reflective imagery, not so much. Sharpness is going to create detail and contrast.
If you are going to do this kind of thing, you will have to develop an eye looking at stuff. And then be ready to lose that eye and look at it like a street person again.
My point is look at the whole thing, not the pixels. Those corners ring, I want to look at them. We aren't having a beauty contest here. That logo is a single element on a page full of a lot of other stuff. Do we want it ringing? Hell, do we even want the viewer looking at the damn thing. If I ran that circus I'd probably fade the thing to about 50%. Yes it's got to be there. They should notice it, recognize it, but we probably want them looking at something else.
It's a rule, a law really, that you never, never, NEVER look at a logo or design in isolation when you are making a judgement. You look at it in its venue. If it's a critical use, you will be fiddling with the design, the whole thing, not just the logo, for each use. This isn't an aim, shoot and forget situation.
Edit: I should also point out that when looking critically at a design I use an old visual astronomer's trick: Averted vision. That is to say, I don't look directly at the thing I'm looking at, I look beside it or even a ways off. Your eye isn't a camera. It's a complicated flying spot scanner with a really complicated, variable sensor. Different parts of your eyes "notice" different things.
The center is good for detail and color, but the edges are good for contrast and small variations in same. When a viewer looks at a page, his center of vision is looking at those groovy sharp pixels, but the edges are noticing stuff too, like contrast and movement. Just like the caveman who is looking eagerly at the bright red berries on the bush, the edges of his eyes are looking for that tell-tale flicker in the underbrush that means a big mean cat is about to jump on him and eat him. You have to be cognizant what is going on all over the field of view in order to control, or organize the viewer's experience.
But I've run a couple of start ups in the past, and I've been involved with web design and web applications since the early '90s. So Hacker News is of general interest to me. I'm a geek and a hacker too.
My background is in fine arts; my degree is in painting, drawing and print making. Image making is a very old technology. Leonardo's notebooks have a lot of good advice for modern web designers. So do the 19th century impressionists. Add in the fact that I'm an amateur astronomer with an interest in optics and the human visual system, and I've got a pretty useful toolbox for making things that people need to look at.
I read the article you mention, and thought it was cute. What a lot of web developers don't realize is that if your visual design doesn't work, then that's one thing that's broke about your project. Visual design doesn't necessarily mean "pretty" or "pleasing to the eye", though that never hurts. Visual design means that your work is communicating correctly and efficiently.
Think about designing a billboard or a 10 second TV commercial. You've got a very narrow window of opportunity to grab someone's attention, amidst all the other distractions, get your message across, and hopefully initiate some kind of action or memory response.
The biggest problem with some designers is that in order to perform in a highly competitive environment they have to become very specialized and attuned to a particular medium and a particular set of requirements. If they've never worked in other mediums they may think that the specialized rules and needs of their medium are general rules. I've seen print designers create billboards that would look beautiful in a magazine spread, but would be a messy blur on the side of the highway as you went zooming past.
I've worked in print, broadcast, movie special effects, animation, multi-media, display, web, charcoal, oil and acrylic paint, silkscreen, wood engraving, copper plat etching, and other even weirder mediums. I once had to design an ad that was to be silk screened onto walnuts. Now there's a tricky venue to master ...
Back when I was teaching design and web development, one thing I would stress was that anyone working in a visual medium ought to learn to draw. Get Betty Edward's book Drawing On The Right Side Of The Brain and go to town. Learning to draw observationally is learning to see; and to see the whole picture, not just the part that happens to be under your pencil at the moment. If you can't draw it that means you aren't really seeing it; you are merely recognizing it.
Also, I'm curious - what are the legal reasons for not working with full black or white in broadcast video?
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.
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.
The legal brightness and color usage has to do with the fact that certain levels can cause signal distortion. The details are different, but think of overpowering an audio amp and the distortion you can get. Analog video is a real nightmare of limitations and artifacts. Most facilities I've worked at had signal clippers at some point in their signal chain, but those can cause their own problems. Best to stay away from the cliff's edges. These days HD and digital are much nicer, but there are still a lot of NTSC TVs out there. The situation is a lot like continuing to support older versions of IE.
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 :)
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.
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.
Once more displays come out with extremely high pixel density, we'll probably have an industry wide name for it.
Why not use the company agnostic term HD? You can be even more technical and say displays with 100+ DPI.
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 :)
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.
Logo design should be done in-context, not in a dark room at 400% zoom.
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.
http://methodandcraft.com/videos/pixel-hinting-vectors-in-ph...
Apple+k and it finds the nearest pixel.
It's doesn't always do good, but sometimes it's just what the doctor ordered.
http://www.pushing-pixels.org/2011/11/04/about-those-vector-...
I think you can use a background image as fallback.
For rectangular shapes, even a simple repositioning could do a lot.
http://www.jvuletich.org/Morphic3/Morphic3-201006.html
I'd say there's still work to be done in this area.