Pixel to REM
PX to REM Converter
Use this free tool to easily convert pixels to REM and REM to pixels. Simply remove the default values and start converting. The base font size is typically set to 16px in most browsers. If you’re unsure, it’s best to leave it as is to ensure accurate results.
32px is equal to 2rem (based on 16px)
What is REM unit:
REM (Root EM) is a CSS unit that defines font sizes relative to the root element’s font size. By default, if the root font size is set to 16px, 1rem equals 16px. When the root font size is adjusted, all elements using REM units automatically scale, providing consistency and flexibility in design. For example, if the root font size changes to 20px, 1rem will now equal 20px, causing all REM-based sizes to adjust proportionally. This makes REM ideal for responsive design, ensuring text and layout scale smoothly across different screen sizes and user preferences.
What is PX unit:
PX (Pixel) is an absolute unit of measurement in CSS, representing a single dot on a screen. Unlike REM, pixels have a fixed size and do not adjust based on the screen’s resolution or the browser’s settings. A 1px is always the same size, offering precise control over design elements. While this ensures consistency in fixed layouts, it limits flexibility, making it less ideal for responsive or scalable designs. Pixels are best used for elements that require exact dimensions, such as borders, icons, and pixel-perfect designs.
Why I Recommend REM unit
I personally use and recommend REM over pixels for web design. REM ensures better accessibility and scalability by allowing designs to adapt to users’ browser settings, enhancing readability and overall user experience. Unlike pixels, which are fixed, REM units adjust based on the root font size, making the website more flexible and responsive across different devices and screen resolutions.
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 |