Es posible que haya aceptado el uso de unidades de medida flexibles, pero es posible que aún no entienda completamente cuándo usar rem y cuándo usar em. ¡Este tutorial te ayudará a averiguarlo!

Tanto em como rem son unidades flexibles y escalables que el navegador traduce en valores de píxel, dependiendo de la configuración del tamaño de fuente en su diseño. Si utiliza un valor de 1em o 1rem, que se podría traducir en el explorador como cualquier cosa, desde 16px a 160px o cualquier otro valor.

On the other hand px values are used by the el navegador tal como está, por lo que 1px siempre se mostrará exactamente como 1px.

Pruebe el control deslizante en este ejemplo de CodePen para ver cómo el valor de las unidades rem y em se puede traducir en diferentes valores de píxel, mientras se establece explícitamente px las unidades permanecen fijas en tamaño:

La Gran Pregunta

El uso de 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 quedarse atascados con tamaños fijos. Podemos usar esta flexibilidad para hacer que nuestros diseños sean más fáciles de ajustar durante el desarrollo, más receptivos y para permitir a los usuarios del navegador controlar la escala general de los sitios para una máxima legibilidad.

Ambos em y rem unidades de ofrecer esta flexibilidad y funcionan de manera similar, así que la gran pregunta es, ¿cuándo debemos usar em valores y cuándo debemos usar rem valores?

Diferencia crucial

La diferencia entre las unidades em y rem es la forma en que el navegador determina el valor px al que se traducen. Comprender esta diferencia es la clave para determinar cuándo usar cada unidad.

Comenzaremos repasando cómo las unidadesrem yem funcionan desde cero para asegurarnos de que conoce todos los detalles. Luego pasaremos a por qué debe usar unidades emo rem.

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

Cómo se traducen las unidades rem a Valores de Píxel

Cuando se utilizan unidades rem, el tamaño de píxel al que se traducen depende del tamaño de fuente del elemento raíz de la página, es decir, el elemento html. Ese tamaño de fuente raíz se multiplica por el número que esté utilizando con su unidad rem.

Por ejemplo, con un tamaño de fuente de elemento raíz de 16px10remequivaldría a 160px, es decir, 10 x 16 = 160.

¿Cómo em Unidades de Traducir los Valores del Píxel

Cuando se utiliza la etiqueta em unidades, el valor de píxel de que usted termina con una multiplicación del tamaño de la fuente en el elemento de estilo.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

Es un error bastante generalizado que em las unidades son relativas al tamaño de fuente del elemento padre. De hecho, según la especificación W3, son relativos al tamaño de fuente «del elemento en el que se utilizan».

Los tamaños de fuente de los elementos principales pueden afectar a los valores em, pero cuando eso sucede es únicamente por herencia. Echemos un vistazo a por qué y veamos cómo funciona esto en acción.

El efecto de la herencia en Unidades em

Trabajar con em las unidades pueden comenzar a ser complicadas cuando se trata de herencia, porque cada elemento hereda automáticamente el tamaño de fuente de su padre. El efecto de herencia solo se puede anular estableciendo explícitamente un tamaño de fuente con una unidad no sujeta a herencia, como px o vw.

El tamaño de fuente del elemento en el que se utilizan 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 así sucesivamente. Como tal, es posible que cualquier valor em se efectúe por el tamaño de fuente de cualquiera de sus padres.

veamos un ejemplo. Siéntase libre de probar esto en CodePen por sí mismo a medida que avanzamos a través de él. A medida que avanza, use las herramientas para desarrolladores de Chrome o Firebug para Firefox para inspeccionar los valores de píxeles en los que se calculan nuestras unidades em.

Ejemplo de herencia em

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

Entonces, ¿qué pasa si envolvemos otro div alrededor del primero y establecemos su font-size a 1.25em?

Nuestro div de envoltura hereda el tamaño de fuente raíz de 16px y lo multiplica por su propia configuración font-size de 1.25em. Esto establece que el div tenga un tamaño de fuente de 20px, es decir, 1.25 x 16 = 20.

Ahora nuestro div original ya no hereda directamente del elemento raíz, sino que hereda un tamaño de fuente de 20px de su nuevo div padre. Su valor de relleno de 1.5em ahora equivale a 30px, es decir, 1,5 x 20 = 30.

Este efecto de escala se puede agravar aún más si agregamos un tamaño de fuente basado en em a nuestro div original, digamos 1.2em.

