De px a em ( y mucho más )
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