PX to REM Converter
Convert pixel values to responsive REM units for modern web design
PX to REM Calculator
The default browser font size is 16px. If you've set a different root font size in your CSS using the html or :root selector, use that value as your base font size.
Conversion Result
Batch Converter
Convert multiple pixel values at once. Enter values separated by spaces, commas, or new lines.
Batch Results
| Pixels | REM | CSS Code |
|---|
Common PX to REM Values
Based on the standard 16px browser default, here are commonly used values:
| Pixels | REM | Common Use Case |
|---|---|---|
| 8px | 0.5rem | Small spacing, borders |
| 12px | 0.75rem | Small text, minor spacing |
| 16px | 1rem | Base font size, standard spacing |
| 20px | 1.25rem | Subheadings, increased spacing |
| 24px | 1.5rem | H3 headings, section spacing |
| 32px | 2rem | H2 headings, large spacing |
| 48px | 3rem | H1 headings, major spacing |
Frequently Asked Questions
REM (Root EM) units are relative to the font size of the root element (html), while EM units are relative to the font size of their parent element.
The key difference is what they're relative to:
- 1rem always equals the font size defined in the root element (typically 16px)
- 1em equals the font size of the parent element
This means REM units are more predictable across your website, as they always reference the same base value. EM units can create a compounding effect when nested elements inherit font sizes.
/* With a root font-size of 16px */
.parent {
font-size: 1.5rem; /* = 24px */
}
.child {
font-size: 1.5em; /* = 36px (1.5 x parent's 24px) */
font-size: 1.5rem; /* = 24px (1.5 x root's 16px) */
}
Using REM units instead of pixels offers several significant advantages:
- Accessibility - REM units respect the user's browser settings. If users change their default font size for better readability, your website will scale proportionally.
- Responsive Design - You can resize your entire layout by changing just the root font size (for example, using media queries for different screen sizes).
- Consistency - REM units help maintain consistent proportions throughout your design, as all elements scale relative to the same base value.
- Easier Maintenance - When all spacing, font sizes, and dimensions use REMs, making global scale adjustments becomes much simpler.
Many modern CSS frameworks and design systems use REM units as their foundation precisely because of these benefits.
To change the base font size for REM units, you need to set the font-size property on the html or :root element in your CSS:
/* Set base font size to 10px for easy calculation */
html {
font-size: 10px;
}
/* Now 1rem = 10px, 1.5rem = 15px, etc. */
A popular technique is to use percentage values, which maintains user browser settings while changing the base size:
/* Set base font size to 62.5% of browser default */
/* 62.5% of 16px = 10px */
html {
font-size: 62.5%;
}
/* Now 1rem = 10px, making conversion easy */
You can also use media queries to change the base font size for different screen sizes:
html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px; /* Smaller base size on mobile */
}
}
While REM units are generally preferred for responsive design, there are situations where pixels might still be the better choice:
- Borders - A 1px border should usually remain 1px regardless of font size. Using REM for very small values can lead to sub-pixel rendering issues.
- Small UI elements - Elements like shadows, outlines, or fine details often look better with fixed pixel values.
- Maintaining exact dimensions - When you need pixel-perfect control that shouldn't scale with font size.
- Media breakpoints - Media query breakpoints are typically defined in pixels (e.g.,
@media (min-width: 768px)) since these refer to device dimensions rather than content scaling.
A good rule of thumb: Use REMs for properties that should scale with font size (margins, paddings, font-size, etc.) and pixels for properties that should remain fixed (borders, shadows, etc.).
The precision of REM values in your CSS depends on your design requirements, but here are some guidelines:
- For most general purposes, 2 decimal places (e.g., 1.25rem) provides sufficient precision.
- When you need to convert exact pixel values, you might use 3-4 decimal places (e.g., 0.4375rem), though this level of precision is rarely necessary.
- Using too many decimal places can make your CSS harder to read and maintain with minimal visual benefit.
Many developers prefer to create a spacing system with standardized increments:
:root {
--space-xs: 0.25rem; /* 4px with 16px base */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-xxl: 3rem; /* 48px */
}
This approach creates a more consistent design system and reduces the need for many different precise values.
REM units are well-supported in all modern browsers, including:
- Chrome, Firefox, Safari, Edge (current and recent versions)
- Internet Explorer 9 and above
- All mobile browsers (iOS Safari, Android Chrome, etc.)
The only significant exception is Internet Explorer 8 and below, which do not support REM units. However, these browsers have very minimal usage today.
If you need to support very old browsers, you can use a fallback approach:
h1 {
font-size: 24px; /* Fallback for older browsers */
font-size: 1.5rem; /* Modern browsers will use this */
}
About REM Units
REM (Root EM) units are relative to the font size of the root (html) element.
1rem equals the font size defined in the root element (typically 16px in most browsers).
Benefits of REM Units
-
Accessibility: Scales with user's browser font settings
-
Consistency: Creates proportional spacing throughout
-
Responsive: Easy to scale all elements by changing root size
-
Modern: Recommended in CSS best practices
CSS Usage Examples
Common ways to use REM units in your CSS:
/* Setting base font size */
html {
font-size: 16px;
}
/* Typography */
body {
font-size: 1rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
/* Spacing */
.container {
padding: 1.5rem;
margin-bottom: 2rem;
}
/* Combined properties */
.card {
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
margin: 1rem 0;
}
Set your base font size in the html element to make all REM units scale proportionally.