PX to REM Converter
This calculation is based on an adjustable default root font-size of 16 pixels.
Utilize this free online px to rem converter tool to convert any px value to the rem CSS unit equivalent value. In CSS, rem means root em, a unit of measurement that is relative to the font-size of the root HTML element. Rem is commonly used due to its superior scalability when compared to pixels to help ensure consistency of font sizes and spacing throughout UI designs.
1rem equals the font-size of its root HTML element. By default, most browsers use a font-size value of 16px. So, an element with the value 1rem will equal 16px. However, if you decide to change the root font-size of an HTML element, you can simply input your desired root font-size to accurately convert from pixels to rem with this instantaneously bidirectional converter.
PX to REM Conversion Table
| Pixels | REM |
|---|---|
| 1px | 0.0625rem |
| 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 |
| 1920px | 120rem |
How to Convert PX to REM
To convert px to rem you should use the formula rem = px/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 48px to rem, then 48px = 3rem because 48/16 = 3.
PX vs REM
In CSS, the difference between px and rem is that px is a scalable unit of absolute length which is normatively defined as being exactly 1/96th of 1 inch. While rem an abbreviation of root-em, is a unit of measurement that is relative to the font-size of the root HTML element.
However, the problem with using px, is that it can create accessibility barriers such as improper font-size scaling in browsers. Therefore, it is ideal to use rem as it is scalable.
REM vs EM
In CSS, the difference between rem and em is that rem is a unit of measurement relative to the font-size of the root HTML element. While em is a unit of measurement relative to the font-size of the parent HTML element.
Though both rem and em are relatively scalable units of size, if the font-size of a particular parent HTML element is changed, child elements using em units within that parent HTML container will be affected, while those using rem units will not be affected. Therefore, it is ideal to use rem in most cases because of its simplicity, consistency, and predictability when compared to em.
