px ↔ em
Convert CSS pixel (px) values to EM font units with custom base font size.
Seconds ↔ Minutes ↔ Hours Converter
About px ↔ em
The PX to EM / REM Converter converts static pixel (px) values into scalable, responsive EM and REM typography and spacing units with customizable base font sizes (default: 16px) and generated CSS code snippets.
How to Use px ↔ em
Step 1
Enter pixel value in the input box.
Step 2
Set your base font size (default: 16px).
Step 3
View the calculated REM and EM values instantly.
Step 4
Click "Copy CSS" to export.
Practical Use Cases for px ↔ em
Responsive Web Typography & Accessibility
Convert Figma pixel font sizes and margins into responsive REM units that adapt smoothly to user browser zoom settings.
CSS Framework & Design System Token Setup
Standardize design tokens across TailwindCSS, CSS Modules, and styled-components using scalable REM spacing.
Input & Output Examples
Converting 24px Font Size at Base 16px
Pixels: 24px, Base Font Size: 16px
REM: 1.5rem | EM: 1.5em | CSS: font-size: 1.5rem; /* 24px */
Key Features & Performance
- ✓Bidirectional conversion: PX to REM/EM and REM/EM to PX.
- ✓Adjustable Base Font Size (default 16px, customizable from 8px to 32px).
- ✓Interactive PX to REM live conversion reference table (1px to 128px).
- ✓Generates CSS `rem` snippets with pixel fallback comments.
- ✓100% Client-Side calculation.
- ✓1-Click Copy REM code.
Key Terminology & Definitions
REM (Root EM)
A relative CSS length unit relative to the font-size of the root <html> element (usually 16px by default in web browsers).
EM Unit
A relative CSS length unit relative to the font-size of its immediate parent element, which can cause compounding scaling effects when nested.