How to Use Our PX to EM Converter
We designed this tool to be as simple as possible.
- Set Your Base Font Size: The tool defaults to
16px, which is the standard default font size for most web browsers. If your website’s main (body) font size is different (e.g.,18pxor20px), change this “Base Font Size” value first. - Enter Your Pixel Value: In the “PX” box, type the pixel value you want to convert (like
24,30, or any other number). - Get Your EM Value: The “EM” box will instantly update to show you the correct EM equivalent.
You can then use the “Copy EM” button to copy the value directly to your clipboard and paste it right into your CSS file. The “Reset” button will clear all fields and set the base size back to 16.
Why Should You Convert PX to EM?
This scalability is the main reason developers love EM units.
- Awesome for Accessibility: Some users set their browser’s default font size to be larger (e.g., 20px instead of 16px) to read more easily. Websites built with EM units will respect this choice and scale the entire layout proportionally. Sites built only with pixels might break or look crowded.
- Easier Responsive Design: Using EMs makes it much easier to scale elements like padding, margins, and font sizes across different screen sizes (desktops, tablets, phones). You can adjust one or two base font sizes, and the rest of your design adapts with them.
How is the PX to EM Conversion Calculated?
The math is straightforward, which is what our tool does for you.
EM = Pixels / Base Font Size
Let’s use the standard 16px base size:
- To convert 24px:
24 / 16 = 1.5 EM - To convert 32px:
32 / 16 = 2 EM - To convert 12px:
12 / 16 = 0.75 EM
This tool simply does this calculation in real-time, saving you the mental energy and letting you focus on what’s important: building a great website.
PX to EM Conversion Table (Base: 16px)
| Pixels (PX) | EM |
| 1px | 0.0625em |
| 2px | 0.125em |
| 4px | 0.25em |
| 8px | 0.5em |
| 10px | 0.625em |
| 12px | 0.75em |
| 14px | 0.875em |
| 16px | 1em (Base) |
| 18px | 1.125em |
| 20px | 1.25em |
| 24px | 1.5em |
| 30px | 1.875em |
| 32px | 2em |
| 36px | 2.25em |
| 48px | 3em |
| 64px | 4em |
| 72px | 4.5em |
Quick Reference for Other Base Sizes
What if your base size isn’t 16px? Here are a few quick conversions for other common base sizes.
Base: 18px
| Pixels (PX) | EM (Approx.) |
| 12px | 0.667em |
| 16px | 0.889em |
| 18px | 1em (Base) |
| 24px | 1.333em |
| 36px | 2em |
Base: 10px (A common “easy math” trick)
| Pixels (PX) | EM |
| 10px | 1em (Base) |
| 12px | 1.2em |
| 14px | 1.4em |
| 16px | 1.6em |
| 24px | 2.4em |