Cuando construyes una página web, la mayoría de los profesionales recomiendan que el tamaño de las fuentes (y de hecho, todo) con una medida relativa como ems, exs, porcentajes o píxeles. Esto se debe a que realmente no conoce todas las formas en que alguien podría ver su contenido. Y si usa una medida absoluta (pulgadas, centímetros, milímetros, puntos o picas) podría afectar la visualización o la legibilidad de la página en diferentes dispositivos. Y el W3C recomienda que uses ems para tamaños.
¿Pero qué tan grande es un Em?
Según el W3C un em:
"es igual al valor calculado de la propiedad 'font-size' del elemento en el que se utiliza. La excepción es cuando 'em' aparece en el valor de la propiedad 'font-size', en cuyo caso se refiere al tamaño de fuente del elemento padre ".
En otras palabras, ems no tiene un tamaño absoluto. Asumen sus valores de tamaño en función de dónde están. Para la mayoría de los diseñadores web, esto significa que están en un navegador web, por lo que una fuente que es de 1 altura es exactamente del mismo tamaño que el tamaño de fuente predeterminado para ese navegador.
¿Pero qué tan alto es el tamaño predeterminado? No hay forma de estar 100% seguro, ya que los clientes pueden cambiar el tamaño de fuente predeterminado en sus navegadores, pero como la mayoría de las personas no pueden asumir que la mayoría de los navegadores tienen un tamaño de fuente predeterminado de 16px. Así que la mayoría del tiempo 1em = 16px.
Piensa en píxeles, usa ems para la medida
Una vez que sepa que el tamaño de fuente predeterminado es 16px, puede usar ems para permitir a sus clientes cambiar el tamaño de la página fácilmente pero pensar en píxeles para sus tamaños de fuente. Digamos que tienes una estructura de tamaño algo como esto:
- Titular 1 - 20px
- Titular 2 - 18px
- Titular 3 - 16px
- Texto principal - 14px
- Sub texto - 12px
- Notas al pie - 10px
Podría definirlos de esa manera utilizando píxeles para la medición, pero cualquier persona que use IE 6 y 7 no podría redimensionar su página correctamente. Así que debes convertir los tamaños a ems y esto es solo una cuestión de matemática:
- Encabezado 1 - 1.25em (16 x 1.25 = 20)
- Título 2 - 1.125em (16 × 1.125 = 18)
- Encabezado 3 - 1em (1em = 16px)
- Texto principal - 0.875em (16 x 0.875 = 14)
- Sub texto - 0.75em (16 x 0.75 = 12)
- Notas al pie - 0.625em (16 x 0.625 = 10)
¡No olvides la herencia!
Pero eso no es todo lo que hay para ems. La otra cosa que debes recordar es que toman el tamaño del padre. Por lo tanto, si tiene elementos anidados con diferentes tamaños de fuente, podría terminar con una fuente mucho más pequeña o más grande de lo que espera.
Por ejemplo, podría tener una hoja de estilo como esta:
p {font-size: 0.875em; }.footnote {font-size: 0.625em; }
Esto resultaría en fuentes que son 14px y 10px para el texto principal y las notas al pie respectivamente. Pero si coloca una nota al pie dentro de un párrafo, podría terminar con un texto de 8.75 píxeles en lugar de 10 píxeles. Pruébelo usted mismo, coloque este CSS y el siguiente HTML en un documento:
Esta fuente es 14px o 0.875 ems en altura.Este párrafo tiene una nota al pie en él.Si bien esto es sólo un párrafo de pie de página.
El texto de la nota a pie de página es difícil de leer a 10px, es casi ilegible a 8.75px.
Por lo tanto, cuando está utilizando ems, debe estar muy atento a los tamaños de los objetos principales, o terminará con algunos elementos de tamaño muy extraño en su página.