El div hereda el tamaño de fuente 20px de su padre, luego lo multiplica por su propia configuración 1.2em, dándole un nuevo tamaño de fuente de 24px, es decir, 1.2 x 20 = 24.

El relleno 1.5em en nuestro div cambiará de tamaño de nuevo con el nuevo tamaño de fuente, esta vez a 36px, es decir, 1.5 x 24 = 36.

Finalmente, para ilustrar aún más que em las unidades son relativas al tamaño de fuente del elemento en el que se usan (no el elemento padre), veamos qué sucede con nuestro relleno de 1.5em si establecemos explícitamente el div para que use un tamaño de fuente de 14px, un valor no sujeto a herencia.

Ahora, nuestro relleno se ha reducido a 21 px, es decir, 1.5 x 14 = 21. No se ve afectado por el tamaño de fuente del elemento padre.

Con todo este potencial de complicaciones, puede ver por qué es importante saber cómo usar las unidades em de una manera manejable.

El efecto de la configuración del navegador en el tamaño de fuente del elemento HTML

Por defecto, los navegadores suelen tener un tamaño de fuente de 16px, pero el usuario puede cambiarlo a cualquier lugar de 9px a 72px.

Importante Saber:

El elemento root html hereda su tamaño de fuente de la configuración del navegador, a menos que se anule con un valor fijo establecido explícitamente.

Por lo tanto, mientras que el tamaño de fuente en el elemento html es lo que determina directamente los valores rem, ese tamaño de fuente puede provenir primero de la configuración del navegador.

Por lo tanto, la configuración del tamaño de fuente del navegador puede afectar el valor de cada unidad rem utilizada en un diseño, así como cada unidad em a través de herencia.

Efecto de configuración del navegador Cuando no se establece un tamaño de fuente HTML

A menos que se anule, el elemento html heredará la configuración de tamaño de fuente predeterminada del navegador. Por ejemplo, tomemos un sitio donde no hay ninguna propiedad font-size en el elemento html.

Si un usuario tiene su navegador en el tamaño de fuente predeterminado de 16px, el tamaño de fuente raíz será de 16px. En Herramientas para desarrolladores de Chrome, puedes ver lo que ha heredado un elemento marcando Mostrar propiedades heredadas en la pestaña Computado.

En este caso 10rem equivale a 160px, es decir, 10 x 16 = 160.

Si el usuario aumenta el tamaño de fuente de su navegador hasta 18px, el tamaño de fuente raíz se convierte en 18px. Ahora 10rem se traduce como 180px , es decir, 10 x 18 = 180.

Efecto de configuración del navegador con Tamaño de fuente HTML de Unidad em

Cuando se establece un tamaño de fuente basado en emhtml elemento, el valor de píxel al que se traduce será un múltiplo de la configuración de tamaño de fuente del navegador.

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

Si el tamaño de fuente del navegador se establece en 16px , el tamaño de fuente raíz aparecerá como 20px, es decir, 1.25 x 16 = 20.

En este caso 10rem sería igual a 200px, es decir, 10 x 20 = 200.

sin Embargo, si el navegador tamaño de fuente se establece en 20px, la raíz de fuente, tamaño en lugar de traducir a 25px, es decir, 1,25 x 20 = 25.

Ahora 10rem sería igual a 250px, es decir, 10 x 25 = 250.

Resumiendo em vs rem Diferencia

Lo que todo lo anterior se reduce a esto:

• Traducción de rem unidades de píxel de valor está determinado por el tamaño de fuente de la etiqueta html elemento. Este tamaño de fuente está influenciado por la herencia de la configuración de tamaño de fuente del navegador a menos que se anule explícitamente con una unidad no sujeta a herencia.

• La traducción de em unidades a valores de píxel está determinada por el tamaño de fuente del elemento en el que se utilizan. Este tamaño de fuente está influenciado por la herencia de elementos padre a menos que se anule explícitamente con una unidad no sujeta a herencia.

Por qué usar Unidades rem:

La mayor potencia que ofrecen las unidades rem no es solo que proporcionan un tamaño uniforme independientemente de la herencia de elementos. Más bien, es que nos dan una forma de que la configuración del tamaño de fuente del usuario influya en cada aspecto del diseño de un sitio mediante el uso de unidades rem donde solíamos usar unidades px.

Por esta razón, el propósito principal de usar unidades rem debe ser asegurarse de que cualquier tamaño de fuente predeterminado que un usuario tenga configurado en su navegador, el diseño se ajustará para acomodar el tamaño del texto dentro de él.

