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.