In this article, I am going to talk about why I prefer rem which is a relative CSS unit over other CSS units. First of all, I like each CSS unit available and this post isn’t going to ask you to ditch them all but there are certain places where you should be using rem and it does the job better. Let’s understand what rem is first.
rem ?rem is a CSS unit which is relative to the font-size of the root element (html tag). The default font-size value for the html element for most modern browsers is 16px which means by default 1 rem equals to 16 px.
em should be avoided?There is another relative unit available in CSS called em which is relative to the font-size of the parent (for typographical properties like font-size) and font size of the element itself (in the case of other properties like width). The reason to not use this could be the compounding effect we get when we have nested elements and each element has a font-size in em units. Such compounding effects can be really painful to maintain but for non-typographical properties it is not relative to parent but to itself thus it is fine and can be used.
See the Pen em Compunding by Rahul Gurung (@gurungrahul2) on CodePen.
px vs em vs rem !One famous debate in web development world has been which is better, the old school px or other relative units em or rem. First of all, comparing relative units with absolute units would be pointless as they have their own uses. Use px when you want fixed width all the time, use rem when you want to have relative unit and use em when you want trouble, just kidding. There can be certain corner cases where you might want to use the em, vh or other units available. Lets talk about why and when you should use rem.
rem?Three major reason why we should stick to rem is:
root elementrem values can be configuredroot elementAs described above, rem is relative to the root element thus it is easy to maintain and great for relative uses. Its hard to break things as relativity is on a single element if it breaks it breaks for all if it works it will work for all which is not the case for em as 1em can mean different font-sizes based on the parent.
When a font-size is described using rem it respects the user’s font size preference. In the current latest Chrome version (96.0.4664.45), this font size preference setting is in Settings -> Appearance -> Font Size. If you are setting your font-size using px then you are basically saying that you don’t care about your users preferences which you should as a responsible developer. Something like em will also respect the user’s preferences because it is also relative to font-size of the element. Use the example below by viewing the output and changing the Font Size from settings mentioned above and see only Font size with rem changes with the settings changed.
See the Pen CSS user preferences by Rahul Gurung (@gurungrahul2) on CodePen.
rem values can be configuredAs already discussed rem is based on the font-size of the root element. Thus we can change that root elements font-size to configure rem. This makes it highly usable as I am going to discuss further.
rem.I usually configure the value of 1rem to be equal to that of 10px which is usually better as you can map things in your head. I am not the inventor of this trick, it has been around since rem came and heres a simple explanation on how we would do that.
Since the font-size of root is 16px, we can change it to 10px by doing a simple calculation:
16 * X = 10
X = 10/16
X = 62.5%
In other words, 62.5% of 16px is 10px. We will use this percent in the root element to configure rem.
See the Pen rem customization by Rahul Gurung (@gurungrahul2) on CodePen.
rem is a great unit to be considered for modern web development. Using rem completely depends on the use cases. If you are complete beginner and want the best out of CSS units. Use px for layouts and images and rem for font size of the text. You will get the best of both world, simple and effective.
CSS, Web Development — Dec 21, 2021
Made with ❤ at Earth.