| REM | PX | Use |
|---|---|---|
| 0.5 rem | 8 px | xs spacing |
| 0.75 rem | 12 px | small text |
| 0.875 rem | 14 px | body sm |
| 1 rem | 16 px | body text |
| 1.125 rem | 18 px | body md |
| 1.25 rem | 20 px | h5 / lead |
| 1.5 rem | 24 px | h4 |
| 1.75 rem | 28 px | h3 |
| 2 rem | 32 px | h2 |
| 2.5 rem | 40 px | h1 sm |
| 3 rem | 48 px | display sm |
| 4 rem | 64 px | display lg |
You Might Also Like
REM to PX Converter — Live CSS Unit Calculator Online
About this tool
Free Bidirectional REM to PX Converter
REM to PX Converter is a free bidirectional CSS unit calculator that instantly converts between REM and pixel values with full support for custom base font sizes, a live text preview at the converted size, and a reference table covering the most commonly used values. The REM unit (root em) is a CSS length unit relative to the font-size of the root HTML element — typically 16px by default in all major browsers. Unlike the PX unit, which is an absolute fixed-size value that ignores user preferences, REM scales proportionally when the user changes their browser's default font size, making it the recommended unit for font sizes, spacing, and layout in accessible, WCAG-compliant web design. This converter makes translating between design pixel values and CSS REM values instant. It also supports non-standard base sizes: developers who use the common html { font-size: 62.5% } trick — making 1rem = 10px for easier mental math — can set the base to 10px and get accurate results. The reference table updates all values simultaneously when you change the base size, making it a useful permanent reference for building consistent type scales, spacing systems, and component sizing.
Features
- Bidirectional conversion — type REM to get PX, or type PX to get REM instantly
- Adjustable base font size from 8px to 50px — matches any project configuration
- Quick base size presets — 16px browser default, 10px (62.5% trick), 18px large-text
- Live text preview rendering the exact computed pixel size for visual judgment
- Reference table listing 12 common or 50 full REM values with pixel equivalents
- Reference table updates all rows instantly when the base font size changes
- Click any reference table row to load that value into the converter
- Common / Full table toggle — compact focused reference or complete scale
- Works for any CSS length property — font-size, padding, margin, gap, width
- 100% client-side — no sign-up, no data sent to any server, completely free
How to Use
Set your project's base font size using the Base Font Size input at the top — the default is 16px, which matches the browser default. If your project uses the html { font-size: 62.5% } trick or any other custom root font size, change this value first before converting, as all results update to reflect the correct base. Type a value in the REM input to instantly see the equivalent pixel value in the PX field, or type a pixel value in the PX field to see the REM equivalent. Both inputs convert in real time as you type — no button press required. The live text preview beneath the inputs renders a sample line of text at exactly the computed pixel size so you can visually judge how large or small the value is without needing to mentally estimate. The reference table below lists the most commonly used REM values — from 0.5rem to 4rem — with their pixel equivalents at your current base size. All table values update simultaneously whenever you change the base font size, making the table an accurate live reference for your specific project configuration. Click any row in the reference table to instantly load that REM value into the converter inputs. Use the quick preset buttons — 16px default, 10px, and 18px — to switch between the most common base sizes in a single click. The Common / Full toggle switches the table between a focused set of 12 common values and the complete 50-value reference.
Common Use Cases
Frequently Asked Questions
REM stands for "root em" and is a relative CSS length unit based on the font-size of the root HTML element. 1rem equals the root font-size — by default 16px in every major browser. Unlike the EM unit which is relative to the nearest parent element's font-size and can compound unpredictably in nested structures, REM always refers back to the single root value, making it predictable and easy to reason about across large stylesheets and component trees.
Multiply the REM value by the base font size. With the browser default of 16px: 1rem = 16px, 1.5rem = 24px, 2rem = 32px, 0.875rem = 14px. This tool does the multiplication instantly in both directions as you type, and also updates the entire reference table so you can see the full range of common values at once. Set the base font size input to match your project's root font size before converting to get accurate results.
All major browsers — Chrome, Firefox, Safari, and Edge — default to 16px for the root HTML element's font-size unless the user or the stylesheet overrides it. This means 1rem = 16px out of the box. However, users can change their browser's default font size in settings, which is a critical accessibility feature for low-vision users. When they do, REM-based measurements scale accordingly while PX-based measurements stay fixed.
REM font sizes respect the user's browser font-size preference, which is a critical accessibility feature for low-vision users who increase their browser's default text size. WCAG 2.1 Success Criterion 1.4.4 (Resize Text) requires that text can be resized to 200% without loss of content — using REM satisfies this by default because all REM values scale proportionally. PX font sizes remain absolutely fixed regardless of any browser or system font-size settings, creating accessibility barriers.
Both are relative CSS units, but REM is always relative to the root element font-size (a single stable reference), while EM is relative to the font-size of the nearest parent element. In nested components, EM values compound: if a parent has font-size: 1.2em and a child also has font-size: 1.2em, the child renders at 1.44× the root size. REM avoids this compounding entirely since it always references the root. For font-size values, REM is almost always the better choice; EM is useful for component-relative spacing.
Setting html { font-size: 62.5% } makes the root font size 10px (62.5% of 16px). This makes REM mental arithmetic trivially easy: 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px. It was popular before CSS custom properties became standard. Change this tool's base to 10px to convert accurately for this configuration. Note that body text typically needs to reset to 1.6rem (16px) explicitly when using the 62.5% trick to restore the correct reading size.
Yes. REM works for any CSS length property — padding, margin, gap, width, height, border-radius, line-height, letter-spacing, and more. Using REM for spacing means your entire layout scales proportionally when the user increases their browser font size, which prevents text from overflowing into fixed-size PX containers. Tailwind CSS uses a 4px (0.25rem) base unit for its entire default spacing scale, which is the standard design system approach.
Tailwind's spacing scale is based on 4px increments at the 16px base. Common mappings: space-1 = 0.25rem (4px), space-2 = 0.5rem (8px), space-4 = 1rem (16px), space-6 = 1.5rem (24px), space-8 = 2rem (32px), space-12 = 3rem (48px), space-16 = 4rem (64px). Set the base to 16px in this tool and use the reference table to see the complete Tailwind spacing scale values and their pixel equivalents at a glance.