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 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
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
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.
One famous debate in web development world has been which is better, the old school
px or other relative units
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
vh or other units available. Lets talk about why and when you should use
Three major reason why we should stick to
remvalues can be configured
As 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
1em can mean different
font-sizes based on the parent.
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
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.
As 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.
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,
10px. We will use this percent in the root element to configure
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.
Made with ❤ at Earth.