R.I.P. REM Viva CSS Pixel

 Gion Kunz

 Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch

Become a contributor!

Close ad

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

EM

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!

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

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

Thank You!

 Gion Kunz

 Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch