A veces tenemos líos y no sabemos si usar em o px para designar el tamaño de nuestras fuentes. Yo recomiendo em ya que los píxeles a día de hoy son menos compatibles con los navegadores (Hay una mínima diferencia pero cada navegador suele variar el tamaño del texto con los píxeles). Mientras que con EM esto no ocurre generalmente. Ya publicamos una entrada anteriormente para convertir cualquier unidad absoluta en relativa, pero con esta calculadora que vamos a mostrar a continuación, el proceso será mucho más sencillo.
Esta calculadora es una pequeña herramienta desarrollada en Javascript que nos ayudará a convertir píxeles a unidades em relativas que están basadas en el tamaño del texto dado.
Ver la herramienta EM Calculator.
Actualización: Desde los comentarios, JHMorales nos expone un método recomendado para no liarse al convertir desde px a EM. Consiste en insertar en la etiqueta body este código:
body {
font-size: 62.5%;
}
De esta forma 10px equivaldrá a 1 EM, y a su vez, 1.4 EM equivaldrán a 14px.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
28 tutoriales de poderosos efectos de luz con Photoshop »
40 plantillas CSS y XHTML gratis y de alta calidad »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Speaky (4)
drakkar (3)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
dovercame (2)
Gil Peñaloza (2)
Por ahora hay 6 comentarios ¿Quieres opinar?
en este caso es recomendable hacer el diseño designando, en css en el body, el font-size en 62.5%, que hace equivalente 1em a 10px. De esa manera cuando pones 1.4em es como si pusieras 14px y te ahorras quebraderos de acbeza con cálculos
Muchas gracias por el dato, JHMorales, lo hemos incluido en la entrada.
Un saludo.
Lamento coregiros, en la última línea del post os habéis equivocado, no es 1px sinó 10 px lo que equivale a 1em.
Corregido
a ver… mi concepto sobre el tamaño de la letra era utilizar porcentajes… asi dependiendo la resolucion de un monitor, se ve igual. estoy equivocado?
Deambulante… el porcentage que usas es sobre el valor que hayas establecido al tamaño de la letra. En el caso que mencioné antes (62,5%) se refiere a que el tamaño de fuente será el 62,5% de 16px que es el tamaño estandar que tienen los navegadores para el tamaño “normal” de la fuente que presentarán en pantalla, en caso de que esta no sea definida.
Para definir el tamaño de acuerdo a la resolución de la pantalla necesitas javascript. En este sentido he desarrollado un plugin de jquery que lo he llamado fontReSizer, que se inserta dinámicamente donde tu especifiques y con el que, al abrir la página que lo contiene por primera vez, te calcula el tamaño de fuente de acuerdo al ancho de la resolución que tiene la pantalla. Además puedes cambiar el tamaño que se conserva por cookie para continuar la navegación igual.