CSS Unit Converter
Convert between PX, REM, and EM units with configurable root font size.
Result
32
32px
Default is 16px. Many sites use 14px or 18px.
The immediate parent element's font size. Used for EM conversions.
Quick Conversions
Calculation
2rem × 16px (root) = 32px
Convert 2rem to px
This converter calculates the equivalent value of 2rem (REM) in px (Pixels). Use the tool above to adjust the value, change units, or customize your root font size for more accurate calculations based on your site's configuration.
About REM vs Pixels
REM values are relative to the root font size (16px by default), so 2rem = 32px at the standard size. This conversion assumes a 16px root; use the Root Font Size slider above to adjust for a custom base.
When to Use This Conversion
- Converting a design mockup (often in PX) to a CSS-based responsive design using REM or EM.
- Calculating spacing and font scales when migrating from a PX-based codebase to REM-based.
- Understanding EM relationships within nested components.
- Verifying that responsive breakpoint sizes are correct in relative units.
Pro Tips
1. Set Your Root Font Size
If your site uses a non-standard root font size (e.g., 14px or 18px), update the Root Font Size slider for accurate REM conversions.
2. Use REM for Global Sizing
Apply REM to font sizes, line heights, and global spacing. Then adjust the root size in media queries to scale everything responsively.
3. Use EM for Component Padding/Margins
EM ensures buttons, cards, and other components scale proportionally to their own font size, keeping designs consistent.
4. Bookmark This Tool
Save this page in your browser for quick access. The URL updates when you change inputs, so you can share precise conversion examples with your team.