Responsive Typography Units - Pixels, REM & EM

Date: 11/1/2020, Author: G.P.

The CSS font-size property is used to scale text in the desired size. There are four basic units that someone can use to accomplish that. Pixels,  Points, REM & EM. Which one is better though?

To answer this question let’s start with which is which.


Back in the day we all used to use the Pixel unit. Its role is quite clear. Pixel is a fixed-size unit that adjusts the font to a specific size. One pixel equals one dot in your monitor. That’s it. If you want your text to be smaller, you have to say so (inside multiple media queries for every element separately).


Point unit is very much like pixel unit. It is a fixed unit, used mostly in print media. One point is equal to 1/72 of an inch.


EM is a relative unit (like a percentage). Specifically, em is relative to its nearest parent. This means that if you change the parent then all its children will change automatically.


Root EM is like EM but it is relative only to the (root) html element font-size. So, you only have to remember one value.

Here is an example of em, in a Minor Third typographic scale. Also, we must take into consideration that:

16px = 1em = 100% = 12pt


See the Pen Responsive Typography by Pair Fonts (@pairfonts) on CodePen.


Every unit has its pros and cons. The only thing someone can do is to experiment and find out what unit suits him best.