Guía Exhaustiva: Cuando Utilizar Em vs. Rem

Puedes haber entendido el uso de unidades flexibles de medida, pero podrías no haber entendido completamente cuando usar rem y cuando usar em. ¡Éste tutorial te ayudará a descubrirlo!

Tanto em como rem son flexibles, unidades escalables que son traducidas por el navegador en valores de pixeles, dependiendo de los ajustes del tamaño de la fuente en tu diseño. Si usas un valor de 1em o 1rem, pudiera traducirse en el navegador como cualquier cosa desde 16px hasta 160px   o cualquier otro valor.

Por otro lado valores en px son usados por el navegador como son, así que 1px siempre se mostrará exactamente 1px.

Manipula el regulador deslizante en éste ejemplo en CodePen para ver como el valor de las unidades rem y em pueden traducirse en diferentes valores de pixeles, mientras explícitamente estableces las unidades en px fijas en tamaño:

La Gran Pregunta

Usar unidades em y rem nos da flexibilidad en nuestros diseños, y la capacidad de escalar elementos hacia arriba y hacia abajo, en lugar de estar estancados en tamaños fijos. Podemos usar ésta flexibilidad para hacer nuestros diseños más fáciles de ajustar durante el desarrollo, más responsivo, y para permitir a usuarios de navegador controlar la escala general de sitios para máxima legibilidad.

Las dos unidades em y rem proporcionan ésta flexibilidad y trabajar de formas similares, así que la gran pregunta es, ¿cuándo deberíamos usar valores em y cuando debemos usar valores rem?

Diferencia Crucial

La diferencia entre las unidades em y rem es como el navegador determina el valor px al  que se están traduciendo. Entender ésta diferencia es la clave para determinar cuando usar cada unidad.

Vamos a comenzar sobre como trabajan las unidades rem y em desde cero para asegurarnos que conozcas cada detalle. Luego nos moveremos a por qué debes usar unidades em o rem.

Finalmente veremos la aplicación práctica de exactamente en que elementos de un diseño típico  deberías usar cada tipo de unidad.

Como unidades rem se traducen a Valores de Pixel

Cuando se usan uniddes rem, el tamaño del pixel al que traducen depende del tamaño de la fuente del elemento raíz de la página, o sea el elemento html. Ese tamaño de fuente raíz es multiplicado por cualquier numero que está usando con tu unidad rem.

Por ejemplo, con un tamaño fuente de elemento raíz de 16px, 10rem debería equivaler a 160px, o sea 10 X 16 = 160.

Como las Unidades em se traduce a Valores de Pixeles

Cuando se usan unidades em, el valor del pixel con el que terminas es una multiplicación del tamaño de fuente en el elemento al que se le está aplicando estilo.

Por ejemplo, si un div tiene un tamaño de fuente de 18px, 10em equivaldría a 180px, o sea 10 X 18 = 180.

Importante para Saber:

Es un mal entendido generalizado que las unidades em son relativas al tamaño fuente del elemento padre. De hecho, como lo especifica W3, son relativos al tamaño de fuente "del elemento en el que son usadas".

Los tamaños de la fuente del elemento padre pueden afectar los valores em, pero cuando eso ocurre es solamente por herencia. Veamos por qué, y cómo esto funciona en acción.

El efecto de herencia en Unidades em

Trabajar con unidades em puede empezar a ponerse complicado cuando se trata de herencia, porque cada elemento automáticamente hereda el tamaño de la fuente de su padre. El efecto de herencia puede solo ser sobreescrito al explícitamente establecer un tamaño de fuente con una unidad no sujeta a la herencia, tal como px o vw.

El tamaño de la fuente del elemento en el que son usadas las unidades em determina su tamaño. Pero ese elemento puede haber heredado un tamaño de fuente de su padre, que heredó un tamaño de fuente de su padre, y asi sucesivamente. Como tal es posible para cada valor em sea afectado por el tamaño de fuente de cualquiera de sus padres.

