REM to PX Converter
This calculation is based on an adjustable default root font-size of 16 pixels.
Use this free online rem to px converter tool to convert any rem value to the px CSS unit equivalent value. In CSS, a px is a unit of measurement that represents absolute length normatively defined as being equivalent to 1/96th of an inch.
Most browsers use a defualt font-size value of 16px. This means 1rem is equivalent to 16px by default. But, if you decided to change the defualt root font-size value, you can easily input your changed root font-size to accurately convert from rem to px using this instantaneously bidirectional converter.
REM to PX Conversion Table
| REM | Pixels |
|---|---|
| 0.0625rem | 1px |
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
| 6rem | 96px |
| 8rem | 128px |
| 10rem | 160px |
| 11rem | 176px |
| 12rem | 192px |
| 13rem | 208px |
| 14rem | 224px |
| 16rem | 256px |
| 20rem | 320px |
| 30rem | 480px |
| 36rem | 576px |
| 48rem | 768px |
| 50rem | 800px |
| 60rem | 960px |
| 62rem | 992px |
| 64rem | 1024px |
| 70rem | 1120px |
| 75rem | 1200px |
| 80rem | 1280px |
| 90rem | 1440px |
| 100rem | 1600px |
| 120rem | 1920px |
How to Convert REM to PX
To convert rem to px you should use the formula px = rem * root-font-size(font-size of HTML root element). For example, if the HTML root element font-size is 16px which it is by default and you want to convert 2rem to px, then 2rem = 32px because 2*16 = 32.
REM vs PX
The difference between rem and px is that rem means root-em which is a scalable CSS unit of measurement that is relative to the font-size of the root HTML element. While a px is a CSS unit of absolute length which is normatively defined as being exactly 1/96th of 1 inch.
However, the use of pixels can create accessibility barriers such as not properly scaling the font-size in browsers. This is why it is better to use rem due to it being scalable.
REM vs EM
The difference between rem and em is that rem is a CSS unit of measurement relative to the font-size of the root HTML element. On the other hand, em is a CSS unit of measurement relative to the font-size of the parent HTML element.
Despite both rem and em being scalable and relative units of size, when the font-size of a parent HTML element is changed, child elements utilizing em units within that parent HTML container will be affected, however, those using REMs will not be affected. Therefore, it is better in most cases to use rem becuase of its simplicity, consistency, and predictability when compared to em.
