Px to REM Converter
If you are a web developer or designer you’re probably familiar with the concept of CSS units.
One of the most commonly used units is the pixel (PX). But as the requirements of responsive design arise, it becomes important to use scalable units like REM instead of PX.
In this post, we’ll explore in detail PX and REM units and show you how you can convert between them using a simple formula. Also, to make the process smooth, we have added a free PX to REM converter above.
What is a Pixel (PX) Unit?
A pixel is the smallest unit of an image that can be displayed on a screen. In web development, pixels are used to define the size of an element on a web page.
One pixel is equal to one dot on a computer screen. The size of a pixel is not fixed, and it can vary depending on the device’s screen resolution.
Pixels are commonly used to define the size of images, fonts, and other elements on a web page. When you set the font size of an element to 16px, it means that the text will be displayed in 16 pixels on the screen.
What is a Root Em (REM) Unit?
REM is a relative unit of measurement that is used in CSS to define font sizes and other styles. Unlike pixels (px), REM units are relative to the root element of the document.
The root element is the HTML element, which is the top-level element of the document. By default, the font size of the root element is 16px. This means that 1rem is equivalent to 16px.
If you change the font to the root element’s size, all the document’s REM units will be adjusted accordingly.
Conversion Tables
Here are the conversion tables.
PX to REM
| PX | REM |
|---|---|
| 1 px | 0.0625rem |
| 2 px | 0.125rem |
| 3 px | 0.1875rem |
| 4 px | 0.25rem |
| 5 px | 0.3125rem |
| 6 px | 0.375rem |
| 8 px | 0.5rem |
| 10 px | 0.625rem |
| 12 px | 0.75rem |
| 14 px | 0.875rem |
| 15 px | 0.9375rem |
| 16 px | 1rem |
| 18 px | 1.125rem |
| 20 px | 1.25rem |
| 24 px | 1.5rem |
| 25 px | 1.5625rem |
| 28 px | 1.75rem |
| 32 px | 2rem |
| 36 px | 2.25rem |
| 40 px | 2.5rem |
| 44 px | 2.75rem |
| 48 px | 3rem |
| 50 px | 3.125rem |
| 56 px | 3.5rem |
| 64 px | 4rem |
| 72 px | 4.5rem |
| 75 px | 4.6875rem |
| 80 px | 5rem |
| 90 px | 5.625rem |
| 100 px | 6.25rem |
REM to PX
| REM | PX |
|---|---|
| 0.01rem | 0.16px |
| 0.03rem | 0.48px |
| 0.05rem | 0.8px |
| 0.08rem | 1.28px |
| 0.1rem | 1.6px |
| 0.15rem | 2.4px |
| 0.2rem | 3.2px |
| 0.5rem | 8px |
| 1rem | 16px |
| 2rem | 32px |
| 3rem | 48px |
| 4rem | 64px |
| 5rem | 80px |
| 6rem | 96px |
| 8rem | 128px |
| 10rem | 160px |
| 15rem | 240px |
| 20rem | 320px |
| 30rem | 480px |
| 40rem | 640px |
| 50rem | 800px |
| 60rem | 960px |
| 80rem | 1280px |
| 100rem | 1600px |
Note: The default browser font size is assumed to be 16px.
How to Convert PX to REM in CSS?
When it comes to responsive web design, using relative units like REM (Root Em) is a good practice.
To convert PX to REM, you need to know the base font size of your document, which is typically 16px (the default size for most browsers).
Why Convert to REM?
- Flexibility: REM units help your website look good on all devices. If someone changes their browser settings, your site will still look great.
- Accessibility: REM units make your website easier to read for people who need larger text.
Formula to Convert PX to REM
To convert from PX to REM simply divide the pixel value by font size usually it is 16 px.
Rem Value = Pixel Value / Font Size
For example, if you want to convert 12 px to REM assuming font size 16 px:
Rem value = 12 / 16 = 0.75 rem
Also, if you want to convert REM into pixels, you can use the following formula:
px = rem * base font size
Read Further: How to Add Custom CSS in Elementor for Free [4 Methods]
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
- SAVE MAXIMUM THIS BLACK FRIDAY