Un sitio se puede diseñar inicialmente centrándose en el tamaño de fuente predeterminado del navegador más común de 16px.

Pero usando rem unidades, si un usuario aumenta el tamaño de la fuente, la integridad del diseño se preservará y el texto no se aplastará en un espacio rígido destinado a texto más pequeño.

Y si el usuario disminuye su tamaño de fuente, el diseño completo se reduce, y no se quedará con una pequeña pizca de texto en un páramo de espacio en blanco.

Los usuarios cambian la configuración del tamaño de fuente por todo tipo de razones, desde la vista tensa hasta la elección de la configuración óptima para dispositivos que pueden ser muy diferentes en tamaño y distancia de visión. Acomodar estos ajustes permite una experiencia de usuario mucho mejor.

Importante Saber:

Algunos diseñadores utilizan diseños basados en rem junto con una configuración fija px unit font-size en el elemento html. Esto se hace normalmente para que un cambio de tamaño de fuente en el elemento html pueda escalar el diseño en general hacia arriba o hacia abajo.

Desaconsejo encarecidamente esto, ya que anula el tamaño de fuente que el elementohtml hereda de la configuración del navegador del usuario. Por lo tanto, esto evita que la configuración tenga algún efecto y elimina la capacidad del usuario para optimizar para una mejor visualización.

Si desea cambiar el tamaño de fuente en el elemento html, hágalo con un valor em o rem, ya que el tamaño de fuente raíz seguirá siendo un múltiplo de la configuración de tamaño de fuente del navegador del usuario.

Esto le permitirá escalar su diseño hacia arriba o hacia abajo cambiando el tamaño de fuente de su elemento html, pero conservará el efecto de la configuración del navegador del usuario.

Por qué usar Unidades em

El valor clave em las unidades ofrecen es que permiten que los valores de tamaño se determinen por un tamaño de fuente distinto al del elemento html.

Por esta razón, el propósito principal de las unidades em debe ser permitir la escalabilidad dentro del contexto de un elemento de diseño específico.

Por ejemplo, puede configurar los valores paddingmargin y line-height en un elemento del menú de navegación para usar em.

De esta manera, si cambia el tamaño de fuente del menú, el espacio alrededor de los elementos del menú se escalará proporcionalmente, independientemente del resto disposición.

En la sección anterior sobre la herencia, que vio cómo rápidamente el seguimiento de em unidades puede ir de las manos. Por esta razón, solo recomiendo usar unidades em si identifica una necesidad clara de ellas.

Aplicación práctica

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

Utilice Unidades em Para:

Cualquier tamaño que deba escalar en función del tamaño de fuente de un elemento que no sea la raíz.

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

Según el ejemplo anterior, los componentes de diseño, como elementos de menú, botones y encabezados, pueden tener sus propios tamaños de fuente explícitamente indicados. Si cambia estos tamaños de fuente, desea que todo el componente se escale proporcionalmente.

Las propiedades comunes a las que se aplicará esta guía son marginpaddingwidthheight y line-height, cuando se usa en elementos con un tamaño de fuente no predeterminado.

Recomiendo que cuando emplee unidades em, el tamaño de fuente del elemento en el que se usan se establezca en unidades rem para preservar la escalabilidad pero evitar la confusión de herencia.

Normalmente no se usa em Unidades para Tamaños de fuente

Es bastante común ver em unidades utilizadas para el tamaño de fuente, particularmente en los encabezados, sin embargo, sugeriría que los diseños son más manejables si rem las unidades se usan típicamente para el tamaño de fuente.

La razón por la que los encabezados a menudo usan unidades em es que son una mejor opción que las unidades px, siendo relativas al tamaño de texto normal. Sin embargo, las unidades rem pueden lograr este objetivo igualmente bien. Si se realiza algún ajuste de tamaño de fuente en el elemento html, los tamaños de encabezado también se escalarán.

Intente cambiar el tamaño de fuente em en el elemento html de este código para verlo por sí mismo:

La mayoría de las veces, no queremos que nuestros tamaños de fuente se escalen en función de ningún elemento que no sea la raíz, con solo unas pocas excepciones.

Un ejemplo en el que podríamos querer em El tamaño de fuente basado podría ser un menú desplegable, donde tenemos un tamaño de texto de elemento de menú de segundo nivel dependiendo del tamaño de fuente del primer nivel. Otro ejemplo podría ser un icono de fuente utilizado dentro de un botón, donde el tamaño del icono debe relacionarse con el tamaño de texto del botón.

