Equivalencia sencila entre px y em

Es muy común la utilización de medidas relativas, como es el caso de em, en lugar de la utilización de medidas absolutas (como px, cm, mm, pt) al realizar el diseño de una página web. Estas unidades relativas, se adaptan al contenido según un valor dado.

Así por ejemplo, si predefinimos en el documento un tamaño de letra de 16 puntos, y posteriormente utilizamos el valor de 1em, nos estaremos refiriendo al equivalente a 16 puntos, y si por ejemplo indicamos 0.5em obtendremos una equivalencia de 8 puntos.

Pero para facilitar esta conversión, y no tener que estar calculando el valor em que necesitamos en cada momento, podemos utilizar este sencillo truco:

body {font-size: 62.5%;}
p {font-size: 1.4em;}

Bastará con indicar como tamaño de la fuente el porcentaje 62.5%, y así cada vez que queramos indicar un tamaño, podremos utilizar la equivalencia 1em=10px, por tanto en nuestro ejemplo, el contenido de <p> tendrá un tamaño de texto equivalente a 14px.

Facebooktwittergoogle_plus