Do you know REM?

Well yeah the band was pretty good. Everybody does hurt at times, can’t argue with that but I’m talking about CSS REMs.

REMs versus EMs in CSS

We’ve seen and heard this a lot and though there are so many great articles about what an REM is versus an EM we thought we would put it into a CodePen and just show you. It’s surprising how many developers are still using EM when we have something so much better.

The Basics

If you attache EM to a font size somewhere then by default CSS will be looking for the default EM size which it will then use to determine everything else. This is 100% acceptable until you start nesting divs, lists, or just about anything you can think of.

Look at this Pen

See the Pen CSS: REM vs EM by Eric Wargo on CodePen.

Notice that there are nested lists 4 levels deep. Why are the nested lists getting bigger each time? Well that is because you are telling to increase the size of 1em each time there is a new <li>. If you switch it to REM instead of just EM for <ul> and <li> then you will see that the list items remain the same size.

The R in REM stands for root which is telling the stylesheet to grab whatever you size was originally set in the html part of the CSS. You can use @mediaqueries to change the size of the fonts with one line of CSS and watch it get activated through every line that calls back to REM.

Hopefully that helped a few people out there in web development land but if its confusing just let us know and we can knock out a killer project for you. We got this covered.