PX to REM Converter
Calculate REM values from pixels based on your root font size
Safe conversion with no data sent to server
Last updated: March 2026
Reference Table
| Pixels (px) | Rem | Em |
|---|---|---|
| 1px | 0.0625rem | 0.0625em |
| 2px | 0.125rem | 0.125em |
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 32px | 2rem | 2em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
What is PX in CSS?
A pixel (px) is an absolute unit in CSS that corresponds to one dot on a screen at standard resolution. Unlike relative units, pixels do not scale with user preferences or parent element font sizes. While pixels provide precise, predictable sizing, they have a critical drawback: if a user increases their browser's base font size for readability, elements sized in px will not respond — potentially making your interface inaccessible to users with visual impairments.
What is REM in CSS?
REM stands for "Root Em." It is a relative CSS unit that scales based on the font size of the root <html>element. By default, most browsers set the root font size to 16px, making 1rem equal to 16px. However, if a user changes their browser's default font size to 20px, then 1rem becomes 20px — and all elements sized in rem scale up automatically. This makes rem the preferred unit for building accessible, user-respectful web layouts.
How to Convert PX to REM
The formula is straightforward: REM = PX ÷ Base Font Size. With the default 16px base: 24px ÷ 16 = 1.5rem. 32px ÷ 16 = 2rem. 12px ÷ 16 = 0.75rem. If your project uses a different root font size (e.g., 10px set via html { font-size: 62.5%; }), divide by that base instead: 24px ÷ 10 = 2.4rem. Our tool lets you set any custom base font size for accurate results.
Why Use REM Instead of PX?
REM units help you build highly accessible and responsive designs. When users change their browser's default font size for readability, layouts built with rem scale proportionally throughout the page. REM also simplifies responsive design: changing just the root font size via a media query scales your entire layout proportionally, without needing to update dozens of individual pixel values. Modern design systems and component libraries almost universally use rem for font sizes, spacing, and layout dimensions.
Common Use Cases
- Converting Figma pixel measurements to rem for accessible CSS implementation
- Setting font sizes, line heights, and letter spacing in rem for scalable typography
- Defining padding, margin, and gap values in rem for consistent spacing systems
- Using the 62.5% root font-size trick (10px base) to make rem math easier: 14px = 1.4rem
- Converting a pixel-based legacy stylesheet to rem for improved accessibility
- Validating that a design's pixel specs translate to clean rem values in Tailwind or your CSS framework
FAQ
What is the default base font size in browsers?
Most browsers default to 16px for the root font size. This means 1rem = 16px, 0.875rem = 14px, and 1.25rem = 20px in a standard setup. Users can override this in browser settings, which is exactly why rem units are preferred for accessibility.
Should I use rem for everything?
Rem is recommended for font sizes and spacing. For borders and very fine details (like a 1px border), px is often more appropriate because you want those to stay at exactly 1px regardless of zoom level. Use rem for layout dimensions and typography, px for fine graphical details.
What is the difference between rem and em?
REM scales relative to the root <html> element font size — globally consistent. EM scales relative to the nearest parent element's font size — can compound when nested. Rem is more predictable; em is useful for component-scoped scaling where you want padding and margins to scale with the component's own font size.
Related Design Tools Tools
HEX to RGB Converter
Instantly convert HEX color codes to RGB format for CSS
RGB to HEX Converter
Instantly convert RGB color values back to HEX format
HEX to Tailwind Color
Find the closest standard Tailwind CSS color corresponding to a HEX value
Image Color Picker
Extract exact colors and generate beautiful palettes from any image