PX to REM Converter

REM, short for root em, is one of the font-relative measurement units commonly used in css. This px to rem converter is a free online tool you can use to convert from px value to its rem equivalent.

How to Use PX to REM Converter?

Step 1:

First, enter your base font. It's the font-size you declare on your root element which is technically, the <html> element. The default font-size for most browser is 16px.

For example, you have font-size: 18px css property declared on the <html>, enter that in the base input field.
Step 2:
Then, enter the pixels (px) value on the input field marked with PX. The value you want to convert to rem (root em).
Step 3:
Press enter key or click the convert button and the result will be displayed on REM field.

Video Tutorial: Convert PX to REM

PX to REM Conversion Table

These are the mostly used px to rem sizes. This is considering that your base font (font-size) is 16px. You can also use the converter above.

PX	REM
`4px`	`0.25rem`
`8px`	`0.5rem`
`12px`	`0.75rem`
`16px`	`1rem`
`20px`	`1.25rem`
`24px`	`1.5rem`
`32px`	`2rem`
`40px`	`2.5rem`
`48px`	`3rem`
`64px`	`4rem`
`96px`	`6rem`
`128px`	`8rem`
`160px`	`10rem`
`176px`	`11rem`
`192px`	`12rem`
`208px`	`13rem`
`224px`	`14rem`
`256px`	`16rem`
`320px`	`20rem`
`480px`	`30rem`
`576px`	`36rem`
`768px`	`48rem`
`800px`	`50rem`
`960px`	`60rem`
`992px`	`62rem`
`1024px`	`64rem`
`1120px`	`70rem`
`1200px`	`75rem`
`1280px`	`80rem`
`1440px`	`90rem`
`1600px`	`100rem`

🌱 What is a Root Element?

The root element is simply the <html> element of the HTML document. It houses all other html tags like <head>, <body>, <main>, <article> among others.

✍️ How to add font-size to root element?

There are three ways you can add the styles in the root element like font-size, I'm just going to quickly enumerate them here:

1. Inline Style

You can add css styles directly into the html element using the style html attribute.

  
   <html style="font-size: 18px;" >

2. Internal Stylesheet

You can also do it inside the <style> tags that should be placed inside the <head> tag.

  
   <head>
      <style>
          html {
            font-size: 18px;
          }
      </style>
   </head>

3. External Stylesheet

This type of adding css styles is commonly used among developers. You create a css file but make sure to add the .css extension like styles.css or else it won't work. Then, inject or link it into your document with a <link> tag which should be placed inside the <head> tag.

Considering you placed the styles.css inside the assets 📁 folder.

  
   <head>
      <link> ret="stylesheet" type="text/css" href="assets/styles.css" </link>
   </head>

Then in your styles.css 📃 file.

  
  html {
    font-size: 18px;
  }

🎯 How to target the root element?

There are a couple of ways to target the root element for adding styles, here are common ways to do it.

1. CSS Element Selector

As what we have been doing, we can target the html by simple using the element selector which is the <html> itself.

  
  html {
    font-size: 18px;
  }

2. CSS ID Selector

We can also do it with an ID selector. Say for example we have an id name called "root-element" attached to our html element like this:

  
  <html id="root-element" >
    ...
  </html>

We can target it with css using that ID selector. To target an id, we just need to add a hashtag (#) before the id name.

  
  #root-element {
    font-size: 18px;
  }

3. CSS Class Selector

The class selector works like an id selector. The key difference between them is that the id name should only be placed in one element, it should not be used as the same name for other elements. However, for class name, it can be used throughout the elements inside the document.

Let's say we have a class of "root-element" attached to our <html> tag like so:

  
  <html class="root-element" >
    ...
  </html>

We can add styles to it by targeting that class, we just have to prefix it with a dot(.) which denotes a class name.

  
  .root-element {
    font-size: 18px;
  }

There is also another way to target the root element, it is by using the:root pseudo-class in CSS. It works the same but this deemed to be of higher specification than using <html> selector.

  
  :root {
    font-size: 18px;
  }

How to Convert PX to REM?

The key to converting a px value to rem is the font-size you declare on <html> element which is also called the root element.

  
    html { 
      font-size: 18px;
    }

Then, you can use the formula and manually compute its rem equivalent.

EM to PX Formula:


          rem =  px / base font

We'll cast one example just so to elaborate the point of the conversion.

Let's say in your root element, you have a font-size: 18px. Then, for any reason, you want to convert a 36 pixels unit into rem.

Using our formula, this will be our output:

  
    rem = 36px / 18px
    rem = 2

Difference Between PX and REM

To know the difference between px (pixel) and rem (root ems), you need first to understand what they are what how they behave.

First off, they are measurements used on screen media or screens on various devices. They are units commonly used to measure lengths in CSS (Cascading Style Sheets).

The difference between them is that px is a fix-size unit. If you say that this font is 16px, it is absolutely 16px wherever you put it. It's just that other devices may display it differently. A 16px font on your computer monitor might be displayed differently on a 16px font on your mobile phone. You get the idea.

However, rem unit is a scalable one. It adopts or shall we say, it is always be relative to the base font. So, what is a base font now? It is the font size you declare on <html> tag.

  
    <style>
      html {
        font-size: 16px;
      }
    </style>

Given you have assigned a base font, when you set sizes on your <main>, <header>, <footer>, <article>, <div>, <nav>, you name it, you can use rem so that you'll have fluid responsive design.

Remember that rem is relative to your base font assigned to HTML element. So, if you say your base font-size is 16px, that means that when you want an <aside> element to have 64px width, you can assign 3rem instead (calculated as 64px / 16px = 3rem). So you can say:

  
    <style>
      aside {
        width: 3rem;
      }
    </style>

In addition, if you can notice, when you don't declare base font-size on your <html> element, fonts just become bold or bigger than the normal. When you declare this style on <html> element, the normal size will be respected by the browser.