PX to REM Converter
Convert pixel values to REM and back instantly. Set any base font size, view a full conversion table, and copy CSS custom properties or a plain-text table for your stylesheet.
PX ↔ REM Converter
Enter a value in either field — both update live based on the base font size.
Pixels (px)
REM
Root font-size CSS
:root { font-size: 16px; }
Common values at base 16px
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
Your data stays in your browser — no data is sent to any server.
What is REM and why use it?
REM (root em) is a CSS unit relative to the font size of the root element (<html>). Because it scales with the user's browser font-size preference, REM is preferred over pixels for typography, spacing, and layout — it makes sites more accessible and easier to maintain. The default browser base is 16px, so 1rem = 16px unless overridden.
The 62.5% trick
Setting :root { font-size: 62.5%; } makes 1rem equal to 10px (62.5% of 16px), which simplifies mental math — 1.6rem = 16px, 2.4rem = 24px, and so on. This tool lets you enter any custom base to preview your layout's rem values at a glance.
How to use
- Set the base font size (default 16px, matching most browsers).
- Type a pixel value — the REM equivalent updates instantly.
- Or type a REM value — the pixel equivalent updates instantly.
- Scroll down to see the conversion table for common sizes.
- Copy the table as CSS custom properties or plain text for your project.
All conversion runs in your browser — nothing is sent to any server.
Frequently Asked Questions
- What is the default browser font size?
- Most browsers default to 16px for the root font size, meaning 1rem = 16px. Users can change this in their browser settings for accessibility, which is exactly why rem is preferred over fixed px values.
- How do I convert px to rem mentally?
- Divide the pixel value by the base font size. With the default 16px base: 24px ÷ 16 = 1.5rem. If you use the 62.5% trick (base = 10px): 24px ÷ 10 = 2.4rem.
- Should I use rem or em?
- REM is relative to the root element and is consistent throughout your document. EM is relative to the nearest parent element, which can compound unexpectedly. REM is generally preferred for font sizes and spacing; EM can be useful for component-scoped sizing.
- Does this tool handle non-integer values?
- Yes. You can enter decimals like 14.5px or 0.875rem and the converter will handle them accurately.