In defence of pixels

In defence of pixels:
I keep reading recommendations for using EMs or other typographical units for layout, which I still don’t understand. At best it is an extra layer of abstraction, at worst it is misleading and likely to cause more issues than it solves. I will try to demonstrate why CSS is the best relative unit.

EMs for layout

A recent example is an article by Steve Hickey on EMs for layout in my favourite web-design & dev magazine .net (ok, I may be biased as I also write for them!).
I struggle with the positive reasons for using EMs for layout though:

using pixels as a measurement unit messes up zooming for users who require it because it declares your font-size in units that are locked to a physical property of your screen.

That hasn’t been an issue since IE6, all browsers now default to a zoom mechanism which increases the size of all elements on the page. With the exception of a glaring Webkit bug, zoom and pixel-based media queries work very well for accessibility in IE and Firefox.
Also, what is wrong with using a unit that is a property of your screen?
As far as I can tell, browsers have to convert EMs (and other units) into CSS pixels anyway, so using EMs simply adds another layer of abstraction. It makes sense for managing CSS when relatively sizing your text, but not for layout.

it’s more theoretically pure to use ems for measuring type because it’s a typographic measurement, and if you’re already defining your content parameters in a typographic unit of measurement and proportion, it makes sense to apply the same idea across the rest of your layout as well.

It might be theoretically pure to use a typographic measurement for typography, but that doesn’t mean it transfers to layout. Making the layout relative to the device makes a lot more sense to me, i.e. percentages or pixels. That way the layout can flex to the resolution of the screen, whereas EMs may not be relative to the screen.

Hi PPI devices

Think about the difference between and iPhone 3 and iPhone 4 (“retina”) display. The iPhone 4 literally has 4 times the pixels (double height and double width) compared to the previous versions, making it a high PPI device.
If “a pixel is a pixel”, regular text would be unreadable. Therefore Apple doubles the width and height of everything on the screen, so it looks the same size (but sharper).
Engadget posted some pictures of the difference at the release of the iPhone 4:

In browser terms you do this using “CSS pixels”, where a CSS pixel can be bigger or smaller than the “device pixel”.
Talking about the future, Steve Hickey says we should move away from pixels:

instead of thinking in an abstract measurement system of device pixels, why don’t we just fall back to real-world measurements? And as luck would have it, we already have a basis for this system: points and ems.

But this misses a vital point about screen devices – variable viewing distance.
The W3C spec uses a CSS reference pixel to allow CSS pixels to vary by device based on viewing distance:

Without the abstraction layer of CSS pixels, text readable on your phone (e.g. 0.5cm high) would be unreadable on a desktop or TV device.

How many CSS pixels per inch?

I did a few tests to see what various devices would report as their CSS pixel-width. Then I divided the device pixel width by CSS pixel width to get the ratio. Then I divided the PPI by the ratio to get CSS pixels per inch (CSS PPI).
A lower CSS PPI will make page elements look bigger.

Device	Device pixels	CSS pixels	Device PPI	Ratio	CSS PPI
Phones and small tablets
iPhone 3GS	480×320	480	163	1	163
iPhone 4S	960×640 (614,400)	480	326	2	163
Galaxy Nexus	1280×720	598	316	2.14	147.7
Nexus 7	1280×800	966	216	1.33	162
Pad mini	1024×768	1024	163	1	163
Large Tablets
iPad 1 / 2	1024×768	1024	132	1	132
iPad 3 / 4	2048×1536	1024	264	2	132
Laptops / Desktops
Macbook Air 11	1366×768	1366	135	1	135
Macbook pro 15R	2880×1800	1440	220	2	110
Dell 19″ Monitor	1600×1200	1600	105	1	105
TVs
IE/Xbox on 32″ HDTV	1920×1080	1050	69	1.83	37.7

NB: If you have another device you’d like to add, please do check this page and tell me what the device is and the reported widths are.
You can see that small devices you hold close have a high CSS PPI, and large displays you view from a distance have a smaller CSS PPI. Also, despite the higher resolution of the Macbook Pro 15″ Retina, text is actually bigger on that screen than the 11″ Macbook Air.
I draw three conclusions from this table:

1. Devices in the same category can have wildly different device PPI. Therefore device pixels are not a useful measurement for web design.
2. The CSS PPI decreases relative to the assumed distance of viewing, and each class of device is within a certain range.
   
   Therefore CSS pixels are a useful relative unit across device types.
3. The device PPI does not map easily to the size of the CSS pixel on non-Apple devices. Apple uses a straightforward multiplier, but other devices do not.
   
   Therefore you cannot rely on images that use sizes under 1 CSS pixel.

With various devices out there (and TV possibly being an important one soon), browsers have to render the same content on a sliding scale of different sizes. A pixel is a relative unit, a building block, and it is a vital one so that content can be sized appropriately on different devices.

Be relative – use pixels (or percentages)

Using typographical units for layout works some degree at the moment because browsers convert them to CSS pixels. Using a real-world units like CM or picas would make content on larger screens impossible to read (or massive on small screens).
Using typographical units for some parts of layout (e.g. guttering, spacing between headings and paragraphs) makes sense in terms of managing your CSS rules.
For the main layout though, using a measure that is relative to the screen will work more effectively across devices. Percentages have been the traditional method of doing this, but when using media-queries (that work with pixel sizing), pixels can be just as effective.
Why go through the ‘math’ of converting pixels to EMs only to have the browser convert them back to CSS pixels?

DIGITAL JUICE