Sin embargo, la mayoría de los elementos en un diseño web tenderán a no tener este tipo de requisito, por lo que generalmente querrá usar unidades rem para el tamaño de fuente, con unidades em solo donde sea específicamente necesario.

Utilice unidades rem para:

Cualquier tamaño que no necesite unidadesem por las razones descritas anteriormente, y que debería escalar en función de la configuración del tamaño de fuente del navegador.

Esto representa casi todo en un diseño estándar, incluyendo la mayoría de las alturas, la mayoría de los anchos, la mayoría de los rellenos, la mayoría de los márgenes, los anchos de los bordes, la mayoría de los tamaños de fuente, las sombras, básicamente casi todas las partes de su diseño.

En pocas palabras, todo lo que se puede hacer escalable con unidades rem debería serlo.

Tip

Al crear diseños, a menudo es más fácil pensar en píxeles, pero generar la salida en unidades rem.

Puede tener pixel a rem cálculos realizados automáticamente a través de un preprocesador como Stylus / Sass / Less, o un postprocesador como PostCSS con el complemento PXtoRem.

Alternativamente, puedes usar PXtoEM para realizar tus conversiones manualmente.

Utilice siempre rem Consultas de medios

Es importante destacar que, al usar unidades rem para crear un diseño escalable uniforme, sus consultas de medios también deben estar en unidades rem. Esto asegurará que sea cual sea el tamaño de fuente del navegador de un usuario, sus consultas de medios responderán y ajustarán su diseño.

Por ejemplo, si un usuario escalas de texto muy alto, su diseño puede necesitar ajuste hacia abajo de dos columnas a una sola columna, justo como en un pequeño proyectó dispositivo móvil.

Si los puntos de interrupción tienen un ancho de píxel fijo, solo un tamaño de ventana diferente puede activarlos. Sin embargo, con los puntos de interrupción basados en rem también responderán a diferentes tamaños de fuente.

No utilice em o rem para:

Anchos de diseño de varias columnas

Los anchos de columna en un diseño normalmente deben estar basados en % para que puedan encajar de forma fluida en vistas de tamaño impredecible.

Sin embargo, las columnas individuales generalmente deben incorporar valores rem a través de una configuración max-width.

Por ejemplo:

.container { width: 100%; max-width: 75rem;}

Esto mantiene la columna flexible y escalable, pero evita que se vuelva demasiado ancha para que el texto sea legible cómodamente.

Cuando un elemento debe ser Estrictamente Inescalable

En un diseño web típico, no habrá muchas partes de su diseño que no se puedan diseñar para la escalabilidad. Sin embargo, ocasionalmente se encontrará con elementos que realmente necesitan usar valores fijos explícitos con el fin de evitar el escalado.

La condición previa para emplear valores de tamaño fijos debe ser que si el elemento en cuestión se escalara, se rompería. Esto realmente no aparece a menudo, así que antes de que te sientas tentado a sacar esas unidades px, pregúntate si usarlas es una necesidad absoluta.

Terminando

Vamos a tener un resumen rápido de lo que hemos cubierto:

• remy em las unidades se calculan en valores de píxel por el navegador, en función de los tamaños de fuente en su diseño.
• em las unidades se basan en el tamaño de fuente del elemento en el que se utilizan.
• rem las unidades se basan en el tamaño de fuente del elemento html.
• em las unidades pueden verse influenciadas por la herencia de tamaño de fuente de cualquier elemento padre

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

• Use em unidades para dimensionar que deben escalar en función del tamaño de fuente de un elemento que no sea la raíz.
• Utilice unidades rem para dimensionar las unidades que no necesitan unidades em, y que deben escalarse según la configuración del tamaño de fuente del navegador.
• Use unidades rem a menos que esté seguro de que necesita unidades em, incluso en tamaños de fuente.
• Use rem unidades en consultas de medios
• No use em o rem en anchos de diseño de varias columnas: use % en su lugar.
• No use emo rem si el escalado inevitablemente causa que un elemento de diseño se rompa.

Espero que ahora haya creado una imagen sólida y completa de cómo funcionan exactamente las unidades em y rem y, a través de eso, sepa cómo aprovecharlas mejor en sus diseños.

Le animo a que pruebe las pautas de uso contenidas en este tutorial por sí mismo, y disfrute de la escalabilidad y capacidad de respuesta completas de los diseños que le permitirán crear.