Confused About REM and EM

REM can be confusing, specially without a solid understanding of its partner EM and their archvillain, the PX.

Relativer Units

Both rem and em are relative units, px is not. Before considering rem, its important to understand the relationship between em, markup and inheritance.

Save lives with EM

Well, maybe not lives, but it will save lines ... if code. The following examples do the same thing; update font sizes are padding within a media query. The initial values are calculated by incrementing 1em( 16px ) at a 1:1.2 ratio. You can choose different ration/scale and calculate your own values on TYPE SCALE.

EM Scale by updating our value Or recalulate every PX value

html{ font-size: 1em; } = html{ font-size: 16px; }

h1{ font-size: 2.074em; } = h1{ font-size: 33px; }

h2{ font-size: 1.728em; } = h2{ font-size: 28px; }

h3{ font-size: 1.44em; } = h3{ font-size: 23px; }

h4{ font-size: 1.2em; } = h4{ font-size: 19px; }

Conclusion

I use em for nearly everything, rem ocasionally for padding or margins, but only in a piinch, and px some times for borders.