De px a em ( y mucho más )

facebook-svg gplus-svg twitter-svg

Escoja el tamaño de la caja padre en la tabla de la izquierda, y seleccionalo haciendo clic.
Lee el tamaño correspondiente de los elementos hijos en la tabla de la derecha.

Caja Padre

px em % pt
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

Elementos hijos

px em % pt
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

Las fórmulas:

Una em es una unidad de medida en el campo de la tipografía, que equivale al tamaño de fuente utilizado.
Por ejemplo: si el tamaño de la caja padre es de 16px, 1em = 16px.

Ejemplo:

body{font-syze :16px;}div{font-syze : 12px;}

De px a em:

El tamaño en em = tamaño en px / tamaño en px de la caja padre;
12/16 = 0.75

div {font-syze: .75em;}

De px a %

El tamaño en % = (tamaño en px / tamaño en px de la caja padre) * 100;
(12/16)*100 = 75%

div {font-syze: 75%;}

De px a pt

w3.org no recomienda el uso de pt para el desarrollo web.
72pt = 1 pulgada
96px = 1 pulgada
1px = 72/96pt
Tamaño en pt = tamaño en px * (72/96);
12px * 72/96 = 9pt

div {font-syze: 9pt;}

Una idea desarrollada por Brian Cray