What are REMs in CSS and how to do they stack up to EM

CSS REMs for fonts versus EMs

Do you know REM?

REM Music
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.

 

Eric Wargo
Eric Wargo
Eric writes for Sneaker based on his observations and also what he has learned through his experiences and also the current projects he is working on.

2 Comments

  1. Jake Stone says:

    My developer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s trying none the less. I’ve been using Movable-type on a variety of
    websites for about a year and am worried about switching to another platform.
    I have heard great things about DotNetNuke. Is there a way I can import all my WordPress content into it?

    Any kind of help would be really appreciated!

    • Eric Wargo says:

      Well yes you can import everything into DotNetNuke however I would suggest you use a CMS based on what you are comfortable with regardless of what your developers say. We use #WordPress because of how modular and expandable it is.

Leave a Reply

Your email address will not be published. Required fields are marked *