CSS Pixel sizes reveal the distance manufacturers think you should hold a device
I’ve been thinking about writing a post about this for a while, but I didn’t have the right visualisation. Unfortunately my design skills weren’t up to the task, but I just came across a great article from iA that demonstrates what I was thinking:
The article talks about typography being dependant on viewing distance, and at closer (typical) viewing distance the smaller text on the iPhone actually matches a desktop.
This is the same point I was making about CSS pixels: The unit manufacturers use to define how their browser renders website sizes.
For example, the iPad mini has a CSS pixel width of 768px (in portait), the same as the larger iPad with retina display, even though they are different sizes and different pixel densities.
What I would like to add is some Maths. (Or ‘Math’ if you’re from the US):
As the size of a CSS pixel is based on an angle, we can work out how far away the device should be held.
Working out the intended viewing distance was relatively straightforward, once I revised a little school level trig:
|Device||CSS PPI||Intended viewing distance (m)|
|Macbook Pro 15″||110||0.61|
|Trad Desktop (96 DPI)||96||0.71|
|32″ TV with Xbox IE||32.4||3.5|
Putting that into a graph shows a smooth line, as you would expect from maths based on an angle:
So to answer the question in the title, you should hold the iPad mini 41cm away from your eye, and the large iPad 51cm.
Does that seem right to you?