PX  to  REM Converter

Conversion Guide

1. Determine the base font size (usually 16px). 2. Divide the px value by the base font size. Example: 24px / 16 = 1.5rem.

Conversion Settings
This conversion uses a detected root font size of 16px. Adjust if your design uses a different base size.
Pixels to REM Conversion Table (Root font size: 16px)
PXREMActions
80.5
90.5625
100.625
110.6875
120.75
130.8125
140.875
150.9375
161
181.125
201.25
221.375
241.5
261.625
281.75
301.875
322
342.125
362.25
382.375

Frequently Asked Questions

Basics

What is PX?

A CSS pixel (px) is a standardized unit of measurement that aims to make elements appear at similar physical sizes across different devices. Unlike physical screen pixels, CSS pixels are an abstraction that automatically scales based on device characteristics and user zoom settings.

CSS Pixels (px)1px2px5px10×10px20×20px50×50px1px = One CSS Pixel Unit(Device Independent)
Are CSS pixels the same as physical screen pixels?
No. On high-DPI (Retina) displays, one CSS pixel may actually use multiple physical screen pixels. For example, on a 2x display, 1 CSS pixel equals 4 physical pixels (2x2).
When should I use pixels vs relative units?
Use pixels for precise visual elements that should maintain their exact appearance, like borders (1px), box shadows, and small decorative details. For layout and typography, prefer relative units (rem, em, %) to ensure better accessibility and responsive design.
Do pixel-based layouts work well on mobile?
Fixed pixel layouts often break on mobile devices due to varying screen sizes. It's better to use relative units for layouts to ensure your design adapts smoothly across devices.
What happens to pixel values when users zoom?
CSS pixels scale proportionally when users zoom. If a user zooms to 200%, a 16px font becomes equivalent to 32px, ensuring content remains readable.
Do pixels affect accessibility?
Yes. Using fixed pixel values for text and layout can prevent proper scaling when users change their browser's font size settings. This creates accessibility issues for users who need larger text.

What is REM?

The rem (root em) unit is a relative unit that's always based on the font-size of the root element (html). This makes it powerful for creating consistent, scalable layouts that respect user preferences. Unlike em units which compound in nested elements, rem always refers back to the root font-size.

Root Element (html)font-size: 16px (default)1rem = 16px"Normal text size"2rem = 32px"Twice the root size"0.5rem = 8px"Half the root size"
Why should I use rem instead of pixels?
REM units provide better accessibility by respecting user font size preferences, maintain consistent scaling across the site, and simplify responsive design. Unlike pixels, rem units scale proportionally when users change their browser's font size settings.
How do I calculate rem values from pixels?
To convert pixels to rem, divide the desired pixel value by the root font size (typically 16px). For example: 32px ÷ 16px = 2rem. Many code editors and dev tools can do this calculation automatically.
What's the difference between rem and em units?
While both are relative units, em is relative to the font-size of the current element or its closest parent with a defined font-size. rem is always relative to the root element, making it more predictable for layout and preventing compound scaling issues.
When should I use rem vs em units?
Use rem for consistent spacing, layout and general typography. Use em when you want elements to scale relative to their parent's font size, like padding in buttons or line-height in paragraphs.
How can I debug rem calculations?
Most browser dev tools can show both rem and pixel values. You can also set a more convenient root font-size (like 10px) to make calculations easier: html { font-size: 62.5%; } (making 1rem = 10px)

Conversion

How to convert PX to REM?

To convert PX to REM, use the following formula:

px / root font size