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 it's rem equivalent.

The base refers to the value of your base font. It is a font-size assigned to <html> element's style. Most browsers' default is 16px. Read more about this below.

How to Use PX to REM Converter

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
PX to REM Converter

How to Convert PX to REM

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

html {font-size: 16px}

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

EM to PX Formula:

rem = px / base font

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>
  

So given you assinged 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 becomes bold or bigger than the normal. When you declare this style on <html> element, the normal size will be respected by the browser.