Pixel to REM Converter
Enter a pixel value and base font size (default 16px). The converter shows equivalent values in REM, EM, PT, and VW units.
REM:
EM:
Points:
VW (1920px viewport):
PX to REM Converter — Convert CSS Units Instantly
Working with CSS units can be confusing, especially when switching between pixels and relative units like REM and EM. This converter instantly translates pixel values to REM, EM, points, and viewport width (VW) units, helping frontend developers write responsive, accessible CSS.
Modern web development best practices recommend using REM units for font sizes and spacing because they respect user browser settings and scale properly across devices.
How PX to REM Conversion Works
The conversion is based on the root font size of the document. By default, browsers set the root font size to 16px:
REM = Pixel Value ÷ Base Font Size
Example: Convert 24px to REM with a 16px base:
- 24 ÷ 16 = 1.5rem
If the base font size is changed to 10px (a common practice):
- 24 ÷ 10 = 2.4rem
Common PX to REM Conversions
| Pixels | REM (base 16px) | Common Use |
|---|---|---|
| 10px | 0.625rem | Small captions, fine print |
| 12px | 0.75rem | Small text, labels |
| 14px | 0.875rem | Secondary text, metadata |
| 16px | 1rem | Body text (default) |
| 18px | 1.125rem | Large body text |
| 20px | 1.25rem | H4 headings |
| 24px | 1.5rem | H3 headings |
| 32px | 2rem | H2 headings |
| 48px | 3rem | H1 headings |
| 64px | 4rem | Hero text, display |
CSS Unit Comparison
| Unit | Type | Relative To | Best For |
|---|---|---|---|
| px | Absolute | Screen pixel | Borders, shadows, small fixed elements |
| rem | Relative | Root font size | Font sizes, spacing, layout |
| em | Relative | Parent font size | Component-scoped sizing |
| % | Relative | Parent element | Widths, responsive layouts |
| vw | Relative | Viewport width | Full-width elements, fluid typography |
| vh | Relative | Viewport height | Full-height sections, modals |
| pt | Absolute | 1/72 inch | Print stylesheets |
Why Use REM Instead of PX?
- Accessibility: Users who change their browser's default font size will see your text scale properly with REM. PX values ignore this setting.
- Consistency: REM is always relative to the root element, avoiding the compounding effect of EM units in nested elements.
- Responsive design: REM scales uniformly across your entire layout. Change the root font size at a breakpoint and everything adjusts.
- Developer experience: Once you memorize common conversions (e.g., 0.5rem = 8px, 1rem = 16px), REM becomes second nature.
The 62.5% Trick
Many developers set html { font-size: 62.5%; } to make the base font size 10px instead of 16px. This simplifies mental math:
- 1rem = 10px
- 1.4rem = 14px
- 1.6rem = 16px
- 2.4rem = 24px
However, this approach requires setting explicit font sizes on all elements since 10px is too small for default text.
Frequently Asked Questions
What is the difference between PX and REM?
PX (pixels) is an absolute unit that stays the same size regardless of user settings. REM is a relative unit based on the root element's font size (usually 16px). REM is preferred for accessibility because it respects user font size preferences.
What is the default base font size in browsers?
All major browsers default to 16px, meaning 1rem = 16px unless the root font size has been changed via CSS or the user has adjusted their browser settings.
Should I use REM or EM for font sizes?
Use REM for font sizes. REM is always relative to the root element, so it's predictable. EM compounds in nested elements (e.g., 1.2em inside 1.2em inside 1.2em becomes increasingly larger), making it harder to maintain.
When should I still use pixels?
Use pixels for things that should stay the same size regardless of font settings: borders (1px borders), box-shadows, very specific image dimensions, and media query breakpoints.
How do I convert REM back to PX?
Multiply the REM value by the base font size. With a 16px base: 1.5rem × 16 = 24px. With a 10px base (62.5% trick): 1.5rem × 10 = 15px.
Related Tools
- Hex Color Picker — Pick colors for CSS
- Character Counter — Count characters in code
- Base Converter — Convert between number bases
- Aspect Ratio Calculator — Calculate display ratios
- Text Case Converter — Convert text cases for CSS