How do I convert em to pixels?

Multiply the em value by the base font size. At the default 16px base, 1em = 16px, 1.5em = 24px, 2em = 32px. This tool does the calculation instantly and shows the CSS snippet.

What is the default base font size for em?

Most browsers use 16px as the default root font size. So 1em = 16px unless the parent element has a different font-size set. This tool lets you change the base to match your project.

What is the difference between em and rem?

Em is relative to the parent element font size, so it compounds (1.2em inside 1.2em = 1.44x the root). Rem is always relative to the root font size, so 1.5rem = 24px everywhere if the root is 16px. Use rem for consistent sizing, em for proportional sizing.

How do I convert px to em?

Divide the pixel value by the base font size. For example, 24px / 16px base = 1.5em. Enter the pixel value in the Pixels field and the tool calculates the em value automatically.

Why should I use em instead of px in CSS?

Em units scale with user font size preferences, improving accessibility. If a user sets their browser font size to 20px, em-based layouts adjust automatically while px-based layouts stay fixed. Em is also useful for component-level proportional spacing.

What are common em values for headings?

Typical heading sizes: h1 = 2em-3em (32-48px), h2 = 1.5em-2.5em (24-40px), h3 = 1.25em-2em (20-32px), h4 = 1.125em-1.75em (18-28px). Body text is 1em (16px). These values assume a 16px base font size.

Back

Em to Px Converter

Em is a relative CSS unit based on the parent element font size. To convert em to pixels, multiply by the base font size: px = em x base. At the browser default of 16px: 1em = 16px, 1.5em = 24px, 2em = 32px. To convert px to em, divide: em = px / base. Example: 24px / 16 = 1.5em. Rem works the same but is always relative to the root element.

Convert between em and pixels (px) for CSS. Set any base font size (default 16px). Bidirectional conversion, live font size preview, CSS snippet output, common em values reference table with heading sizes. Free, instant, no signup.

Works OfflineDark ModeNo Ads

Converter

Base font size:

1em = 16px (base font size)

Pixels (px)

16px / 16 = 1em

CSS Snippet

/* 1em = 16px (base: 16px) */
font-size: 1em;
/* equivalent to: font-size: 16px; */

Font Size Preview

The quick brown fox jumps over the lazy dog.

Rendered at 16px (1em with 16px base)

Quick Presets

Common Em Values Reference

Em	Pixels (16px base)	Points	Common Use
0.25em	4px	3pt	Micro spacing
0.5em	8px	6pt	Small spacing
0.75em	12px	9pt	Medium-small text
1em	16px	12pt	Base / body text
1.125em	18px	13.5pt	Slightly larger text
1.25em	20px	15pt	h6 heading
1.5em	24px	18pt	h5 heading
1.75em	28px	21pt	h4 heading
2em	32px	24pt	h3 heading
2.5em	40px	30pt	h2 heading
3em	48px	36pt	h1 heading
4em	64px	48pt	Display / hero text

How to Use

1
Set the base font size
Choose from common base sizes (12, 14, 16, 18, 20px) or enter a custom value to match your project
2
Enter an em or pixel value
Type an em value in the Em field or a pixel value in the Pixels field — the other updates instantly
3
Preview the font size
See a live preview of sample text rendered at the converted pixel size
4
Copy the CSS snippet
Copy the generated CSS snippet with em and pixel equivalent comments for your stylesheet
5
Use the reference table
Click any row in the common em values table to load that value into the converter

Frequently Asked Questions

How do I convert em to pixels?: Multiply the em value by the base font size. At the default 16px base, 1em = 16px, 1.5em = 24px, 2em = 32px. This tool does the calculation instantly and shows the CSS snippet.
What is the default base font size for em?: Most browsers use 16px as the default root font size. So 1em = 16px unless the parent element has a different font-size set. This tool lets you change the base to match your project.
What is the difference between em and rem?: Em is relative to the parent element font size, so it compounds (1.2em inside 1.2em = 1.44x the root). Rem is always relative to the root <html> font size, so 1.5rem = 24px everywhere if the root is 16px. Use rem for consistent sizing, em for proportional sizing.
How do I convert px to em?: Divide the pixel value by the base font size. For example, 24px / 16px base = 1.5em. Enter the pixel value in the Pixels field and the tool calculates the em value automatically.
Why should I use em instead of px in CSS?: Em units scale with user font size preferences, improving accessibility. If a user sets their browser font size to 20px, em-based layouts adjust automatically while px-based layouts stay fixed. Em is also useful for component-level proportional spacing.
What are common em values for headings?: Typical heading sizes: h1 = 2em-3em (32-48px), h2 = 1.5em-2.5em (24-40px), h3 = 1.25em-2em (20-32px), h4 = 1.125em-1.75em (18-28px). Body text is 1em (16px). These values assume a 16px base font size.