What are EM and REM?

There are a lot of different displays that your site might show up on. From Desktops, tablets, Phones, and more there is no telling where or how your site will be displayed. If you care about your site and how it looks (you should), then you will probably want it to look good across multiple platforms. While word press has a lot of utilities to make this possible, sometimes you have to tweak the sizing of an element and its difficult to provide consistency throughout the web page. This is when its a good idea to use either EM, or REM as a unit alternative to px or %.

EM

EM is the size of the font relative to the container that the font lives in. This means that if you were to make a text box and set the font to 72pt, that 1em would equal 72px. The advantage to scaling the text box’s position off of EM is that wordpress allows for you to set the font for Desktop, Tablet, and mobile versions of sites. So instead of going through and individually setting those values based on how you want them to be spaced, essentially designing the layout 3 separate times, you can just space in relation to the size of the font.

REM

REM is the size of the root (or default) font of the site. The root font size is the default size of the font for paragraphs on the site. Depending on what device you are reading this article on, this paragraph will either be in 12pt (Desktop), 10pt (Tablet), or 8pt (Mobile). I normally use REM because it is definable in the theme customizer.

Final notes

While EM and REM are great tools to have in your Web Development toolbelt, they are not a replacement to using px or %, but rather an alternative. Both px and % still have their places in positioning elements on a page, and should still be considered when thinking about how you want to lay out your site.