What are Rem units and how to use them in CSS?

When you first start web development, especially HTML and CSS, it’s common to stick with the familiar tools we already know. However, considering the constant growth of the Web, it’s important to stay aware of the challenges and solutions that will arise. When it comes to CSS units of measurement, we often overlook exploring all the available options, limiting our potential. But before we continue, let’s understand the difference between absolute and relative measurements.

Absolute Measurements:

These are the most common units of measurement we encounter in our daily lives. They don’t depend on any other reference unit and are independent measurements. These units are defined by physics, such as pixels, centimeters, meters, and more. Absolute measurements are fixed and don’t change based on device specifications. They are recommended when we fully understand the physical characteristics and display settings of the screens where our projects will be shown.

Relative Measurements:

These are the units of measurement we are not typically accustomed to. They are calculated based on another defined unit, such as “em” and “rem”. These measurements are more suitable when we want to adjust the layout for different devices, ensuring consistency and adaptability across various media. In web design, “em” refers to the current element’s size. If the size of the current/parent element is not defined, the default is usually the browser’s CSS size, which is commonly 16 pixels. “Em” is not only for font size but also a relative unit that can be used to set values for properties like font size, margin, padding, width, height, and line height of an element. On the other hand, “rem” stands for root em. All values are relative to the topmost parent, the html element. If not explicitly set for the html element, the default again is the browser’s CSS, typically 16 pixels.

An important characteristic of these measurements is that they are calculated by the browser based on another unit. This means they are highly flexible and can result in different sizes depending on the environment they are used in. In this article, we will explain what rem units are and how you can effectively use them to style your elements.

REM Units — What Are They?

When styling a web page, we use relative units like “em” and “rem” instead of absolute measurements like pixels (px). Setting font sizes is something you’ll frequently do as a web developer. But sometimes, especially for beginners, it can be a bit tricky. That’s because nowadays, screens come in different sizes and shapes. If we use pixels, the element size remains constant regardless of the screen size. Therefore, using relative units like “em” and “rem” is considered good practice.

REM units, which stand for “root-em,” determine the font size of an element relative to the root element’s size. By default, most browsers use a font size value of 16 pixels. This means that if the root element’s font size is 16 pixels, an element with a value of 1 rem will also be 16 pixels in size. Thus, rem units are useful for scaling CSS elements in relation to the root element’s size, even if you don’t know the default font size.

When is REM a better choice than EM?

Now let’s discuss why you should always use rem instead of em to define the font size of an element in CSS.

Basically, the advantage of using REM is that you can easily adjust the size of all elements relative to the root font by simply changing the root font value in CSS. This is particularly useful in cases of accessibility, where users may need to increase or decrease text size for better readability.

Rem is also great for grids. This unit is not only beneficial for font scaling. For example, you can base an entire grid system or a style library on the root element’s font size using “em” to scale in specific locations. This provides more predictable and scalable font scaling. Additionally, REM won’t change no matter how deeply nested it is, so it’s also a reliable choice for consistent spacing between/around elements.

Please, tell me your thoughts about it.