warning against subpixel rendering

Recently I was pointed to Thomas Maier’s site and stumbled across this article on using ‘subpixel hinting’ in Photoshop. This technique gives sharper image quality for almost all standard LCD screens in their standard orientation. So what’s the problem? The iPhone and the iPad. These new classes of device are made to view things in whichever orientation seems appropriate to the user. And with these platforms gaining steam all the time, statically subpixel-rendering assets becomes counter-productive.

Pixel Orientation Diagram

The sharpness comes because the images take into consideration the minute differences in position of the red, green, and blue subpixels that make up each pixel. When we start physically altering the orientation of the screen (and thereby rotating the content that is displayed) our work to increase sharpness is not only lost, but in fact sharpness is actually worsened. In the case where the screen is rotated right or left, the subpixel rendering isn’t even working on the same axis as the subpixels anymore, and the even worse case, when it is upside down, the hinting works directly against the physical order of the subpixels.

On top of this issue, screen technology is still rapidly changing. Google’s Nexus One, for instance, has a screen with one green subpixel and one of either red or blue subpixels alternating in each adjacent pixel. Using subpixel rendering to generate assets bakes in assumptions about hardware that are no longer as valid as they once were. Point being, we should rely on hardware advancement to give us better image clarity and fidelity. One day the hardware might demand higher resolution images of us and offset the data for the subpixels dynamically, but we should avoid creating assets only fit for a single display system.

Update: This article was previously using the term ‘subpixel hinting’. It has come to my attention that what I am describing isn’t a correct usage of that term. I was simply responding using the language from Thomas’ article as I understood it. Font hinting is a term for aligning a font with the raster grid of a monitor so that it takes advantage of solid pixel edges where possible. What I’m cautioning against here is generating any art assets with a baked in presumption about subpixel arrangement to prevent improper display on screens of varying orientation. It appears that subpixel rendering is a more accurate term, so I’ve substituted it for subpixel hinting throughout the post. (Thanks to Typographica for the heads up.)

March 19, 2010 at 1:38 pm

Wow! Great follow-up article about my sub-pixel hinting solution. I totally agree with you, but I posted this not to fit a single screen but to simulate the look of real text in Photoshop. This technique should be used in web design templates created in Photoshop with text, which is going to be selectable text on the web site. It doesn’t make so much sense for non-text objects anyway and text-as-image shouldn’t take that Action. Hopefully we come to a point there everytime text can be real text and always gains the sub-pixel hinting from the system and also when the device is rotated.
But I didn’t consider stuff like the iPad so far and I should have mentioned this problem. For the most part, it’s fine and better than the default greyscale solution where every font smoothing technique is worse than the other one.
I’m going to update my blog post with a link to your explanation.

Thanks!

Thomas

Thomas Maier, March 25, 2010 at 4:01 pm

Hey, thanks for linking back Thomas. I usually update my site in real-time live on the server, so you can imagine I’m not doing to much upfront work in Photoshop. That should explain my confusion about what you were suggesting.

I’m sure one day, when memory is much more plentiful, we’ll have over-sized images for everything that the hardware will automatically hint for maximum sharpness on the current display. That will be a wonderful day indeed.

Chuck, March 25, 2010 at 5:06 pm

@skoda on App.net @technochocolate on App.net