The Myth of the Pixel Perfect Grid
By @edent
· design NaBloPoMo screens usability · 3 comments · 850 words · read ~4,842 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.
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.
How can I get consistent sizes with physically different monitors on Linux?
Inconsistency is a feature, not a bug
Patricia says:
And there I was!...looking for the perfect grid which would match the pixels, after reading all these amazing and scientific explanations I do understand the impossibility of getting the perfect result.
I´m designing my own prototype in order to get the entire Mac keyboard as perfect as it could possibly get"
Great post, thank you!
I disagree, however not because I feel there is a grid. Years ago yes, it mattered because the raster grid that created these pixels were a very real thing. And when LCD monitors first arrived, we mainly dealt with those square pixels.
But now, there’s a new reason for multiple sizes (that is slowly fading at least), and that’s due to visual clarity. I’ve not once encountered an image that scales from high quality large image to a smaller image and doesn’t blur some detail you want seen. By including multiple SMALLER sizes, you will ensure that whatever detail you want will remain visible at the pixel size that you want. No need for your nice high quality image suddenly being messed up in appearance when it shrinks down to your average thumbnail size. On the flip side, as resolution increases, this will become less and less of an issue because there will be sufficient physical pixels to display the detail even if an image is shrunk down. If anything, I suspect this issue will soon only be delegated to video games and visual apps where clear details are needed over your average icon or web graphic.