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.

Pixels

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).

Points

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

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.

REM

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

responsive-typography

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

Conclusion

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