Veamos un ejemplo. Con toda confianza prueba ésto en CodePen por tí mismo mientras avanzamos. Al proseguir, usa las Herramientas para el Desarrollador de Chrome o Firebug para Firefox para inspeccionar los valores de pixeles a los que son calculados nuestras undiades em.

Ejemplo de Herencia em

Si tenemos una página con un tamaño fuente raíz de 16px (generalmente el predeterminado) y un div hijo dentro de él con padding de 1.5em, ese div herederá el tamaño fuente de 16px del elemento raíz. Por lo tanto, su padding se traducirá a 24px, es decir 1.5 X 16 = 24.

Entonces ¿Qué tal si encerramos otro div alrededor del primero y establecemos su font-size en 1.25em?

Nuestro div contenedor hereda el tamaño fuente raíz de 16px y multiplica eso por su propia font-size establecida en 1.25em. Esto establece el div para que tenga un tamaño de fuente de 20px, o sea 1.25 X 16 = 20.

Ahora nuestro div original ya no es heredado directamente del elemento raíz, sino está heredando un tamaño de fuente de 20px de su nuevo div padre. Su valor de padding de 1.5em ahora equivale a 30px, o sea 1.5 X 20 = 30.

El efecto de escalar puede ser más complejo si agregamos un tamaño de fuente basado en em a nuestro div original, digamos 1.2em.

El div hereda el tamaño fuente de 20px de su padre, luego multiplica ese por su propio establecido de 1.2em, dándole un nuevo tamaño de fuente de 24px, o sea 1.2 X 20 = 24.

El padding de 1.5em en nuestro div ahora cambiará en tamaño de nuevo con el nuevo tamaño de fuente, ésta vez a 36px, o sea 1.5 X 24 = 36.

Finalmente, para ilustrar mejor esas unidades em son relativas al tamaño fuente del elemento en el que son utilizadas, (no el elemento padre), veamos que ocurre a nuestro padding de 1.5em si explícitamente establecemos el div para que use un tamaño de fuente de 14px, un valor no sujeto a herencia.

Ahora, nuestro padding ha bajado a 21px, o sea 1.5 X 14 = 21. No es afectado por el tamaño de la fuente del elemento padre.

Con todo éste potencial para complicación, puedes ver por qué es importante saber como usar las unidades em de una manera manejable.

El Efecto de los Ajustes del Navegador en el Tamaño de Fuente del Elemento HTML

Por defecto los navegadores usualmente tienen un tamaño de fuente de 16px, pero éste puede ser cambiado por el usuario a cualquier valor de entre 9x a 72px.

Importante para Saber:

El elemento raíz html hereda su tamaño de fuente de los ajustes en el navegador, a menos que se sobreescriban con un valor explícitamente establecido como fijo.

Así que mientras el tamaño de fuente en el elemento html es lo que determina directamente los valores rem, ese tamaño de fuente pudo haber venido de los ajustes del navegador.

Así los ajustes en el tamaño de la fuente pueden afectar el valor de cada unidad rem utilizada en un diseño, así como cada unidad em vía herencia.

El Efecto del Ajuste en el Navegador Cuando no es Establecido el Tamaño de la Fuente HTML

A no ser que se sobreescriba, el elemento html heredará cualquier tamaño de fuente predeterminado establecido en el navegador. Por ejemplo, tomemos un sitio donde no se haya establecido la propiedad font-size en el elemento html.

Si un usuario tiene su navegador en el tamaño fuente predeterminado de 16px, el tamaño fuente raíz será de 16px. En las Herramientas para el Desarrollador de Chrome puedes ver lo que ha heredado un elemento al revisar Show inherited properties (Mostrar propiedades heredadas) bajo la pestaña Computed (Calculadas).

En éste caso 10rem equivale a 160px, o sea 10 X 16 = 160.

