The Myth of the Pixel Perfect Grid

Terence Eden — Fri, 23 Nov 2018 07:49:40 +0000

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.

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

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:

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.

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. (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.

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: 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: 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.

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.