Pixels

CSS Reference Pixel

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

http://www.w3.org/TR/CSS21/images/pixel1.png​

EM

https://en.wikipedia.org/wiki/Quad_(typography)​

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used.

EM in the Web

.teaser {
  padding: 1em;
  background-color: whitesmoke;
}

.teaser__title {
  font-size: 2em;
}

.teaser--huge {
  font-size: 1.5em;
}

USE REM!

http://iwdrm.tumblr.com/post/4933730502

REM makes your design more accessible and gives the control of the websites font size to the user.

You should use pixels and rem. So newer browsers get rem and old browsers fall back to pixels (like WordPress 2012 does).

html {
  font-size: 62.5%;
} 

body {
  font-size: 14px; 
  font-size: 1.4rem; /* =14px */
}

Zoom

http://razzbot.tumblr.com/post/109392382838​

Text Zoom With REM

Chrome

Firefox

Safari

IE9

Text Zoom With PX

Chrome

Firefox

Safari

IE9

CSS Pixel Zoom

Chrome

Firefox

Safari

IE9

Problems with fixed layouts

Responsive CSS Pixel Zoom