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.

How to Use PX to REM Converter

Step 1: Enter your base font. It's the font-size you declare on <html> element.
Step 2: Input the pixels (px) value on the PX field that 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

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.