De Ems y Rems

De Ems y Rems. Unidades Css de tamaño relativas. Sus diferencias y semejanzas, ventajas e inconveniente y cuándo usar uno u otro.

De Ems y Rems

Por Kseso ✎ 12
De Ems y Rems - Valores relativos al tamaño de la tipografía

A estas alturas, los dos valores, em y rem, son de sobra conocidos. Quizás no tan extendido el uso del segundo. Y quizás un poquito menos aún los pros y contras de ambos.

Para los más nóveles en css, vamos de entrada con sus similitudes y su diferencia:

  • Semejanzas:
    • Ambos son unidades de longitud relativas.
    • Ambos se basan en el font-size de la letra "m" de la tipografía declarada en font-family.
    • Los dos priman la accesibilidad y los tamaños de tipografía y cajas dependerían (en teoría) de las "preferencias/necesidades" del visitante.
  • Diferencia:
    • Em: la base de cálculo del valor computado es el font-size de la caja padre.
    • Rem: la base es el valor de font-size del elemento raíz. En puridad debería ser el tamaño de la fuente que el usuario haya marcado en en la opción que a tal efecto tiene el navegador. Pero en muchos casos, los diseñadores reescriben dicho valor en el selector Html.

Y eso es todo... pero hay más.

Em: Un poco de historia

em y remEl uso de estos valores tradicionalmente causó cierta desazón a los diseñadores. No podían controlar al píxel cómo se dibujarían sus creaciones. Y solía ser fuente de problemas y razón esgrimida para seguir usando el píxel.

A la expansión del uso del valor em ayudó la técnica de fijar el valor de font-size en el html o body. Allá por 2.004 Richard Rutter publicó el artículo "How to size text using ems". Basándose en que la mayoría de navegadores tiene el tamaño de la tipografía establecida en 16px echó cuentas y vio que el 62.5% de esos 16px son 10px. Así que para tranquilidad y control del "em" sólo es necesario declarar lo que se convirtió en regla de fe universal:

BODY {font-size:62.5%} /*en el original en mayúsculas el selector*/

Porque basado en lo anterior, cualquier elemento se podía controlar al píxel declarando ems:

#navigation {font-size:1em} /*dibujado con 10px*/ #main_content {font-size:1.6em} /*dibujado con 16px*/ #footer {font-size:0.8em} /*dibujado con 8px*/

Y surgieron multitud de "calculadores de ems" para "facilitar la vida" y extender la perversión de la naturaleza y de la misma razón de ser del valor em.

Los particularidades de em

Tradicionalmente el mayor problema de usar el valor em surge de su propia naturaleza y definición. La herencia.
Al calcularse su valor sobre el computado de su caja padre, suelen presentarse problemas. El mismo elemento puede tener distinto peso visual (tamaño, márgenes, paddings...) en función de la caja que lo acoja.

A los inconvenientes del uso de ems ya tradicionales se han unido otros relacionados con las @media queries en el RWD y los dispositivos actuales:

  1. El valor de 1em en una regal como @media (min-width: 32em) no se ve afectado por el font-size del elemento Html (su base es el valor definido en las preferencias del usuario en la configuración del font-size del navegador).
  2. En las resoluciones actuales de multitud de dispositivos un tamaño de 10px para el texto (font-size:62.5%) es demasiado pequeño e ilegible. El uso de esa declaración automáticamente significa tener que declarar el font-size de todos y cada uno de los elementos textuales. Aparte del trabajo de hacerlo inicialmente, complica el mantenimiento del Css.
  3. La tendencia actual, motivada por la disparidad de dispositivos y necesidades, es que cada elemento tenga una presencia basada en el entorno donde se encuentra y escale según él en vez de serlo basado en esa escala de píxel.

Rem

La diferencia del valor rem respecto al em es, como ya mencionaba, que el valor de cálculo siempre es la misma. Con independencia de dónde se encuentre el elemento y de su profundidad en el DOM. Su padre y ancestros no lo modifican.

Lo anterior favorece la relación del peso visual de los distintos elementos entre sí. Así puedes hacer algo como:

h1 {font-size: 2.5rem;} h2 {font-size: 2rem;} h3 {font-size: 1.5rem;} /*etc, etc, etc*/ p {font-size: 1rem;}

Tienes la certeza de que la relación de tamaños y jerarquía entre ellos siempre será la misma, con independencia de que el visitante tenga un tamaño de tipografía establecido en 50 o en 15px.

Los particularidades de Rem

Pero el valor Rem también tiene sus particularidades. Especialmente en su aplicación a las propiedades que permiten "aligerar" la vista en torno a los elementos. Los espacios vacíos: márgenes, rellenos... e incluso alturas de línea.
En ellos hay veces que es más efectivo, práctico y funcional declararlas en función del tamaño de la caja, no del elemento.

