design & development tools - pixel to rem

PX to REM Converter Online
with Conversion Table

Your Go-to Tool for Converting Pixels to REM (PX to REM) – Free and Easy!

PX ↔ REM Converter

Convert pixels to rem and rem to pixels using your base font size. Perfect for responsive, accessible typography.

Pixels to REM

Example: 12, 16, 24, 32
REM
—
Copied!

Formula: rem = px ÷ base font size

REM to Pixels

Example: 0.75, 1, 1.25, 1.5
Pixels
—
Copied!

Formula: px = rem × base font size

Set your own root font size if it’s different from the default 16px.
Quick presets:

Quick px → rem reference (16px base)

Pixels (px) REM (16px base)
12 px0.75 rem
16 px1.00 rem
20 px1.25 rem
24 px1.50 rem
32 px2.00 rem

Tip: using rem instead of px makes your typography more scalable and accessible. For most projects, a 16px base works well.

Common PX to REM sizes at 16px…

  • 1 px to rem is 0.0625 rem

  • 2 pixels to rem is 0.125 rem

  • 4 px into rem is 0.25 rem

  • 8 pixels to rem is 0.5 rem

  • 10 px to rem is 0.625 rem

  • 12 pixels to rem is 0.75 rem

  • 14px to rem is 0.875 rem

  • 15 pixels to rem is 0.9375 rem

Common Pixels to REM sizes at 96 PPI…

  • 16 px to rem is 1 rem

  • 18 pixels to rem is 1.125 rem

  • 20px to rem is 1.25 rem

  • 22 px to rem is 1.375 rem

  • 24px to rem is 1.5 rem

  • 28 pixels to rem is 1.75 rem

  • 30 px to rem is 1.875 rem

  • 32 pixels to rem is 2 rem

Common PX REM sizes at 96 PPI…

  • 36 px to rem is 2.25 rem

  • 40 pixels to rem is 2.5 rem

  • 48 px to rem is 3 rem

  • 50 pixels to rem is 3.125 rem

  • 56 px to rem is 3.5 rem

  • 60 pixels to rem is 3.75 rem

  • 64 px to rem is 4 rem

  • 72 pixels to rem is 4.5 rem

Common Pixel to REM sizes at 96 PPI…

  • 80 px to rem is 5 rem

  • 90 pixels to rem is 5.625 rem

  • 96 px to rem is 6 rem

  • 100 pixels to rem is 6.25 rem

  • 112 px to rem is 7 rem

  • 120 pixels to rem is 7.5 rem

  • 128 px to rem is 8 rem

  • 160 pixels to rem is 10 rem

The Ultimate Guide to Converting PX to REM...

Need to convert pixel (px) values into scalable REM units for responsive CSS?

Use this free, fast and accurate px to rem converter to convert your spacing, fonts, margins, and paddings — all based on a customizable root font size.

Whether you're designing with Tailwind, Bootstrap, Elementor or pure CSS, REM units are a key part of modern, responsive design systems.

What Are REM Units in CSS?

REM stands for “root em”, and it's a relative unit based on the root <html> element’s font size. Unlike em, which inherits from the parent element, rem is always calculated against the root font size.

Example:

If your root font size is 16px:

  • 1rem = 16px
  • 2rem = 32px
  • 0.5rem = 8px

Why Convert PX to REM?

In responsive web design, using REM units offers several advantages over pixels:

  1. Scalability: REM units are relative to the root font size (typically 16px), making it easy to scale entire designs by changing one value.
  2. Consistency: Unlike EM, which depends on the font size of the parent element, REM ensures that sizes are consistent across all elements of your design.
  3. Accessibility: REM units allow users to adjust font sizes in their browsers without breaking your design, making websites more user-friendly, especially for those with visual impairments.

What Are Pixels (PX)?

Pixels are the smallest unit of measurement on a screen. In web development, they are used to define the size of various elements, such as text, images, and layouts.

For example, if you set a font size to 16px, the text will be rendered 16 pixels tall on the screen.

The issue with using pixels exclusively is that they don’t scale well when dealing with different screen sizes or user settings. This is why developers often prefer REM for responsive designs.

What Are REM Units?

REM (Root EM) is a relative unit in CSS used for sizing elements. REM values are always relative to the root element of your webpage, which is typically the <html> element. By default, the root element has a font size of 16px, so 1rem equals 16px.

For example:

  • 1rem = 16px
  • 2rem = 32px
  • 0.5rem = 8px

If you change the base font size (let’s say from 16px to 20px), all elements sized with REM will adjust accordingly. This gives you a powerful way to ensure your design is responsive.

How to Convert PX to REM: The Formula

Converting PX to REM is quite simple. Here’s the formula:

REM = Pixels / Base Font Size

For example, if you have a button that’s 32px wide and the base font size is 16px, you would convert it like this:

REM = 32px / 16px = 2rem

This means that your button would now be 2rem wide. If you change the base font size later, the button will scale up or down automatically.

PX to REM Conversion Table

Here’s a quick table that shows some common conversions from pixels to REM based on a 16px base font size:

PX
REM
1px
0.0625rem
2px
0.125rem
3px
0.1875rem
4px
0.25rem
5px
0.3125rem
6px
0.375rem
8px
0.5rem
10px
0.625rem
12px
0.75rem
14px
0.875rem
15px
0.9375rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
25px
1.5625rem
28px
1.75rem
32px
2rem
36px
2.25rem
40px
2.5rem
44px
2.75rem
48px
3rem
50px
3.125rem
56px
3.5rem
64px
4rem
72px
4.5rem
75px
4.6875rem
80px
5rem
90px
5.625rem
100px
6.25rem

When to Use REM Instead of PX?