Si el usuario sube el tamaño de la fuente de su navegador a 18px, el tamaño de la fuente raíz se convierte en 18px. Ahora 10rem se traduce a 180px, o sea 10 X 18 = 180.

El Efecto del Ajuste del Navegador con Tamaño de la Fuente HTML Unidad em

Cuando un tamaño de fuente basado en em es establecido en el elemento html, el valor del pixel se traslada para ser un múltiplo del ajuste de tamaño de la fuente del navegador.

Por ejemplo, si el elemento html del sitio, tuviera una propiedad font-size establecida en 1.25em, el tamaño fuente raíz sería 1.25 veces del ajuste del tamaño de la fuente del navegador.

Si el tamaño de la fuente del navegador fue establecida en 16px, el tamaño de la fuente raíz resultaría en 20px, es decir 1.25 X 16 = 20.

En éste caso 10rem equivaldrían a 200px, o sea 10 X 20 = 200.

Sin embargo, si el tamaño de la fuente del navegador fue establecido en 20px, el tamaño fuente raíz se traduciría en 25px, o sea 1.25 X 20 = 25.

Ahora 10rem equivaldria a 250px, o sea 10 X 25 = 250.

Resumiento la Diferencia em vs. rem

Todo lo de arriba se resume a ésto:

• Trasladar unidades rem a valor de pixel se determina por el tamaño de la fuente del elemento html. Éste tamaño de fuente es influenciado por la herencia del ajsute del tamaño de fuente del navegador a menos de que explícitamente se sobreescriba con una unidad no sujeta a herencia.

• Transladar unidades em a valor de pixel se determina por el tamaño fuente del elemento en el que son usadas. Éste tamaño de la fuente es influenciado por la herencia de elementos padre a menos que explícitamente se sobreescriban con una unidad no sujeta a herencia.

Por qué usar Unidades rem:

La mayor potencia que las unidades rem ofrecen no es solo que dan consistencia al tamaño sin importar la herencia del elemento. Más bien, es que nos dan una forma de que los ajustes del tamaño de la fuente del usuario tengan influencia en cada aspecto del maquetado de un sitio al usar unidades rem donde solíamos utilizar unidades px.

Por ésta razón el propósito primario de utilizar unidades rem debería ser asegurar que cualquier tamaño de fuente predeterminado que tenga un usuario establecido en su navegador, el maquetado se ajustará para acomodar el tamaño del texto dentro de él.

Un sitio puede ser diseñado inicialmente enfocándose en el tamaño fuente del navegador predeterminado de 16px.

Pero al usar unidades rem, si un usuario incrementa el tamaño de su fuente, la integridad del maquetado se preservará,  y el texto no se encogerá en un espacio rígido preparado para un texto más pequeño.

Y si el usuario decrementa el tamaño de su fuente, todo el maquetado escala hacia abajo, y quedará un texto diminuto esparcido en mucho espacio en blanco.

Los usuarios cambian los ajustes del tamaño de la fuente por muchas razones, desde vista cansada hasta elegir configuraciones óptimas para dispositivos que pueden ser muy diferentes en tamaño y distancia para ver. Acomodar éstos ajustes permite experiencias de usuario mucho mejores.

Importante para Saber:

Algunos diseñadores utilizan maquetados basados en rem en conjunto con una unidad px fija, estableciendo el font-size en el elemento html. Ésto se hace típicamente para que un cambio de tamaño de fuente en el elemento html pueda escalar todo el diseño más grande o más pequeño.

No recomiendo ésto pues sobreescribre el tamaño de la fuente que el elemento html hereda de la configuración del navegador del usuario. Por lo tanto ésto evita que los ajustes tengan algún efecto, y remueve la capacidad del usuario para optimizar con el objetivo de obtener una mejor visión.

Si quieres cambiar el tamaño de la fuente en el elemento html, hazo con un valor em o rem pues el tamaño de la fuente raíz será un múltiplo del tamaño de la fuente del navegador del usuario.

