EM y la tipografía sensible

EM y la tipografía sensible

La tipografía es la piedra angular de la web y representa aproximadamente el 95% de todas las cosas web.

 

Em

La manera más fácil y común para asegurar que se mantiene la tipografía responsive es a través del uso de EM.

Una em es una unidad de medida en el campo de la tipografía, lo que equivale al tamaño en puntos especificado actualmente. Em procede de una antigua medida de impresión y era el nombre originalmente de la letra «M». La unidad se expresa como 1 EM o como em 1, y equivale a 16 puntos.

En la web, el uso de EM de la tipografía (y también anchos de los elementos y las preguntas de los medios) se basa en el valor de píxel de la raíz. Esto se hace mediante el establecimiento de la etiqueta HTML o el cuerpo de font-size: 16px; que se alinea con lo que la mayoría de los navegadores fija como el tamaño de fuente predeterminado.

Esto significa que 1 em = 16px, 5em = 80px, 37.5em = 600px, 60em = 960, etc. Algunas personas, sin embargo, prefieren trabajar un poco demasiado de cerca al sistema decimal de base 10 y se ajusta el tamaño de la fuente base para dar cabida a este. Por ejemplo, si se establece el tamaño de la fuente base como tal HTML (font-size: 62,5%;), entonces nuestra ems se vería de la misma familia 1 em = 10px, 5em = 50 px, 37.5em = 375px, 600px 60em =. Esto se hizo originalmente con la idea de que la gente pudiera asociar un valor de EM 1.6em con el tamaño de la fuente correspondiente del  valor de píxel de 16px.

Esta es una mala idea… por dos razones.

En primer lugar, se está cambiando el tamaño de letra estándar para los navegadores y reduciéndola en un 37,5% después de que el navegador estuviera elaborando lo que era el tamaño de letra estándar perfecto….. Sin pensar en la gente. Estás tomando lo que los usuarios están esperando como una norma y reducirlo de manera significativa, y a continuación, llevar una copia de seguridad que necesita ajustar tu CSS para hacer todo a un tamaño normal de nuevo. El elemento tiene más sentido que ser 1EM que 1.6em.

En segundo lugar, el estar lejos de usar píxeles, permite configurar las fuentes (y en algunos casos en las consultas de medios y anchos de contenedores), por lo qué se debe mirar para imitar a la anterior.

La construcción de tu sitio web debe ser a partir del contenido, lo que significa que comienzas con un párrafo perfecto y trabajas hacia el exterior. Esto permite que las etiquetas de P a 1 em, y todo lo demás esté relativo a ese tamaño, ya que le proporciona una escala tipográfica hermosa (herramientas como XYZ y xyz ayudarán con tu escala tipográfica). Cuando el usuario decide aumentar el tamaño del texto en el navegador, o si necesita cambiar el tamaño de la fuente cuando se mueve a través de preguntas de los medios, sólo necesita cambiar el tamaño de la fuente base, y verá todo lo que ha estado escalado en consecuencia.

 

Márgenes y relleno

Al configurar tus márgenes y el relleno alrededor de los elementos tipográficos (p, blockquote, h1-h6, li, etc.) asegúrate de mantenerlos como mediciones EM… y no te olvides de mantener las mismas reglas cuando se trata de altura de la línea.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *