PX TO EM | WEB TOOLS

1. Enter a base pixel size

px

2. Convert

PX to EM

px

or

EM to PX

em

Convert

3. Result

Select your body font size

Conversions based on 16px browser default size

Pixels	EMs	Percent	Points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.500em	50.0%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.750em	75.0%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1.000em	100.0%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14pt
19px	1.188em	118.8%	14pt
20px	1.250em	125.0%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.500em	150.0%	18pt

Voilà! Your conversions

Conversions based on your body font size

Pixels	EMs	Percent	Points
6px	1.000em	100.0%	5pt
7px	1.167em	116.7%	5pt
8px	1.333em	133.3%	6pt
9px	1.500em	150.0%	7pt
10px	1.667em	166.7%	8pt
11px	1.833em	183.3%	8pt
12px	2.000em	200.0%	9pt
13px	2.167em	216.7%	10pt
14px	2.333em	233.3%	11pt
15px	2.500em	250.0%	11pt
16px	2.667em	266.7%	12pt
17px	2.833em	283.3%	13pt
18px	3.000em	300.0%	14pt
19px	3.167em	316.7%	14pt
20px	3.333em	333.3%	15pt
21px	3.500em	350.0%	16pt
22px	3.667em	366.7%	17pt
23px	3.833em	383.3%	17pt
24px	4.000em	400.0%	18pt

Here’s a calculator for your custom EM needs

Generated CSS should make your life simpler

Based on the fantastic Normalize CSS project*

Pixels, EMs, and relative units… oh my!

Daunting, but not quite lions, tigers, and bears thanks to PXtoEM.com

What is an EM?

Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px

For more information visit Wikipedia and Mozilla MDN.

What is the text sizing difference between PX, EM, %, PT?

Pixels and points are static measurements, but commonly used in different mediums. Pixels are used on screens because screens are measured in pixels. Although points can be used on screen, they are the standard in printing because they are a factor of DPI.

Percent and EMs on the other hand are relative measurements. The size of an EM or percentage unit depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels.

How do I convert between PX, EM, %, and PT?

Assuming you aren’t using PXtoEM.com to keep it simple, here are the formulas PXtoEM.com uses.

Note: 16px is used as the body text size in all conversions because that is the browser default. You will change 16px to your base text size.

PX to EM

Formula: size in pixels / parent size in pixels

Example: 12px / 16px = .75em

PX to %

Formula: size in pixels / parent size in pixels * 100

Example: 12px / 16px * 100 = 75%

PX to PT

Formula: size in pixels * (points per inch / pixels per inch)

Example: 16px * (72pt / 96px) = 12pt

EM to PX

Formula: size in EMs * parent size in pixels

Example: .75em * 16px = 12px

EM to %

Formula: size in EMs * 100

Example: .75em * 100 = 75%

is px to em conversion made simple. Choose your body font size in pixels (px)and out comes a complete pixel (px) to em conversion table, making elastic web design with CSS a snap. The once daunting challenge of converting pixels (px) to the elusive em has now been reduced to a booger eating pipsqueak.!

PXtoEM takes it a step further and gives CSS to start with! After you select your body font size, go to "Get CSS" and there you go!

Continue Reading