PX to EM Converter
Convert between PX and EM units with customizable base font size
Live Font Size Preview
Hello
Conversion Reference
1 unit equals how many pixels
px
1
pixels
em
16
pixels
CSS Style Properties
Pixels (px)
h1 {
font-size: 16px;
}Em (em)
h1 {
font-size: 16em;
}About PX to EM Conversion
What is PX?
PX (Pixels) is an absolute unit that represents a fixed size on the screen. It doesn't scale with user preferences or parent elements, making it useful for precise measurements.
What is EM?
EM (em) is a relative CSS unit that is based on the font size of the parent element. It's useful for creating scalable, responsive designs that adapt to parent font sizes and user preferences.
The Conversion Formula
1 EM = Base Font Size (default 16px)
To convert PX to EM: EM = PX ÷ Base Font Size
Unit Conversion Table for PX to EM
| Pixel | EM |
|---|---|
| 4px | 0.25em |
| 8px | 0.5em |
| 12px | 0.75em |
| 16px | 1em |
| 20px | 1.25em |
| 24px | 1.5em |
| 28px | 1.75em |
| 32px | 2em |
| 36px | 2.25em |
| 40px | 2.5em |
| 44px | 2.75em |
| 48px | 3em |
| 52px | 3.25em |
| 56px | 3.5em |
| 60px | 3.75em |
| 64px | 4em |
| 68px | 4.25em |
| 72px | 4.5em |
| 76px | 4.75em |
| 80px | 5em |
| 84px | 5.25em |
How to Convert PX to EM Online
- 1
Enter your pixel value
Type any pixel value into the "From Value" input field. The default is 16px, which is the browser's standard base font size.
- 2
Select your units
Choose PX as the source unit and EM as the target unit, or swap them to convert EM back to PX.
- 3
Adjust the base font size if needed
Click "Show Settings" to change the base font size. Use this when your project's root font size differs from the 16px browser default (e.g., if you set
html { font-size: 62.5%; }, your base is 10px). - 4
Copy the result
Click the Copy button to copy the converted EM value directly to your clipboard and paste it into your CSS.
Common Use Cases for PX to EM Conversion
Responsive Typography
Convert fixed pixel font sizes to EM so text scales proportionally when users change their browser's default font size, improving accessibility and readability.
Component-Level Scaling
Use EM for padding, margins, and dimensions inside UI components so the entire component scales when you change its font size — ideal for button and card components.
Media Queries in EM
Many CSS experts recommend writing breakpoints in EM rather than PX. Convert your pixel breakpoints (e.g., 768px → 48em) for more reliable responsive layouts across browsers.
Migrating Legacy CSS
Modernize older stylesheets by converting hardcoded pixel values to scalable EM units, making the design more flexible and user-preference friendly.
Accessibility Compliance
WCAG guidelines recommend relative units for text. Converting PX font sizes to EM ensures your site respects user-defined browser font size settings.
Design Token Translation
Convert pixel values from design tools like Figma into EM values for CSS design token systems, maintaining consistency between design and code.
Frequently Asked Questions
What is the formula to convert PX to EM?
The formula is: EM = PX ÷ Base Font Size. With the default base font size of 16px, 24px equals 1.5em (24 ÷ 16 = 1.5). If your root font size is different, update the base font size in the Settings panel.
What is the default base font size for EM?
Most browsers use 16px as the default font size, so 1em = 16px by default. However, if your CSS sets a different root font size (e.g., html { font-size: 62.5%; } = 10px), you must use that value as your base.
What is the difference between EM and REM?
EM is relative to the parent element's font size, which can cause compounding when nested. REM (root EM) is always relative to the root HTML element's font size, making it more predictable for global sizing. Use EM for component-level scaling and REM for consistent site-wide sizing.
Should I use PX or EM for font sizes?
Use EM (or REM) for font sizes in most cases. EM units respect the user's browser font size preferences, which is important for accessibility. PX is appropriate for border widths, shadows, and other details that should not scale with font size.
How many PX is 1em?
With the default browser font size, 1em = 16px. Common conversions: 0.75em = 12px, 0.875em = 14px, 1.25em = 20px, 1.5em = 24px, 2em = 32px. Use the reference table on this page for a full list.
Can I use EM for properties other than font-size?
Yes. EM works for any CSS length property including padding, margin, width, border-radius, and line-height. When used for spacing, the EM value is relative to the element's own font size.
Why does my EM conversion look different in my browser?
This usually happens because your CSS sets a custom base font size on html or a parent element that differs from 16px. Open the Settings panel and enter your actual base font size for accurate results.