Using REM vs EM for Font Sizes

The Blog › Post by

Breaking The Habit

It's tough to break the habit of using px everywhere to define font-size in your code. Though, if you care about having a flexible and responsive layout, I highly recommend making the jump over to either rem or em. This article goes over the differences between rem and em while discussing which one I prefer and why. I am going into this post with the assumption that you already understand the benefits of moving away from using fixed px values when dealing with fonts.

What Is REM?

The term rem stands for "root em" which is the font-size of the root element. In an HTML document, the root element is the html element, but often times you will define the root font-size in the body of your CSS. Now em on the other hand will use the font size of it's parent class instead of taking the root font-size. This can be best explained by looking at a live example.

Examples in Code

See the Pen Using REM vs EM for Font Size by Alex Bass (@flip4bytes) on CodePen.

Try changing around the html & body font-size value in the codepen to see how EM reacts compared to REM.

Which Is Preferred?

I use rem in just about every instance because it is convenient and flexible to always work from a set base font-size. You also don't have to worry about constantly resetting child elements every time a parent element has a larger font-size. In addition, you can easily update the font-size of the html or body element and the entire site will scale relative to the new font-size. You can then utilize media queries to fine-tune the site on various breakpoints to improve the user-experience on numerous devices and screen sizes. Not to mention, if the user has their default font-size increased due to accessibility settings in the browser, the site will automatically scale to be relative to the user's accessibility settings.

Further Discussion

Updated July 9, 2015

If you would like to evolve your business with usability testing and other online marketing solutions, please contact my company, CyberBytes Inc. at (716) 876-1824 and ask for Alex or visit to get a free quote!