What Are Rem and Em In CSS?

And when to use them.

Photo by Sigmund on Unsplash

When I started learning FrontEnd Development from freecodecamp, the thing that confused me the most was rems and ems and for a long time I did not know what they mean and how to use them.

Freecodecamp excessively used vh and vw as well, but we will talk about it later.

TABLE OF CONTENT
· Types of Length Units in CSS
  ∘ Absolute Length Units
  ∘ Relative Length Units
· ems and rems
  ∘ ems 
  ∘ When to use em?
  ∘ rems
  ∘ When to use rem?
· Takeaway

Types of Length Units in CSS

In CSS, there are two types of length — relative and absolute.

Absolute Length Units

Absolute length units are not relative to anything else and they will always remain the same size. Examples of absolute length units are cm, mm, in, px, etc.

Among these, the only value we commonly use is px (pixels).

Relative Length Units

Relative length units are relative to something else. It can be the size of the parent element’s font or the size of the viewport.

The benefit of using relative units is that the size of the text will scale relative to everything else on the page. Examples of relative…