Comunidad de diseño web y desarrollo en internet

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 :

CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado. Fuente


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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate