CSS: Pixel vs REM

CSS has a lot of different units that you can be used. It might be confusing to know which value unit, whether Pixel or REM, is the best fit for our CSS properties.

Let's first clarify some important concepts.

/* Difference between Pixel and REM */

The main difference is that pixels are an absolute unit whereas REM is a relative one.

An absolute length, as defined by the CSS Values and Units Module, is simply a length which is “anchored to some physical measurement”. The physical measurement will either be their actual physical length or the length derived by the reference pixel.

In other words, pixels represent a specific length or height that doesn't "change". So, if you set the font size to 16 pixels, it’s going to be 16 pixels.

REMs, on the other hand, are relative units that are based on the document’s font-size. They stand for "root em", a unit of measurement that represents the font size of the root element.

The document’s default font size is 16 pixels.

So REMs are equal to the computed value of font-size on the root element. When specified in the font-size property of the root element, or in a document with no root element, 1rem is equal to the initial value of the font-size property.

/* Browsers Settings */

It is important to keep in mind that users can modify the browser's default font size on their browser settings and, once any modification is made, our CSS units will respond to the specific browser settings:

• Absolute units will not suffer any change, regardless the user chosen settings.

• Relative units will be flexible, growing as required depending on the default browser settings.

/* Conclusion */

Taking into account the mentioned concepts above as well as:

• Browser settings
• Checking how padding, margin will be affected as well as media queries (check out this interesting article by Zell Liew: PX, EM or REM media queries )

Perhaps whether you should use pixels or REMs has to do with sticking to those unit that works best for you and follow your personal preferences. I've seen developers who just stick to one simple rule/unit (with occasional exceptions) while others will simply combine pixels and REMs depending on the CSS property.

Although REMs might be more accessible for font-size and probably better for media queries, it all depends on how things should scale based on the user’s browser settings,

Feel free to share your thoughts on the above, would like to hear different opinions.

a. 🌺