Cuando está creando una página web, la mayoría de los profesionales recomiendan que cambie 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 diferentes formas en que alguien puede 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 usa ems para los tamaños.
Pero, ¿qué tan grande es un em?
De acuerdo con la 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 sí, en cuyo caso se refiere al tamaño de fuente del elemento principal ".
En otras palabras, los ems no tienen un tamaño absoluto. Toman sus valores de tamaño en función de dónde se encuentran. Para la mayoría diseñadores web, esto significa que están en un navegador web, por lo que una fuente de 1 em de alto tiene exactamente el 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 su tamaño de fuente predeterminado en sus navegadores, pero dado que la mayoría de la gente no lo hace, puede asumir que la mayoría de los navegadores tienen un tamaño de fuente predeterminado de 16px. Asi que la mayor parte del tiempo 1em = 16px.
Piense en píxeles, utilice ems para medir
Una vez que sepa que el tamaño de fuente predeterminado es 16px, puede usar ems para permitir que sus clientes cambien el tamaño de la página fácilmente, pero piense en pixeles para sus tamaños de fuente. Supongamos que tiene una estructura de tamaño similar a esta:
- Título 1: 20 píxeles
- Título 2: 18 píxeles
- Título 3: 16 píxeles
- Texto principal - 14px
- Subtexto - 12px
- Notas al pie - 10px
Puede definirlos de esa manera usando píxeles para la medición, pero cualquiera que use IE 6 y 7 no podrá cambiar el tamaño de su página bien. Por lo tanto, debe convertir los tamaños a ems y esto es solo una cuestión de matemáticas:
- Título 1 - 1,25 em (16 x 1,25 = 20)
- Título 2 - 1.125em (16 × 1.125 = 18)
- Título 3: 1 em (1 em = 16 px)
- Texto principal - 0.875em (16 x 0.875 = 14)
- Subtexto - 0.75em (16 x 0.75 = 12)
- Notas al pie - 0.625em (16 x 0.625 = 10)
¡No olvide la herencia!
Pero eso no es todo lo que hay en ems. La otra cosa que debe recordar es que adquieren el tamaño del padre. Entonces, 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 esperado.
Por ejemplo, puede tener una hoja de estilo como esta:
Esto daría como resultado fuentes de 14px y 10px para el texto principal y las notas al pie respectivamente. Pero si coloca una nota al pie de página 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, ponga lo de arriba CSS y el siguiente HTML en un documento:
Por lo tanto, cuando usa ems, debe ser muy consciente de los tamaños de los objetos principales, o terminará con algunos elementos de tamaño realmente extraño en su página.