The Myth of the Pixel Perfect Grid

by @edent | # # # # | Read ~3,505 times.

If you've spent any time with graphic designers, you'll know that they love spending your money on imperceptible tweaks to your image files. "It must be pixel-perfect!" they cry. When you query why they've generated the same icon in multiple sizes, each with subtle variations, they cryptically mention how everything must align with "the grid."

This is hokum.

First Principles

When we first learn about computers, we're taught about pixels. The individual squares that make up a graphics display. Each platonic pixel is a perfect square that can display a range of colours.

In our naivety, we see how a diagonal line might be drawn on such a system.

A simple pixel representation of a line.

We then learn that we can include hints to enable Sub Pixel Rendering.

A simple pixel representation of a line, with some pixels shaded grey.

The line doesn't intersect those pixels, but if we make them grey, the line will look smoother to the user. Nifty! The grid is magic!

This is a lie. Just like everything else in computing - pixels are a simple abstraction for our puny human minds.

Technology

Screen technologies play a huge part in how "pixels" are laid out. If you've never taken a look at a screen through a microscope, you should!

Here's a magnified version of a typical AMOLED "pentile" screen:
Nexus one screen microscope.jpg

The individual colours aren't square. Not every pixel has the same colours available. They don't align in the way you might think. In short; if you design for "the grid" you're not going to align with the physical pixels.

Different technologies have different layouts.
Pixel geometry 01 Pengo.jpg

If you want to go into the weeds, take a look through Ian Mallett's Subpixel Zoo - A Catalog of Subpixel Geometry

Outside of phone screens, pixels aren't always square.

Compare and Contrast

Here are a selection of some phone screens all displaying the letter b.
The letter B rendered on several screens, intensly magnified.
(I've shamelessly stolen that image from Phone Arena's Screen comparison (2014) article. You can view the full resolution image.)

You can tweak your fonts and graphics to your heart's content. There is no universal grid on which they will be displayed.

Various screens. The text is laid out differently on each.

OK, but all of us super cool designers have high end Apple kit. That's got a grid, right?!

Nope! Here's what your iPhone, iPad, and iWatch look like under a microscope:
The letter E displayed on various screens. Each renders differently.
Now, that font might be hinted for lots of different sizes, but it isn't hinted for different screen technologies.

Grease is the word

When you're next on the bus, take a look at the screens people are using. I guarantee you'll see phones which are:

  • Covered in fingerprint grease.
  • Several cracks running through the glass.
  • Screen protectors badly applied with dust trapped under them.
  • External lights reflecting off the screen.

That's the typical environment for viewing your icon. The pixels don't even come into it!

Think I'm exaggerating? Look for yourself. Count the number of people on your commute who don't have pristine screens. As a bonus, this is my friend's phone:
A modern iPhone. The screen is cracked, it is covered with a dirty screen protector covered in fingerprint smudges.
It hurts to look at, I know. But that's what your icon is typically shown on.

Biology

How far away are people holding their phones? Are their eyeballs up to the screen, or is the phone on their lap while they tap at it?

Visual acuity is complex, and humans come in a variety of visual abilities. Generally:

At absolute best, humans can resolve two lines about 0.01 degrees apart: a 0.026mm gap, 15cm from your face. In practice, objects 0.04mm wide (the width of a fine human hair) are just distinguishable by good eyes, objects 0.02mm wide are not.
Science Focus

The latest iPhone has 458 "pixels-per-inch". That's about 180 pixels per centimetre. The individual pixels are at the limit of what the perfect human eye can see up close and in perfect conditions.

Humans can't see your pixels. Sorry. We're not on 17inch CRT screens at 800x600 any more. Your users simply can't physically distinguish between your fine-tuned icons.

Summary

There is no grid. There never has been. You can align to theoretical pixels - but as soon as the image hits a physical screen, it will be adjusted to best fit reality.

Clip from the film "The Matrix" - a young bald boy is saying "There is no spoon."

An obsession with pixel perfect rendering is futile.

Designers aren't bad people. They're not stupid, mendacious, or wasteful. But they can be unreasonably obsessed with perfection.

The majority of your users aren't sat in front of a perfectly calibrated, retina mode, well lit, perfectly clean monitor. If they see your design at all, it is through a glass, darkly.

Support this blog

Enjoyed this blog post? You can say thanks to the author in the following ways:

Donate to charity
Give to charity.
Buy me a birthday present
Amazon Wishlist
Get me a coffee
Donate on Ko-Fi.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.