¿Cuál es el trato con Em y Rem?

Con toda la charla sobre el diseño de sitios web receptivos, siguen apareciendo dos pequeñas palabras: em y rem. Pero, ¿qué son?

Em y rem, junto con los píxeles, son unidades y métodos para medir y cambiar el tamaño del tipo. Em y rem son unidades relativas en lugar de estáticas y se utilizan cada vez más para esquemas de diseño web receptivo. ¡Profundicemos más en este concepto hoy y expliquemos las cosas un poco más claramente!

¿De dónde viene Ems?

Irónicamente, el término «em» proviene del diseño de impresión. Un em es el tamaño de una M mayúscula en cualquier tipo de letra, lo que hace que el tamaño sea relativo a la fuente.

Muchos diseñadores de impresión están familiarizados con él (y su contraparte en) cuando se trata de espaciado. Un espacio em, o un espacio, que es del tamaño de una N mayúscula, a menudo se usa para hacer que las palabras y los espacios se vean mejor en mayúsculas. Lo mismo ocurre con em y en guiones, o guiones largos y cortos.

Esta teoría del espaciado proporcional es la misma para el diseño web. Cuando se trata de diseños digitales, em se define de una manera similar pero más precisa: un em es el tamaño de letra calculado en relación con el tamaño de letra del elemento principal.

Rem es una evolución de ella. Estos «ems raíz» funcionan de manera muy similar a em, con una excepción: rem es el tamaño del tipo calculado en relación con el tamaño del tipo «html» de nivel superior. elemento en lugar de un elemento padre.

entendiendo em

Ems esencialmente funciona como valores porcentuales, haciendo que una letra tenga el mismo «tamaño» independientemente del carácter o tamaño. Debido a esta naturaleza de escala móvil, los em se denominan unidades relativas. (Otras unidades relativas incluyen porcentajes y píxeles, en comparación con unidades absolutas como picas, puntos y pulgadas). Este enfoque es una solución popular para medir tipos, pero no funciona tan bien para otras medidas como espacios o bordes.

… cambiando solo el tamaño principal, puede cambiar todos los tamaños de letra a la vez

La ventaja de usar em como base para el tamaño de letra es que al cambiar solo el tamaño principal, puede cambiar todos los tamaños de letra a la vez. Esta opción también ayuda a todos los usuarios a obtener una experiencia similar al ver un sitio, ya sea que usen diferentes navegadores en línea o diferentes dispositivos, porque algunos navegadores más antiguos no cambiarán el tamaño del texto establecido en píxeles. ¿El resultado?

No importa cómo vea el tipo en un sitio, se ve como se esperaba: aumentado o reducido o en diferentes dispositivos.

El desafío con el uso de em es que necesita saber (y recordar) el tamaño del padre, porque esa es la base de cómo se comportará el resto del tipo.

Aquí hay un ejemplo de cómo podría descomponerse con un tamaño de fuente principal de 14 px:

• 1 em = 14px: este es el tipo principal, basado en un tamaño de letra común para copiar el cuerpo principal
• 0,5 em = 7 píxeles
• 1,5 em = 21 píxeles
• 2 em = 28 píxeles

¿Cuál es la diferencia con rem?

Finalmente, Rem funciona de la misma manera, pero no hay un tamaño de fuente principal definido. El elemento html raíz define la relación con el rem, lo que significa que definiría un tamaño de fuente en el elemento html y definiría las unidades rem como porcentajes del mismo. El tamaño de fuente siempre será relativo a este tamaño html raíz, en lugar de ajustarse a medida que anida varios contenedores de diferentes tamaños.

Una vez que supere las matemáticas, usar rem puede ser una forma mucho más sencilla de mantener el tamaño de letra correcto y uniforme.

Cuando se introdujeron por primera vez, hubo cierta resistencia a rem porque no eran universalmente compatibles con los navegadores. Esto ya no es una preocupación; rem funciona en todas las plataformas principales y modernas.

¿Cómo coinciden los píxeles?

Pero, ¿qué pasa con los píxeles, la unidad común que todo el mundo parece entender? Los píxeles fueron la unidad de medida de tipo original para el diseño digital y todavía se utilizan en la actualidad. Pero su uso se está volviendo menos común cuando se trata de tipografía, ya que los diseñadores quieren la experiencia de usuario adicional asociada con em y rem.

Piénselo de esta manera: los píxeles proporcionan mucho control para el diseñador/desarrollador, pero muy poco control para el usuario. Los tamaños de píxeles definidos son solo eso, definidos, y no cambian según el entorno del usuario. Si bien pueden ser fáciles de usar en el proceso de creación, pueden causar problemas en el producto final.

Saltar de píxeles a em (o rem) no es tan difícil, y si tiene dificultades para pensar en ello, consulte Calculadora de píxeles en Em para tener una idea de cómo se comparan.

Conclusión

Ahora que tiene una mejor comprensión de las diferentes unidades utilizadas para medir y escalar el tipo en el diseño digital, ¿qué debe usar?

La respuesta no es sencilla. Mi recomendación es que utilices aquello con lo que te sientas cómodo y lo que mejor funcione para cada proyecto. Em y rem son medidas mucho más fluidas y funcionarán de manera más consistente en proyectos, especialmente en los receptivos. Los píxeles siguen siendo la unidad preferida para muchos cuando trabajan en diseños.

Puede encontrar que tener todas estas herramientas disponibles es la mejor solución.