PX to EM conversion made simple

WHAT IS THE TEXT SIZING DIFFERENCE BETWEEN PX, EM, %, PT?

Pixels and points are static measurements. 1 pixel is always 1 pixel. 1 point is always 1 point. Points are a little different because they change size based on DPI. On paper, with its higher DPI, 12 point text is actually more pixels that 12 point text on a computer monitor, which has a lower DPI than paper.

Percent and EMs on the other hand are relative measurements. The size of EM or percent-based text 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.

WHY SIZE YOUR TEXT WITH EMS IN CSS?

Style sheets that use EMs are easier to maintain for the designer and more accessible to end-users.

Style sheets become easier to maintain because all text set in EMs scale to the body font-size. Only one element’s font-size needs to change instead of individually changing the font-size of each element.

Accessibility is increased for end-users because text is scaled based on their preferences rather than set statically in pixels. Additionally, end-users can use hot keys to scale the text in all browsers. Many people have difficulty reading small text on a computer screen.

Select your body font size Conversions based on 12px browser default size

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt

Voila! Your conversions Conversions based on your body font size

Pixels EMs Percent Points
6px 1em 100% 5pt
7px 1.167em 116.7% 5pt
8px 1.333em 133.3% 6pt
9px 1.5em 150% 7pt
10px 1.667em 166.7% 8pt
11px 1.833em 183.3% 8pt
12px 2em 200% 9pt
13px 2.167em 216.7% 10pt
14px 2.333em 233.3% 11pt
15px 2.5em 250% 11pt
16px 2.667em 266.7% 12pt
17px 2.833em 283.3% 13pt
18px 3em 300% 14pt
19px 3.167em 316.7% 14pt
20px 3.333em 333.3% 15pt
21px 3.5em 350% 16pt
22px 3.667em 366.7% 17pt
23px 3.833em 383.3% 17pt
24px 4em 400% 18pt
Pixels EMs Percent Points
6px 0.857em 85.7% 5pt
7px 1em 100% 5pt
8px 1.143em 114.3% 6pt
9px 1.286em 128.6% 7pt
10px 1.429em 142.9% 8pt
11px 1.571em 157.1% 8pt
12px 1.714em 171.4% 9pt
13px 1.857em 185.7% 10pt
14px 2em 200% 11pt
15px 2.143em 214.3% 11pt
16px 2.286em 228.6% 12pt
17px 2.429em 242.9% 13pt
18px 2.571em 257.1% 14pt
19px 2.714em 271.4% 14pt
20px 2.857em 285.7% 15pt
21px 3em 300% 16pt
22px 3.143em 314.3% 17pt
23px 3.286em 328.6% 17pt
24px 3.429em 342.9% 18pt
Pixels EMs Percent Points
6px 0.75em 75% 5pt
7px 0.875em 87.5% 5pt
8px 1em 100% 6pt
9px 1.125em 112.5% 7pt
10px 1.25em 125% 8pt
11px 1.375em 137.5% 8pt
12px 1.5em 150% 9pt
13px 1.625em 162.5% 10pt
14px 1.75em 175% 11pt
15px 1.875em 187.5% 11pt
16px 2em 200% 12pt
17px 2.125em 212.5% 13pt
18px 2.25em 225% 14pt
19px 2.375em 237.5% 14pt
20px 2.5em 250% 15pt
21px 2.625em 262.5% 16pt
22px 2.75em 275% 17pt
23px 2.875em 287.5% 17pt
24px 3em 300% 18pt
Pixels EMs Percent Points
6px 0.667em 66.7% 5pt
7px 0.778em 77.8% 5pt
8px 0.889em 88.9% 6pt
9px 1em 100% 7pt
10px 1.111em 111.1% 8pt
11px 1.222em 122.2% 8pt
12px 1.333em 133.3% 9pt
13px 1.444em 144.4% 10pt
14px 1.556em 155.6% 11pt
15px 1.667em 166.7% 11pt
16px 1.778em 177.8% 12pt
17px 1.889em 188.9% 13pt
18px 2em 200% 14pt
19px 2.111em 211.1% 14pt
20px 2.222em 222.2% 15pt
21px 2.333em 233.3% 16pt
22px 2.444em 244.4% 17pt
23px 2.556em 255.6% 17pt
24px 2.667em 266.7% 18pt
Pixels EMs Percent Points
6px 0.6em 60% 5pt
7px 0.7em 70% 5pt
8px 0.8em 80% 6pt
9px 0.9em 90% 7pt
10px 1em 100% 8pt
11px 1.1em 110% 8pt
12px 1.2em 120% 9pt
13px 1.3em 130% 10pt
14px 1.4em 140% 11pt
15px 1.5em 150% 11pt
16px 1.6em 160% 12pt
17px 1.7em 170% 13pt
18px 1.8em 180% 14pt
19px 1.9em 190% 14pt
20px 2em 200% 15pt
21px 2.1em 210% 16pt
22px 2.2em 220% 17pt
23px 2.3em 230% 17pt
24px 2.4em 240% 18pt
Pixels EMs Percent Points
6px 0.545em 54.5% 5pt
7px 0.636em 63.6% 5pt
8px 0.727em 72.7% 6pt
9px 0.818em 81.8% 7pt
10px 0.909em 90.9% 8pt
11px 1em 100% 8pt
12px 1.091em 109.1% 9pt
13px 1.182em 118.2% 10pt
14px 1.273em 127.3% 11pt
15px 1.364em 136.4% 11pt
16px 1.455em 145.5% 12pt
17px 1.545em 154.5% 13pt
18px 1.636em 163.6% 14pt
19px 1.727em 172.7% 14pt
20px 1.818em 181.8% 15pt
21px 1.909em 190.9% 16pt
22px 2em 200% 17pt
23px 2.091em 209.1% 17pt
24px 2.182em 218.2% 18pt
Pixels EMs Percent Points
6px 0.5em 50% 5pt
7px 0.583em 58.3% 5pt
8px 0.667em 66.7% 6pt
9px 0.75em 75% 7pt
10px 0.833em 83.3% 8pt
11px 0.917em 91.7% 8pt
12px 1em 100% 9pt
13px 1.083em 108.3% 10pt
14px 1.167em 116.7% 11pt
15px 1.25em 125% 11pt
16px 1.333em 133.3% 12pt
17px 1.417em 141.7% 13pt
18px 1.5em 150% 14pt
19px 1.583em 158.3% 14pt
20px 1.667em 166.7% 15pt
21px 1.75em 175% 16pt
22px 1.833em 183.3% 17pt
23px 1.917em 191.7% 17pt
24px 2em 200% 18pt
Pixels EMs Percent Points
6px 0.462em 46.2% 5pt
7px 0.538em 53.8% 5pt
8px 0.615em 61.5% 6pt
9px 0.692em 69.2% 7pt
10px 0.769em 76.9% 8pt
11px 0.846em 84.6% 8pt
12px 0.923em 92.3% 9pt
13px 1em 100% 10pt
14px 1.077em 107.7% 11pt
15px 1.154em 115.4% 11pt
16px 1.231em 123.1% 12pt
17px 1.308em 130.8% 13pt
18px 1.385em 138.5% 14pt
19px 1.462em 146.2% 14pt
20px 1.538em 153.8% 15pt
21px 1.615em 161.5% 16pt
22px 1.692em 169.2% 17pt
23px 1.769em 176.9% 17pt
24px 1.846em 184.6% 18pt
Pixels EMs Percent Points
6px 0.429em 42.9% 5pt
7px 0.5em 50% 5pt
8px 0.571em 57.1% 6pt
9px 0.643em 64.3% 7pt
10px 0.714em 71.4% 8pt
11px 0.786em 78.6% 8pt
12px 0.857em 85.7% 9pt
13px 0.929em 92.9% 10pt
14px 1em 100% 11pt
15px 1.071em 107.1% 11pt
16px 1.143em 114.3% 12pt
17px 1.214em 121.4% 13pt
18px 1.286em 128.6% 14pt
19px 1.357em 135.7% 14pt
20px 1.429em 142.9% 15pt
21px 1.5em 150% 16pt
22px 1.571em 157.1% 17pt
23px 1.643em 164.3% 17pt
24px 1.714em 171.4% 18pt
Pixels EMs Percent Points
6px 0.4em 40% 5pt
7px 0.467em 46.7% 5pt
8px 0.533em 53.3% 6pt
9px 0.6em 60% 7pt
10px 0.667em 66.7% 8pt
11px 0.733em 73.3% 8pt
12px 0.8em 80% 9pt
13px 0.867em 86.7% 10pt
14px 0.933em 93.3% 11pt
15px 1em 100% 11pt
16px 1.067em 106.7% 12pt
17px 1.133em 113.3% 13pt
18px 1.2em 120% 14pt
19px 1.267em 126.7% 14pt
20px 1.333em 133.3% 15pt
21px 1.4em 140% 16pt
22px 1.467em 146.7% 17pt
23px 1.533em 153.3% 17pt
24px 1.6em 160% 18pt
Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt
Pixels EMs Percent Points
6px 0.353em 35.3% 5pt
7px 0.412em 41.2% 5pt
8px 0.471em 47.1% 6pt
9px 0.529em 52.9% 7pt
10px 0.588em 58.8% 8pt
11px 0.647em 64.7% 8pt
12px 0.706em 70.6% 9pt
13px 0.765em 76.5% 10pt
14px 0.824em 82.4% 11pt
15px 0.882em 88.2% 11pt
16px 0.941em 94.1% 12pt
17px 1em 100% 13pt
18px 1.059em 105.9% 14pt
19px 1.118em 111.8% 14pt
20px 1.176em 117.6% 15pt
21px 1.235em 123.5% 16pt
22px 1.294em 129.4% 17pt
23px 1.353em 135.3% 17pt
24px 1.412em 141.2% 18pt
Pixels EMs Percent Points
6px 0.333em 33.3% 5pt
7px 0.389em 38.9% 5pt
8px 0.444em 44.4% 6pt
9px 0.5em 50% 7pt
10px 0.556em 55.6% 8pt
11px 0.611em 61.1% 8pt
12px 0.667em 66.7% 9pt
13px 0.722em 72.2% 10pt
14px 0.778em 77.8% 11pt
15px 0.833em 83.3% 11pt
16px 0.889em 88.9% 12pt
17px 0.944em 94.4% 13pt
18px 1em 100% 14pt
19px 1.056em 105.6% 14pt
20px 1.111em 111.1% 15pt
21px 1.167em 116.7% 16pt
22px 1.222em 122.2% 17pt
23px 1.278em 127.8% 17pt
24px 1.333em 133.3% 18pt
Pixels EMs Percent Points
6px 0.316em 31.6% 5pt
7px 0.368em 36.8% 5pt
8px 0.421em 42.1% 6pt
9px 0.474em 47.4% 7pt
10px 0.526em 52.6% 8pt
11px 0.579em 57.9% 8pt
12px 0.632em 63.2% 9pt
13px 0.684em 68.4% 10pt
14px 0.737em 73.7% 11pt
15px 0.789em 78.9% 11pt
16px 0.842em 84.2% 12pt
17px 0.895em 89.5% 13pt
18px 0.947em 94.7% 14pt
19px 1em 100% 14pt
20px 1.053em 105.3% 15pt
21px 1.105em 110.5% 16pt
22px 1.158em 115.8% 17pt
23px 1.211em 121.1% 17pt
24px 1.263em 126.3% 18pt
Pixels EMs Percent Points
6px 0.3em 30% 5pt
7px 0.35em 35% 5pt
8px 0.4em 40% 6pt
9px 0.45em 45% 7pt
10px 0.5em 50% 8pt
11px 0.55em 55% 8pt
12px 0.6em 60% 9pt
13px 0.65em 65% 10pt
14px 0.7em 70% 11pt
15px 0.75em 75% 11pt
16px 0.8em 80% 12pt
17px 0.85em 85% 13pt
18px 0.9em 90% 14pt
19px 0.95em 95% 14pt
20px 1em 100% 15pt
21px 1.05em 105% 16pt
22px 1.1em 110% 17pt
23px 1.15em 115% 17pt
24px 1.2em 120% 18pt
Pixels EMs Percent Points
6px 0.286em 28.6% 5pt
7px 0.333em 33.3% 5pt
8px 0.381em 38.1% 6pt
9px 0.429em 42.9% 7pt
10px 0.476em 47.6% 8pt
11px 0.524em 52.4% 8pt
12px 0.571em 57.1% 9pt
13px 0.619em 61.9% 10pt
14px 0.667em 66.7% 11pt
15px 0.714em 71.4% 11pt
16px 0.762em 76.2% 12pt
17px 0.81em 81% 13pt
18px 0.857em 85.7% 14pt
19px 0.905em 90.5% 14pt
20px 0.952em 95.2% 15pt
21px 1em 100% 16pt
22px 1.048em 104.8% 17pt
23px 1.095em 109.5% 17pt
24px 1.143em 114.3% 18pt
Pixels EMs Percent Points
6px 0.273em 27.3% 5pt
7px 0.318em 31.8% 5pt
8px 0.364em 36.4% 6pt
9px 0.409em 40.9% 7pt
10px 0.455em 45.5% 8pt
11px 0.5em 50% 8pt
12px 0.545em 54.5% 9pt
13px 0.591em 59.1% 10pt
14px 0.636em 63.6% 11pt
15px 0.682em 68.2% 11pt
16px 0.727em 72.7% 12pt
17px 0.773em 77.3% 13pt
18px 0.818em 81.8% 14pt
19px 0.864em 86.4% 14pt
20px 0.909em 90.9% 15pt
21px 0.955em 95.5% 16pt
22px 1em 100% 17pt
23px 1.045em 104.5% 17pt
24px 1.091em 109.1% 18pt
Pixels EMs Percent Points
6px 0.261em 26.1% 5pt
7px 0.304em 30.4% 5pt
8px 0.348em 34.8% 6pt
9px 0.391em 39.1% 7pt
10px 0.435em 43.5% 8pt
11px 0.478em 47.8% 8pt
12px 0.522em 52.2% 9pt
13px 0.565em 56.5% 10pt
14px 0.609em 60.9% 11pt
15px 0.652em 65.2% 11pt
16px 0.696em 69.6% 12pt
17px 0.739em 73.9% 13pt
18px 0.783em 78.3% 14pt
19px 0.826em 82.6% 14pt
20px 0.87em 87% 15pt
21px 0.913em 91.3% 16pt
22px 0.957em 95.7% 17pt
23px 1em 100% 17pt
24px 1.043em 104.3% 18pt
Pixels EMs Percent Points
6px 0.25em 25% 5pt
7px 0.292em 29.2% 5pt
8px 0.333em 33.3% 6pt
9px 0.375em 37.5% 7pt
10px 0.417em 41.7% 8pt
11px 0.458em 45.8% 8pt
12px 0.5em 50% 9pt
13px 0.542em 54.2% 10pt
14px 0.583em 58.3% 11pt
15px 0.625em 62.5% 11pt
16px 0.667em 66.7% 12pt
17px 0.708em 70.8% 13pt
18px 0.75em 75% 14pt
19px 0.792em 79.2% 14pt
20px 0.833em 83.3% 15pt
21px 0.875em 87.5% 16pt
22px 0.917em 91.7% 17pt
23px 0.958em 95.8% 17pt
24px 1em 100% 18pt

Custom conversions Here's a calculator for your custom EM needs

PX to EM
EM to PX

Results