Understanding REM Unit In CSS

In this article we will discuss the purpose, advantages and use cases of REM (Root EM) units in CSS layout.

What is rem unit?

rem stands for root em, which is a relative measurement unit that refers to the font-size of the root element of a document.

It is a relative unit, which means all values that use it change when the root's font-size changes. The root element refers to the html element.

1rem means 1 times the root font-size.

if you declare the root's font-size to be 16px (which is the default font size)

html {
  font-size: 16px;
}

then 1rem will interpret it as 16px, 2rem will interpret it as 32px, and so on.

Using rem (or another relative length value) for font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed.

Some users, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment. Using rem you make sure that your text respects these needs, because the font-size is defined relative to the default font-size a user has chosen.

Where to use rem unit?

rem unit provides flexibility in our design. It provides a great opportunity to change the whole site's typography and spacing up and down just by changing the font size in one place in a root element.

We can use this flexibility to make our designs easier to adjust during development, more responsive, and allow browser users to control the overall scale of sites for maximum readability.

So, we conclude that rem is used where we want to make changes in a whole site because it allows us to only change the font size in a single place.

Relative Units vs Absolute Units in CSS

We have mentioned that rem unit is a relative unit, so lets deep dive into CSS unit types, to understand what relative and absolute types mean.

Relative units

Relative units are defined in terms of some other value. These are, for example, REM, EM, VW and VH

REM is defined relative to:

• the font-size of the root(html) element of the webpage
• the font-size of the user's browser appearance settings(by default 16px) if it is not provided in the root element of the webpage

EM is defined relative to:

• the font size of the parent element when the property font-size is concerned.
• the font size of the element itself when we're dealing with other properties like height.

VW stands for 1% viewport width. That is to say that if you define the width property as 10vw, the element will take up 10% of the available viewport's width.

These relative length values have a clear advantage above the absolute ones, because they can help make your website responsive. That is to say, your website automatically adapts to the size of the available screen size, doing so in a predictable way.

Absolute units

Examples of absolute length values are: px (which is 1/96th of an inch), in (an inch) or cm (which is 37.8px or 25.2/64in).

When you use these units you can be sure that they will always be the same size. This is especially useful when you know the exact dimensions of the output, which is mostly with print layouts. But it's not so useful when this is not the case, like with all the different screen sizes out there.

REM accessibility

Google developers make the recommendation to use relative units for font sizes

By using rem you respect the users' decisions about the way they want to browse the web.

REM key points

• rem units are computed into pixel values by the browser, based on font sizes in your design.
• rem units are based on the font size of the HTML element.
• rem units can be influenced by font size inheritance from browser font settings.
• Use rem units that should scale depending on browser font size settings.
• Use rem units on media queries.

REM conversion tables

The rem size is 16px in the following examples

rem converted to different units:

	1rem	10rem	50rem	100rem
px	16px	160px	800px	1600px
pt	12pt	120pt	600pt	1200pt
in	0.167in	1.667in	8.333in	16.667in
pc	1pc	10pc	50pc	100pc
cm	0.423cm	4.233cm	21.167cm	42.333cm
mm	4.233mm	42.333mm	211.667mm	423.333mm

Different units converted to rem:

	1	10	50	100
px	0.063rem	0.625rem	3.125rem	6.25rem
pt	0.083rem	0.833rem	4.167rem	8.333rem
in	6rem	60rem	300rem	600rem
pc	1rem	10rem	50rem	100rem
cm	2.362rem	23.622rem	118.11rem	236.22rem
mm	0.236rem	2.362rem	11.811rem	23.622rem

Conclusion

rem is a relative unit that allows you to define a global font-size, and every other value with the rem unit depends on the global size. If the user changes their default root font size, the rem unit values will also scale accordingly. In the case of fixed values, the user's preference will be ignored.