Ésto aún te permitirá escalar tu diseño más grande o más pequeño al cambiar el tamaño de fuente del elemento de tu html, pero perservarás el efecto de la configuración del navegador del usuario.

Por Qué usar Unidades em

El valor clave que las unidades em ofrecen es que permiten que los valores de tamaños sean determinados por un tamaño de fuente diferente al del elemento html.

Por ésta razón, el propósito primario de las unidades em debería ser permitir escalabilidad dentro del contexto de un elemento de diseño específico.

Por ejemplo, podrías establecer el padding, margin y line-height alrededor de un elemento del menú de navegación para usar valores em.

De ésta forma si cambias el tamaño de la fuente del menú el espacio que rodea a los elementos que rodean a los elementos del menú escalarán proporcionalmente, independientemente del resto del maquetado.

En la sección previa sobre herencia viste como mantener el seguimiento de las unidades em puede perderse rápidamente. Por ésta razón, recomiendo solamente usar unidades em si identificas una necesidad clara para ellos.

Aplicación Práctica

Puede haber debate entre diseñadores web y estoy seguro que diferentes personas tienen diferentes enfoques preferidos, sin embargo mi recomendación es la siguiente.

Usa Unidades em Para:

Cualquier tamaño que debería escalar dependiendo del tamaño de la fuente de un elemento en lugar que en el de la raíz.

Hablando en términos generales, la única razón que necesitarás para utilizar unidades em es escalar un elemento que no tiene un tamaño de fuente predeterminado.

Por nuestra experiencia arriba, componentes de diseño como elementos de menú, botones y encabezados pueden tener sus tamaños de fuente explícitamente declarados. Si cambias éstos tamaños de fuente, quieres que todo el componente se escale proporcionalmente.

Las propiedades comunes a las que ésta pauta aplicará son ajustes de margin, padding, width, height y line-height, cuando se usan con elementos con tamaño de fuente no predeterminado.

Recomiendo que cuando uses unidades em, el tamaño de la fuente del elemento en el que son usadas debería ser establecido en unidades rem para preservar escalabilidad pero evitar confusión de herencia.

Típicamente No Utilices Unidades em para Tamaños de Fuente

Es muy común ver unidades em utilizadas para tamaño de fuente, particularmente en encabezados, sin embargo sugeriría que los diseños son mas manejables si las unidades rem son típicamente usadas para tamaño de fuente.

La razón por la que los encabezados con frecuencia usan unidades em es que son una mejor opción que las unidades px, siendo relativas al tamaño de texto regular. Sin embargo unidades rem pueden lograr éste meta igualmente. Si se hace algún ajuste en el tamaño de la fuente en el elemento html, el tamaño del encabezado también se escalará.

Trata de cambiar el tamaño de fuente em en el elemento html en éste CodePen para verlo por tí mismo:

Más frecuentemente, no queremos que nuestros tamaños de fuente se escalen basados en cualquier elemento que no sea la raíz, con solo unas pocas excepciones.

Un ejemplo donde podrías querer un tamaño de fuente basado en em pudiera ser un menú desplegable, donde tenemos el texto de un elemento de menú de segundo nivel con el tamaño dependiendo del tamaño de fuente del primer nivel. Otro ejemplo podría ser un ícono fuente usado dentro de un botón, donde el tamaño del ícono debería relacionarse con el tamaño del texto del botón.

Sin embargo la mayoría de los elementos en un diseño web tenderán a no tener éste tipo de requerimiento, asi generalmente querrás usar unidades rem para tamaño de fuente, con unidades em solo para donde se necesite específicamente.

Usa unidades rem para:

Cualquier tamaño que no necesite unidades em por las razones descritas arriba, y que deberían escalar dependiendo de la configuración del tamaño fuente del navegador.

Ésto cuenta para casi cualquier cosa en un diseño estándar incluyendo la mayoría de alturas, la mayoría de las anchuras, la mayoría de los padding, la mayoría de los márgenes, anchuras de bordes, la mayoría de los tamaños de fuente, sombras, básicamente casi cada parte de tu maquetado.

