Deke’s Techniques 013: Simulating Subpixel Rendering

This week's technique covers a topic so arcane, you'll either lose interest seconds into the movie, or be sucked into the topic as surely as you might draw an unfamiliar but addictive soda flavor into a straw.

The idea is this: Regardless of the rendering intent---Sharp, Crisp, Strong, or Smooth---Photoshop has a habit of rendering very small type like Garbage. Whereas that same very small type looks nice and legible when rendered by your operating system or as editable type by a browser.

The reason is subpixel rendering, which permits an application to rasterize text and other vector objects, on-the-fly, to each of the three color channels (RGB) independently. Here's a diagram to help things make slightly more sense:

Jagged vs. antialiasing vs. subpixel rendering

As long as you're working with standard HTML type, all is well. But as soon as you render that text to pixels, subpixel is not an option. It's not Photoshop's fault; JPEG, GIF, PNG, and other Web image formats don't support subpixel rendering.

In this movie, I tell you not only how subpixel rendering works, but also how to simulate it in Photoshop. For those of you who make small type for your screen images---whether Web, kiosk, or presentation---it'll make all the tiny difference in the world.

Tagged with: