PX to REM converter

Pixelspx

REMrem

Base font size (default 16px):px

Common PX to REM conversions

8px = 0.5rem
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem
20px = 1.25rem
24px = 1.5rem
28px = 1.75rem
32px = 2rem
40px = 2.5rem
48px = 3rem
56px = 3.5rem
64px = 4rem
72px = 4.5rem
80px = 5rem

About PX to REM Conversion

The conversion from pixels (px) to rem (root em) is a common practice in web development, especially for responsive design. The rem unit is relative to the root font-size (usually 16px by default in most browsers), whereas px is an absolute unit. Using rem allows developers to scale the entire layout easily by changing the root font size, making it more flexible and scalable for different screen sizes and devices.

For example, if the base font size is 16px:

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

Formula for PX to REM Conversion

To convert pixels (px) to rem, use the following formula:

rem = px / base font size

For example, if the pixel value is 32px and the base font size is 16px:

rem = 32px / 16px = 2rem

When to Use REM vs PX

Use REM for:

Font sizes
Margins and padding that should scale with font size
Container widths that need to be proportional
Media query breakpoints

Use PX for:

Border widths
Box shadows
Small decorative elements
1px or 2px fine details

Browser Support and Accessibility

REM units are supported in all modern browsers (IE9+) and are recommended for creating accessible websites. Using REM allows users to scale the entire website according to their preferences, which is particularly important for:

Users with visual impairments
Responsive design across different devices
Maintaining proportions when users zoom in/out
Supporting user font-size preferences

Best Practices for Using REM

Set the root font-size (html element) to 62.5% (10px) for easier calculations
Use REM for font-size in combination with em for line-height
Consider using CSS custom properties for flexible base font sizes
Maintain a consistent scale throughout your project
Document your conversion ratios in your styleguide

CSS Implementation Example

html {
  font-size: 16px; /* Base font size */
}

.header {
  font-size: 2rem;    /* 32px */
  margin: 1.5rem;     /* 24px */
  padding: 1rem;      /* 16px */
}

.content {
  font-size: 1rem;    /* 16px */
  line-height: 1.5;   /* Relative to font size */
  margin: 0.75rem;    /* 12px */
}