---
title: "PX to REM Converter Online [FREE]"
url: https://theplusaddons.com/blog/px-to-rem-converter/
date: 2024-07-12
modified: 2026-04-07
author: "Aditya Sharma"
description: "Px to REM Converter Convert 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..."
image: https://theplusaddons.com/wp-content/uploads/2024/07/image-97-1024x536.png
word_count: 758
---

# PX to REM Converter Online [FREE]

## Key Takeaways

- Pixels (PX) are the smallest unit of an image displayed on a screen, with one pixel equal to one dot.
- REM units are relative to the root element of the document, with 1rem typically equivalent to 16px.
- To convert PX to REM, divide the pixel value by the font size, usually 16px.
- Using REM units enhances website accessibility by making text easier to read for users needing larger sizes.

# Px to REM Converter

Convert

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]*](https://theplusaddons.com/blog/add-custom-css-in-elementor/)

![](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg)

##### Do you Manage WordPress Websites?
Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
​

[contact-form-7]

Field LabelSend Me the eBook

## FAQs on PX to REM Conversion

### Why use PX instead of REM?
Using px instead of rem offers precise control over element sizes, ensuring consistent design. This can be useful for specific design elements where exact sizing is crucial
### Are REM and EM the same?
No, rem and em are not the same. REM units are relative to the root element's font size, ensuring consistent scaling across the site. EM units are relative to the font size of their parent element, which can lead to varying sizes depending on the element's hierarchy.
### Does Figma use REM?
No, Figma does not use REM units directly. Figma is a design tool focused on pixels for creating web and UI designs. However, designers can manually convert pixel values to REM for use in CSS when implementing their designs in code.
### How to convert REM to PX?
To convert REM to PX, multiply the REM value by the root element's font size (usually 16px). For example, 2 REM is 32 PX (2 REM * 16px). This conversion helps maintain consistent, scalable designs across different devices.
### Is REM always 16px?
No, rem is not always 16px. Rem units are relative to the root element's font size, which is typically 16px by default in most browsers. However, if the root font size is changed, the value of 1rem will change accordingly.

###

## Frequently Asked Questions

**Q: Why should I use REM instead of PX?**
A: Using REM units provides flexibility for responsive design. They adjust based on the root element's font size, making your website look good on all devices. This is especially helpful if users change their browser settings, ensuring better accessibility.

**Q: How do I convert PX to REM in CSS?**
A: To convert PX to REM, divide the pixel value by the base font size, usually 16px. For example, to convert 12px to REM, you would calculate 12 divided by 16, resulting in 0.75rem.

**Q: What is a Pixel (PX) unit?**
A: A pixel is the smallest unit of an image displayed on a screen. In web development, pixels define the size of elements like images and fonts. The size of a pixel can vary based on the device's screen resolution.

**Q: Are REM and EM units the same?**
A: No, REM and EM are not the same. REM units are relative to the root element's font size, while EM units depend on the font size of the parent element, which can lead to different sizes based on the element's hierarchy.

**Q: Does Figma use REM units?**
A: No, Figma does not use REM units directly. It focuses on pixels for web and UI design. However, designers can manually convert pixel values to REM for use in CSS when implementing their designs.

**Q: Is REM always equal to 16px?**
A: No, REM is not always 16px. REM units are relative to the root element's font size, which is typically 16px in most browsers. If the root font size changes, the value of 1rem will change accordingly.