REM units are ideal for responsive design. Here are a few situations where REM is preferred:

  • Scaling across devices: When designing for multiple devices, REM ensures consistent scaling based on the root element’s font size.
  • Accessibility concerns: Using REM allows users with visual impairments to adjust text size without breaking the layout.
  • Global font adjustments: If you decide to change the font size across the entire website, REM allows for easy and consistent updates by just modifying the root font size.

How to Convert REM Back to PX

If you ever need to convert REM back to pixels, it’s easy. Just use the reverse of the formula:

Pixels = REM * Base Font Size

For example, if you have a font size of 2rem and the base font size is 16px:

Pixels = 2rem * 16px = 32px

REM to PX Conversion Table

 Here’s a quick table that shows some common conversions from REM to pixels based on a 16px base font size:

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

 When to Use REM Instead of PX:

  1. Responsive Typography:
    REM is perfect for making font sizes adaptable to different devices. If your goal is to make text easily scalable based on the user’s browser settings, using REM ensures that your typography is flexible and adjusts automatically across screen sizes.

  2. Site-Wide Adjustments:
    By using REM, you can easily scale an entire website’s design by adjusting the base font size in one place (usually the <html> element). This is great for making global design changes with minimal effort.

  3. Accessibility:
    For users who need to increase or decrease font sizes via their browser settings, REM units are a great way to ensure your website remains readable and functional without breaking the layout. REM ensures text and spacing adapt smoothly to user preferences.

  4. Flexible Layouts:
    When designing responsive web pages that need to look great on both mobile and desktop, REM makes your layout more adaptable, allowing elements to resize proportionally based on the root font size.

When to Use PX Instead of REM:

  1. Pixel-Perfect Designs:
    PX should be your go-to for elements that require exact sizing, such as logos, icons, or other graphical elements. If you need absolute precision and want to ensure that the design looks the same across all devices, PX offers consistent and predictable control.

  2. Fixed Layouts:
    When you’re working on a design where scalability isn’t required—such as specific UI components or fixed-size elements—using PX ensures that these elements maintain their exact dimensions, regardless of device or screen resolution.

  3. Precise Control Over Spacing:
    If you’re dealing with complex layouts where spacing between elements must remain constant, PX gives you the precision needed to control margins, padding, and borders, ensuring that no unexpected scaling occurs.

  4. Consistent Design Across Browsers:
    For situations where consistency across all browsers and devices is key, PX guarantees that your design remains uniform, making it especially useful for detailed components that should not scale based on user preferences or screen size.

FAQs

Here are some of the frequently asked questions about conversions…

Using PX allows for greater precision and control when defining the size of elements. For designers and developers working on detailed layouts or components where exact dimensions are critical—such as buttons, logos, or images—PX ensures consistent sizing across all devices.

While REM offers flexibility in responsive designs, PX is often preferred when you need absolute accuracy and consistency, especially for complex elements.

No, REM and EM are not the same. While both are relative units in CSS, REM is relative to the root element’s font size (typically the <html> element), meaning it's consistent throughout the document.

On the other hand, EM is relative to the font size of its parent element, which can lead to cascading size changes if used inside nested elements. REM offers more predictable scaling, making it easier to maintain consistent layouts.

No, Figma does not use REM units directly. Figma is primarily focused on pixel-based design, as it is used to create web and UI designs.

However, you can manually convert pixels to REM when implementing your designs into CSS by using the PX to REM conversion formula. Designers often use pixels in Figma for precision during the design process and convert to REM when coding for responsive layouts.

To convert REM to PX, simply multiply the REM value by the base font size (usually 16px by default in most browsers). For example, if you have 2rem and the base font size is 16px, the conversion would be:

Pixels = 2rem * 16px = 32px
This ensures that the element scales proportionally based on the root font size.

No, REM is not always 16px. REM is relative to the root element's font size. By default, most browsers set the root font size to 16px, but developers can change this in the CSS.

For example, if you set the root element's font size to 18px, 1rem will now equal 18px instead of the default 16px. This flexibility allows you to adjust your entire design by changing just one value in your CSS.

Use PX when you need absolute control over the dimensions of your design elements. In situations where consistency and exact size are crucial—such as designing for fixed layouts, logos, or small UI components—PX guarantees that your elements appear the same across all devices.

While REM is beneficial for responsive typography or flexible layouts, PX is the preferred choice when dealing with precise, non-scalable elements.

Related tools you might find helpful

If you work with CSS, responsive layouts, or UI design, these converters will help you switch between different units quickly.

Each tool solves a specific use case – whether you're adjusting font sizes, spacing, or converting print measurements to screen pixels. Explore the full set below to speed up your workflow…

Complete list of conversion tools

  • PX to CM Converter – Convert pixels into centimeters for print-friendly layouts and accurate sizing.

  • CM to PX Converter – Convert centimeters to pixels when designing for screens or digital assets.

  • PX to REM Converter – Convert pixels to rem for scalable and accessible typography.

  • REM to PX Converter – Convert rem values back to fixed pixel units for precise layout control.

  • PX to Inches Converter – Convert pixels into inches for print sizes or physical measurements.

  • Inches to PX Converter – Convert inches into pixel dimensions based on standard screen density.

  • MM to PX Converter – Convert millimeters to pixels for UI, print, and product mockups.

  • PX to MM Converter – Convert pixels to millimeters with accurate unit mapping.

  • MM to Inches Converter – Convert millimeters into inch values for sizing and print design.

  • Inches to MM Converter – Convert inches into millimeters for exact physical measurements.

  • VW to PX Converter – Convert viewport-width units into pixel values for responsive layouts.

  • PX to VW Converter – Convert pixel values into viewport-width units for fluid UI scaling.