Using Rem and Em units is better than using px.
When we use px, it means that we hardcode the font-size to all of the users. The user can't change the value whatsoever. This actually troubles the user that wants to have a bigger font-size from the default
Rem and Em is a relative unit that many developers use to preserve accessibility.
Rem (root em) stands for "root element's font-size"
Usually, the default root font-size is
16px. So, if we see a font-size that is 1rem, we are looking at 16px
Because Rem means root element's font-size, we can also override the default value by using CSS like this:
Because we changed the root font-size, now
1rem = 20px
We can get the rem value of a pixels by dividing it with 16px. For example, if we want to use a font-size of 20px, we will write
font-size: 1.25rem. Which is 20/16.
Yep, using rem will make the development process longer because we need to calculate the rem value. But this gives some freedom to the user, and we are not messing with the accessibility.
They can change the font-size like this:
Em stands for "parent element's font-size"
Because css is cascading and inheritable, em will inherit font-size value from the parent element. For example, we have a parent div, and p tag inside:
font-size: 0.5rem; // 8px
font-size: 1em; // ??px
p inherit the parent element's font-size, so
1em = 8px. This means, that the
p will have
That kind of confusing right? That's why using em for font-size is not recommended.
Always use REM for font-size to be consistent.
Because of the inheritable, em unit will be helpful for padding and *margin. By using em, we can make the padding and margin scale proportionately
For example, we are making a button. The button can have different font-sizes in mobile and desktop view. We can see the difference between rem and em on this codepen:
As we can see, by using em the padding stays proportionate to the scaling of font-size. Whereas rem has the same padding value on any font-sizes.
For me, usage of rem and em will be very good on the elements that are crucial like font-size, padding, and margin. But, when giving out border-width, I do still use px value because the value we give is so small that it is almost not noticeable if we change the root font-size.
There you go. Try to always use rem for font-size. And utilize the benefit of em for the proportionate padding if you need to.