Las medidas em y rem en CSS3

En CSS existen varias maneras de darle tamaño a los textos. Ya vimos en el tutorial anterior cómo calcular medidas tipográficas en la Web, ahora veremos qué pasa con los sistemas de medidas en CSS3.

Medidas en CSS

Actualmente hay varias maneras de darle tamaño a un texto. Las más usadas son:

• PX: píxeles
  
• PT: puntos
  
• EM: em es la anchura de la letra mayúscula "M" en el tipo de letra dado. Fuente
  
• %: porcentaje
  

Cuál usar? bueno cada quien con su receta no? Pero cómo se cuánto valen los píxeles, em, y puntos en relación a 100%? Veamos la siguiente tabla de valores.

Medidas absolutas y relativas en CSS

librosweb.es :

Las medidas absolutas en CSS son el Pixel y el Punto. Los navegadores toman por defecto el tamaño de 16 pixeles. 16 pixeles equivalen a 12 puntos.

Las medidas relativas son el porcentaje, em y rem, como dice la definición debemos establecer una medida base para que la medida tome como referencia.

Código :

html {
      font-size:100%;
      }

   body{
      font-family:georgia,serif;
      font-size:16px;
      }

   p {
      font-size:1em; 
      } 

Si quiero saber en píxeles cuánto vale 1em en base 100% hago la siguiente operación:

Código :

1em * 16px = 16px

Hay un viejo método para no estar haciendo tanto cálculo, que consiste en bajar el porcentaje para que el valor en píxeles nos de 10.

Código :

   html {
      font-size:62.5%;
      }

   body{
      font-family:georgia,serif;
      font-size:10px;
      }

   p {
      font-size:1.6em;/*16px*/
      } 

Qué logramos con esto? que nuestro pixel base ya no es 16 sino 10 y entonces la operación es más sencilla.

Código :

1.6em * 10px = 16px

Al igualar a 10px ya no tenemos que hacer operación alguna, ya que en base 62.5% 1.4em son 14px, o 25px son 2.5em.

El problema de la herencia en em

El problema de usar em es que se basa en herencias. Entonces si en una etiqueta p tengo un tamaño y establezco el mismo tamaño en la etiqueta strong por ejemplo, strong hereda el tamaño de p y lo suma. Entonces hay que estar recalculando todo el tiempo las medidas.

Código :

   html {
      font-size:62.5%;
      }

   body{
      font-family:georgia,serif;
      font-size:10px;
      }

   p, strong {
      font-size:1.6em; 
      } 

Rem, el nuevo estándar en CSS

Con rem solucionamos esto. Rem significa Root em y se basa en que con sólo declarar el rem base a html las medidas siguientes no dependerán de la herencia sino del número base.

Código :

html {
   font-size:62.5%;
   }

   body{
   font-family:georgia,serif;
   font-size:10px;
   }

   p, strong {
   font-size:1.6rem;/*16px*/
   } 

Como ven el cambio en el CSS no es tanto, y nos quitamos el dolor de cabeza de seguir recalculando y haciendo resets de más en css.

Validar rem en navegadores que no lo soportan

Hay algunas versiones de navegadores que todavía no soportan esta medida. Como el navegador no lo acepta se ponen las dos medidas, en píxeles y en rem, en ese orden, porque el navegador lee siempre el último valor.

Código :

html {
   font-size:62.5%;
   }

   body{
   font-family:georgia,serif;
   font-size:10px;
   }

   p, strong {
        font-size:16px;
   font-size:1.6rem;
   } 

Podemos usar rem no sólo para tamaños tipográficos sino como medida para márgenes, padding y demás elementos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.