Pixels, EMs, and REMs are pretty popular in the CSS world, but a lot of people cannot distinguish them. Even sometimes web designers, especially the one who just started, get confused and mistaken them with one another. So, in this article we will explain them one-by-one. Without further ado, let us look at the pixels first!
Pixels are the most commonly used unit over the CSS, and the only thing you need to understand is that, if you resize an element as large as 100 pixels, then it’s going to look big and gigantic on your laptop screen. The problem arises with pixels is they are not dynamic. By not dynamic we mean that the objects’ size will stay the same across gadgets. For example, gigantic 100px element on your computer screen will look even bigger when you change to smaller screen such as your mobile screen. When designing responsive websites, designers will use EM or REM because they’re more dynamic.
On the other spectrum, you have EMs which is totally relative to their parents. So for example, let’s say you have a <div> tag and assign 20 px as its size. Later, you define a <p> tag inside the <div> tag, with a size of 2em, it means that it will be twice the size of its parent. In your case would be 2 times 20pixels become 40px. The main drawback of EM is that it can get super messy if you have too much nesting and have defined every tag under every other nested tag into an EM. It’s way too relative to its parent, thus be extra careful while using it!
Now the third unit we will discuss is the REM (short for Root EM). Based on our opinion, REM’s are a lot easier and relative than any other units in CSS. We say that because REM’s are always relative to the root <html> tags. The default size of HTML tags are 16px, so when you define a <h1> tag with a size of 2rem, then it means it has a size of 32px. So, no matter how messy and nested your code is, it will always be relative to the root HTML tag which is 16px by default.
In conclusion, each of those units have their own advantages and drawbacks. As a designer, you should decide which unit is more suitable for the project you working on at the moment. You can use this article as a guide but also be flexible and adapt to the problem in hand.