The CSS3 solution

Since these element problems, or better, unwanted behavior, became known, the geniuses at the W3C worked hard and with the CSS3 specification they evolved and rewrote the em element again. To not cause harm to the innumerable tons of websites coded with the previous specification, they re-released it as a new element, called rem.

Rem stands for Root em, specifying that the element and sizing is indeed tied to the root of your document. No more contextual behavior, no more inherited sizing: every font-size expressed in rems will be resized accordingly to the HTML or body specified one.

To calculate a rem element is simpler: you won't have to remember every container and their sizes- you'll just define the base, divide the next desired values by that and you're good to go!

Let's see an example:

Body { font-size:1em; }

As we know, 1em is equal to 16px. So, having decided, for example, our primary header will be 32px high, the transformation in rems is quite...