I frequently get frustrated with web graphics. I’ve been gradually switching over to using Inkscape and SVG (vector) based graphics and find that I’m bumping into a specific problem more and more – fuzzy lines. This happens in Photoshop, Gimp, Inkscape or whatever, however the problem is easier to bump into with vector graphics. Here’s a sample image demonstrating the problem:


Notice the two vertical lines… in the original image they are identical, 1px lines. Yet the one on the left looks thicker and darker than the other. The reason is that the right image is precisely lined up so that it uses exactly one pixel (i.e. its x and y coordinates have no fractional values). The left image however slightly overlaps two pixels (its x coordinate has a fractional value). When it is exported as a bitmap, instead of drawing a 1px black line, it has to color two adjacent pixels. For example, it may make a two pixel wide line of 50% black. This is what has happened in the image above.

The solution is to align your lines so that they don’t have to be interpolated or dithered when exported. In Inkscape, this is made easy by switching the grid on occasionally (keyboard shortcut is # to toggle this view on/off) and find tune placement. You can also enable “snap to grid” which when enabled is only active when the grid is shown – very convenient. This is easy for boxes and lines but much more difficult for text.

In the example above you’ll see text in two different typefaces: Verdana and Times New Roman, each at 11pt. In both cases I’ve tried my best to align the text on pixel boundaries (without too much tweaking) but you just can’t get it perfect. Here are some tricks: Adjust your font size by fractional amounts… i.e. if 12pt looks fuzzy, try 12.1 or 11.9pt. Also, choose a web-friendly font for small font-sizes. Notice that above, at the small 11pt font size, the Verdana looks a bit sharper. Verdana has few curves and is mostly solid vertical and horizontal strokes. The Times New Roman, a serif font, has many angles and sub-pixel embellishments that make it difficult to get smooth at this font size. The rule of thumb with fonts is that sans-serif fonts will usually work better at smaller font-sizes.

Also, the more contrast you have between your text/lines and the background, the more apparent the problem is. So black text on a white background will tend to fuzz more than if its on a green or grey background (of course, then you also loose contrast).

Don’t sweat it if you don’t get it perfect… even the folks at Apple and Adobe often demonstrate this problem on the graphics that adorn their websites. Before Apple switched to a black website recently you could spot this problem prominently on their homepage. And, um… you can also find it on the Ubuntu homepage without [too much effort][0].

[0]: http://www.ubuntu.com/files/u1/masthead_center_text.png