Introduction
Well, if you’re a designer or a web developer then you must be aware of rem units. In this article, we will go through the basics of how to use them. First, let's go through the basics for those who are not familiar with “rem” units.
As per the specs, we have two kinds of Distance Units or the Length type:
- The first one is Absolute lengths, in other words the "cm", "mm", "in", "pt", "pc" and "px" units
- The second one is Relative lengths having two subcategories:
- Font-Relative lengths: “em”,”ex”,”ch”,”rem” units
- Viewport-percentage lengths: the "vw", "vh", "vmin" and "vmax" units
For example, observe the following CSS rule.
It specifies that every element in the body will have a font-size of 50 pixels and the Div element will have a font-size of 0.5em, in other words, half of its parent. So, let’s see how it affects your styling in the following example
You can see here that every inside div is inheriting the font-size length from its parent div. Here pixels (“px”) are an absolute length unit whereas “em” is relative. To mitigate this problem the Rem unit has been introduced.
The “rem” unit is for “root em”. What the “em” unit does is, it inherits the length from its immediate parent element and then scale it on the given ratio. This one is not relative to its parent but to the root.
If you just replace the em with rem in the sample CSS rule above and see the changes in the output
OUTPUT
Scaling document elements
You can use rem to scale some elements in a document while leaving others in place. It provides a way to specific lengths as fractions of the root element’s font size. In practical terms, this almost always means the font size of the <html> element. The most obvious use for rem is replacing em to protect inner element font sizes from being changed by outer elements, thus avoiding the classic nested em scaling problem.
Let’s look at how rem works and how it differs from the em unit. An em value is calculated against the font-size of a current element, so boxes sized with it will consequently scale as font sizes are adjusted by the element or its ancestors. Meanwhile, rem is defined as the font-size of the root element. So, all references to rem will return the same value, regardless of the ancestor font size. In effect, rem is a document-wide CSS variable.
Question: Why should you bother?
Answer: Well, let’s say you want to enlarge everything on your site as soon as it exceeds a certain width limit. With everything rem you just set the font-size of the <html> tag to 120% and, magically, everything is 20% bigger. But what to do with everything using px in this case? Good luck with that! Make a media query and overwrite every single element that is supposed to be larger? No way!
Also, it’s a much better option than “zoom” ing since zooming isn't as easy as it looks. By increasing the single "root em" font-size, all our elastic pixels increase!
I hope you find this article useful. Thanks for reading :)