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.
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.
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 | 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 |