A grandes rasgos, todo lo que puede hacerse escalable con unidades rem, debería hacerse.

Consejo

Cuando se crean maquetados es frecuentemente más fácil pensar en pixeles pero sacar en pantalla en unidades rem.

Puedes tener pixel para hacer cálculos rem automáticamente vía un proprocesador como Stylus / Sass / Less, o un postprocesador como PostCss con el plugin PXtoRem.

Alternativamente, puedes usar PXtoEM para hacer manualmente tus conversiones.

Siempre utiliza rem en Media Queries

Importante, cuando se usan unidades rem para crear un diseño uniformemente escalable, tus media queries deberían estar también en unidades rem. Ésto asegurará que cualquier tamaño de la fuente que tenga el navegador del usuario, tus media queries responderán a él y ajustarán tu maquetado.

Por ejemplo, si un usuario escala el texto muy grande, tu maquetado puede necesitar cambiar de dos a una columna, como se proyecta en un dispositivo móvil.

Si tus puntos de quiebre están en anchuras de pixeles fijas, solo un diferente tamaño de ventana gráfica puede desencadenarlos. Sin embargo con puntos de quiebre basados en rem responderán también a diferentes tamaños de fuente.

No uses em o rem para:

Anchuras de Maquetado Multi-Columnas

Las anchuras de columna en un maquetado debería basarse típicamente en % para que pueden caber fluidamente en ventanas gráficas de tamaño impredecible.

Sin embargo una sola columna debería aún incorporar valores rem via una configuración max-width.

Por ejemplo:

1

.container {

2

    width: 100%;

3

    max-width: 75rem;

4

}

Ésto mantiene la columna flexible y escalable, pero evita que sea demasiado amplia para que el texto que contiene sea cómodamente legible.

Cuando un Elemento Debería ser Estrictamente No Escalable

En un típico diseño web no habrá muchas partes de tu maquetado que no puedan ser diseñadas para escalabilidad. Sin embargo, ocasionalmente encontrarás elementos que realmente necesiten usar valores explícitos fijos para el propósito de evitar el escalado.

La precondición para emplear valores de tamaño fijos debería ser que si el elemento en cuestión fuera escalado se rompería. Ésto realmente no sucede frecuentemente, así que antes de que seas tentado a mezclar esas unidades px, pregúntate si usarlas en una necesidad absoluta.

Conclusión

Hagamos una rápida lista de recapitulación de lo que hemos cubierto:

• unidades rem y em se calculan en valores de pixel por el navegador, basados en tamaños de fuentes en tu diseño.
• unidades em están basadas en el tamaño de la fuente del elemento en que se encuentran.
• unidades rem están basadas en el tamaño de la fuente del elemento html.
• unidades em pueden ser influenciadas por la herencia del tamaño de la fuente de cualquier elemento padre

• unidades rem pueden ser influenciadas por la herencia del tamaño de la fuente de la configuración de la fuente del navegador.

• Usar unidades em para tamaño que deberían escalarse dependiendo del tamaño de la fuente de un elemento además de la raíz.
• Usar unidades rem para tamaño que no necesitan unidades em, y que deberían escalar dependiendo de la configuración del tamaño de la fuente del navegador.
• Usa unidades rem a menos que estás seguro que necesitas unidades em, incluyendo en tamaños de fuente.
• Usa unidades rem en media queries
• No uses em o rem en anchuras de maquetados multi-columna- usa % mejor.
• No uses em o rem si escalar inevitablemente causará que se desacomode un elemento del maquetado.

Espero que tengas una idea más completa de como funcionan exactamente las unidades em y rem, y como aprovecharlas mejor en tus diseños. 

Te animo a que pruebes por tí mismo el uso de las pautas contenidas en éste tutorial,y disfrutes la completa escalabilidad y adaptabilidad de los maquetados que te permitirán crear. 

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!