Font sizes – PX, REM & EM

September 23, 2019

Table of Contents

Pixels

Pixels (px) are what we’ve all become accustomed to over the years. Everyone knows what a pixel is (although the size of a pixel isn’t always the same, but that’s for another day).

So what’s wrong with pixels?

In most browsers, a user can set their default browser font-size to be a different size to the default (typically 16px). If the user sets their default to 20px, all font-sizes should scale accordingly.

However, if the website explicitly sets font-sizes in pixels, a heading set at 30px will always be 30px. That might sound great from a designer/developer point of view – but you’re not the user, stop making websites for yourself.

REMs

REMs are a way of setting font-sizes based on the font-size of the root HTML element. They also allow you to quickly scale an entire project by changing the root font-size (for example at a certain media query/screen size).

Example: html font-size is set to 10px, paragraph is set to 1.6rem – 1.6rem * 10px = 16px.

Setting a root font-size of 10px is the most common scenario when I see people using REMs. It allows for a quick conversion between pixel values to REM values simply by dividing the number by 10.

EMs?

EMs perform initially in a similar way to REMs, until it comes to nesting. For example, take a div with a font-size of 2em, then add a paragraph with a font-size of 2em. The font-size of that paragraph is now 2ems relative to the div. This is what REMs solve – the size always refers back to the root.