Y si por tus razones tienes que tener presente IE8 o anteriores, la mala noticia es que NO entenderán el valor rem. Aunque siempre podrás utilizarlo con una pizca más de código: declarando primero el valor en ems y a continuación en rems.

A lo anterior añade que según este pen, parece que webkit tiene un bug con el uso de rems en las @media queries.

Conclusión

La de siempre, que no hay una verdad absoluta o un valor mejor que otro. Que ambos valores, em y rem, pueden convivir y ser usados conjuntamente en función de cada diseño en particular, y no pensando en dispositivos.

Sólo es cuestión de conocer las bondades y limitaciones de cada valor, propiedad o, de forma global, cada idea / tendencia / propuesta para usarlas según lo que necesites conseguir.

Y si pese a todo quieres o "necesitas" un control al pixel del valor rem, lo que según mi opinión es un error, puedes fijar también su valor y pervertirlo y privar al usuario de algo que sólo a él le corresponde: "Sizing with rem".

Adenda

Artículos relacionados, publicados o localizados con posterioridad a mi publicación, además de los incluidos más arriba:

  1. Why ems? en Css-tricks
  2. Font-size: Unidades y su uso o no. Em vs Rem vs %. Destierra Px y Pt

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 12

  1. Sí un título como ese no te llama la atención, la verdad nada te conmueve.

    ResponderEliminar
  2. Gracias por la explicación :)

    ResponderEliminar
  3. Gracias por la explicación... Tu artículo está genial. :)

    ResponderEliminar
  4. la verdad es que soy un novato de primera clase quiero aprender pero hay algunas cositas que no entiendo, y es que todo este tiempo solo e conocido una sola unidad de medida que es el pixel todo esto es nuevo para mi y muy intrigante me gusta mucho pero me gustaria ver una explicacion comparativa para poder diferenciar uno del otro, gracias

    ResponderEliminar
    Respuestas
    1. Hola Darkakashy. ¿Cuál es tu métier, donde se usan solamente pixeles? A mí me resultan muy cómodos en edición de imágenes, pero lo cierto es que ahí también los editores te dan más opciones para las unidades. (Que uno nunca las use, ya es otra historia ;-) ).

      Bueno, ya que puse un comentario, aprovecho a recomendarte que busques información en la web sobre medidas absolutas y relativas en CSS. Hay miles de páginas para aprender, aunque yo atacaría primero las oficiales como la del W3C, o las serias como la de MDN.

      Hay un blog muy bueno que también ha publicado algo sobre el asunto, pero ya es para alguien que por lo menos leyó un tutorial antes de meterse en cuestiones de hojas de estilos, en este caso aplicadas a fuentes.

      Font-size: Unidades y su uso o no. Em vs Rem vs %. Destierra Px y Pt

      Eliminar
    2. En css hay un montón de unidades para los posible valores de las propiedades.
      Y en algunas se puede elegir entre unas cuantas unidades, sólo una y otras diréctamente no necesitan unidades (sólo el valor).

      Un buen lugar donde comenzar es el propio documento del consorcio "CSS Values and Units"
      Y a partir de él ampliar la información para cada uno de los valores en páginas como las que le sugiere Furoya

      Un saludo

      Eliminar
    3. Sí, sobre todo en ese blog.

      (Mmmm... Creo que ya no vamos a saber en qué se ocupa Darkakashy. Una lástima, yo tenía curiosidad.)

      Eliminar
  5. Esto siempre es útil, no sabes la cantidad de "front-end" que me encuentro en eventos acá en mi país, que o no conocen que existen otras unidades de medida aparte del px, % o pt o saben que existen pero no las usan porque ni saben para que son y se dedican de lleno al maquetado desde hace años, hasta se sorprenden cuando les digo que ese framework que tanto les gusta, también los usa y hay algunos que hasta me acusan de mentiroso. o.O??

    Por cierto, ¿Tienes (yo creo que si) algún post como este, pero con VW y VH? Hasta sería interesante una tabla que las resuma todas con su explicación, pros y contras. ¿Conocen alguna? Saludos.

    ResponderEliminar
    Respuestas
    1. Artículos sobre las unidades relativas al viewport en el blog hay varios, así como demos basadas en ellas o que las usan. Sólo tienes que ver si alguno se ajusta a lo que necesites.

      Hoy vía twiter me llegó un artículo de @Wakkos en su blog relativo a las unidades de medida en Css. Lo tengo pendiente de lectura.

      Un saludo

      Eliminar
  6. Tengo una pelea con las medidas em y rem, cuando las conoci me parecieron geniales en su planteamiento pero luego al empezar a usarlas me di cuenta que eran lo mismo que usar pixeles, quizas este equivocado o haya planteado mal el problema y me encataria tener una discusion bien argumentada sobre el asunto, asi que aqui doy las razones por las que deje de usar em y rem

    1. La primera razón para usarlas es que hace años, explorer 7 no escalaba el texto cuando se hacia crlt + si la medida estaba en pixeles, entonces los manuales de usabilidad recomendaban pasar a em las fuentes en pixeles. IE7 ya no es relevante y ahora todos los navegadores escalan las fuentes en pixeles y esta dejo de ser una de las razones para usar ems

    2. La medida -em- es una medida que nace de la tipografia clásica, equivale al ancho de una letra "m" de una fuente, su hermana -ex- que tambien existe en css es la altura de una letra x. El objetivo de esta medida es lograr una cantidad constante de palabras por renglón, si un renglon es muy largo su lectura es dificil y cansa, si es muy corta es dificil seguir una idea, existen en impresión rangos segñun el tipo de lectura pero el promedio esta por las 12 palabras por renglon (60 letras aprox); entonces, si uso un ancho fijo y meto una tipografia narrow tendré mas palabras por renglon, si meto una tipografia ancha tendre menos palabras por renglon. La idea de los ems es que siempre mantenga el mismo numero aproximado de letras, 120 ems en una letra narrow daría el mismo numero de letras por renglon que 120 ems en una letra ancha, aunque el bloque seria más angosto. O eso deberia pasar pero no pasa, el ancho de la tipografia es vilmente ignorado en las medidas ems de los navegadores, para hacer el calculo se hace una letra em imaginaria de 16px

    3. Todo se reduce a 16px en todos los dispositivos y navegadores, no he encontrado el primer dispositivo/navegador/pantalla que no tenga como base una fuente de 16px sea lo que use esa pantalla como pixel, desde mi pantalla de 21 pulgadas hasta el celular del tamaño de una tarjeta, la moraleja es que el pixel se volvio la medida relativa, si declaro un parrafo de 1em es exactamente igual que si lo declaro en 16px. Este punto no tiene sentido si encuentro un dispositivo/resolucion/pantalla donde 1em no sean 16px

    4. Los mediaquery en em y rems son un chiste por lo que puse en el punto anterior y por que como esta en el articulo, estan fijos y calculados sobre... adivinen... 16px!!!

    5. El problema de las herencias que produce los em y se arregla con rem

    ya me deshahogue... en cambio las medidas del viewport si son brutales para hacer texto responsive

    ResponderEliminar
    Respuestas
    1. Hola Daniel
      El mayor problema de la unidad em es verse afectada por la herencia. La base de cálculo es el valor computado de font-size de su caja padre.
      Por eso se definió la unidad rem.
      Pese a lo que dices, que es cierto, que casi todos los aparatos han adoptado como cuasi estándar los 16px eso no quiere decir que ese sea el valor base de cómputo.

      El Rem es una unidad de respeto y consideración hacia el usuario. Es él el que decide qué valor le asigna en función de sus necesidades y dispositivo. Y al desarrollador ese valor en píxeles le debe ser indiferente. No importa.
      Da lo mismo que sea 10px o 25px. Lo que hace el rem es establecer una escala jerárquica: los tamaños mantienen una relación de tamaños en base a las preferencias del usuario (que puede o no haber modificado el "16px")

      El font-size de un texto ha de ser declarado después de seleccionar la familia tipográfica y de acuerdo a sus características. Y si se declaran 2 (por si falla la primera) ahí está font-size-adjust para compensar diferencias.

      Creo que te has dejado perder por tantos aspectos como rodean a la tipografía. Es todo más sencillo ;-)
      MIra este blog en el cuerpo del artículo. Yo defino una anchura de línea máxima de 50rem y un tamaño del texto en los párrafos de 1.15rem. Las razones no importan.

      El valor computado de ambos en cada usuario me es indiferente. Si un usuario necesita establecer el valor de 1rem = 10px la relación longitud línea / nº carácteres se mantiene igual que si lo sube a 1rem = 20px o que si no lo ha tocado.

      Creo, y esto es una opinión muy personal, que toda la incomprensión de los Rem se deben a la necesidad o al hecho de identificarlos con un valor en píxeles. Y no es esa. Es como te decía el tamaño definido por el usuario y en base a él constuir la relación de tamaños.

      Respecto a tu 3: el px es una unidad absoluta que no cambia su tamaño... en el dispositivo en cuestión (bueno, mediante software es posible simularlo). Pero su valor "físico" varía de aparato a aparato. Es función de sus características técnicas. Por eso y para "traerlo a la vida real" se usa otra medida que indica la resolución de la pantalla del aparato: los puntos por unidad de superficie.
      Por eso no es lo mismo aquellos monitores de 800x600px que necesitaban una mesa y los que doblando eso van en un bolsillo (o mochila).

      Un saludo y gracias por tus reflexiones.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap