Rem vs Em vs Px | When to use these units

Kuldeep

Technology

Published on 30 Apr, 2018

6 min read

Your content is the foundation of your inbound marketing. Miss the point, and you may increase your bounce rate. While the kind and quantity of the content is the key, knowing how to place and organize your content on a website is also important.

In this marketing race, typography is the presentation of your work. Other than your writing style the font type, size, color, bold, italic, everything matters to your end user. Often referred to as an art, it is the science of innovation to keep those eyes glued to the page.

Introduction to rem, em, and px

If you’re familiar with web designing, you would have undoubtedly heard of these terms. The best practice of typography on the web is to use the relative units of rem, em, and px.

Most of the popular frameworks are updating the design with rem or em unit. We have popular Twitter Bootstrap framework 3 which earlier worked on pixels but with Bootstrap 4 now in the market even it has updated its typography with rem/em.

In this article, we will discuss, what exactly are rem, em and px, and how to use them.

What is Rem?

It stands for “Root em”. It is a relative unit of CSS and translated by the browser to pixels (px). When rem is used on the font-size in the root element, it represents its initial value. If we set the font-size:16px of the root <html> element, then font-size of paragraph will be 1rem. This implies that

1rem=16px

If we change the font-size of root element from 16px to 20px, then 1rem would be equal to 20px.

html{
  font-size:16px ; /* it means 16px is equal to 1rem */
}

The font-size of the paragraph here is 1rem. If we want to set font-size as 18px for the paragraph, then we can calculate the font-size as:

html{
  font -size:16px
}

p{
  font-size:1rem;
}

Similarly, we can also calculate the pixels from rem.
Suppose we set the font-size:16px of root HTML element, then we would count it as:

html{
  font -size:16px
}

p{
  font-size:1rem;
}

In case you now want to set font-size:22px in rem of an element, then we can calculate the font-size as,

22px/16px = 1.375rem   /* i.e. equal to 22px.*/

When to Use Rem?

Because the content should adjust to the size of the device, it is important that your font adjusts too.

If we want to keep the font-size responsive to the device, then we must change the root <html> element.
It is always good to create responsive web designs.

html {
  font-size:16px;
  @media only screen and (max-width:991px) {
    font-size:14px;
  }
}

Then font-size automatically will adjust to the screen.

Here's an example:

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="css/style.css">    
  </head>
  <body>
    <div class="outer-wrapper">
      <div class="row">
        <div class="column test-col">
          <h1>This is Heading h1</h1>
          <p>This is Paragraph</p>
        </div>
      </div>
    </div>
  </body>
</html>

This is a very common example of rem.

Now, we can also set the font size for a larger screen.

html {
  font-size: 16px; /* i.e. 1rem */
}

.test-col h1 {
  font-size: 2rem; /* i.e. 32px */
}

.test-col p {
  font-size: 1rem; /* i.e. 16px */
}

If we want to change the font-size of <h1> & <p> in mobile & tablet, then we will change the font-size of the root <html> element.

@media only screen and (min-width:768px) and (max-width:991px)
{
  html {
    font-size: 14px; /* i.e. 1rem in for Tablet screen*/
  } 
}

now the font-size of <h1> & <p> works like this in tablet
.test-col h1 {
  font-size: 2rem; /* i.e. 28px */
}

.test-col p {
  font-size: 1rem; /* i.e. 14px */
}

 @media only screen and (max-width:767px) {
html {
    font-size: 13px; /* i.e. 1rem in for mobile screen*/
  } 
}

now the font-size of <h1> & <p> works like this in mobile

.test-col h1 {
  font-size: 2rem; /* i.e. 26px */
}

.test-col p {
  font-size: 1rem; /* i.e. 13px */
}

What is Em?

Em is a relatively flexible and scalable unit of typography. It is equal to the font-size specified to the parent element. Your browser translates em to pixels. It can turn out to be a tricky part.

The exact value is determined by the font size of the parent element. It gets complicated when we start nesting elements deeply. In such a case we have to multiply all the available values to determine the actual value of the child element.

Let's say we have a <div> element. Inside the <div> we have a <h1> tag and a paragraph <p>.
if we set the font-size:16px of the parent <div>.

div {
  font-size:16px;
}

Then we have the font-size of <h1> as 2em. This means font-size of <h1> element is relative to its parent <div>.

 h1 {
   font-size:2em;   /*default font-size of parent element is 16px*/
 }

p {
   font-size:1em  /* default font-size of parent element is 16px */
}

If we want to set <h1> font-size equal to 30px in em, then we can calculate the font-size in em like this, 30px/16px=1.875em.

What are the uses of Em?

The main problem is that em is relative to the font-size of its parent element. If we want to change the font-size of an element, then we have to change the font-size of its parent element.

By using em, we can create components on the page that respond automatically, should the font size change.

Let's say if we want to change font-size of <h1> in mobile or in tablet,

div {
    font-size:16px;
    @media only screen and (max-width:767px) {
        font-size: 14px;
     }

    h1 {
      font-size: 1em;
       @media only screen and (max-width:767px) {
          font-size: 1em;  /* i.e. 14px */
        }
    }
}

What is Pixel?

Pixel is an absolute and fixed-size unit in CSS. Although the size of a pixel isn’t always the same, the font-size, margin, and padding in pixel(px) remain same for all the screens.

Pixels are easily translatable. For example if we sets the font size 24px to an <h1> element then it is always 24px for all screens and devices.

h1{
  font-size: 24px;
}

p{
  font-size: 18px;
}

And if we set the font size to 18px for a <p> element then it would always be 24px for all screens and devices.

We use the pixels as an absolute unit, and it remains same for all screens.

Depending on the project, the need, and the developer, you can use rem, em, or pixels. But the foremost thing to take into account is who the website is being built for. Once you are familiar with your needs and the final goal, it is easy to decide what to zero in on.