soy Kseso y esto EsCSS

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

avatar del Editor del blog

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