Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Entendiendo las unidades rem de CSS

Entendiendo las unidades rem de CSS 14.OCT.15

Alvaro José Rios Ch
Fundador WebBizarro

Bien para los que no conocen el termino rem en css se refiere a una forma de establecer el font-size basado en el tamaño de la tipografía en el elemento raiz, es decir cuando colocamos un font-size de 1rem lo establecemos en el tamaño de la tipografía del elemento html que por defecto es 16 px.

La principal diferencia con la unidad em es que esta coloca el tamaño de la tipografía relativo a la raiz de el propio elemento, es decir si tienes el siguiente código donde queremos que los elementos en una lista tengan un font-size de 12 px.

html {
    font-size: 100%;
}
ul {
    font-size: 0.75em;
}

Como ven todo está bien, el problema viene cuando tenemos listas anidadas ya que la lista interna no tomará el valor de 12 px ya que el tamaño del elemento raiz sería de 12px por lo que la lista anidada tendría un tamaño de 9px, en ese caso tendriamos que hacer algo así.

ul ul {
    font-size: 1em;
}

Como ven ya no es muy bonito y no se entiende muy bien, por esto las unidades em no son muy usadas, porque pueden causar comportamientos inesperados.

En contraste si hacemos lo mismo con rem entonces veriamos algo como esto.

html {
    font-size: 100%;
}
ul {
    font-size: 0.75rem;
}

Todos los elementos ul tendrían el mismo tamaño ya que todos hacen referencia al elemento raiz.

El problema con las unidades rem es que no es que un rem equivale a 16px por defecto, entonces es complicado colocar los tamaños adecuados a las tipografías, por eso se usa un truco llamado la regla del 62,5%, que lo que hace es basicamente colocar el tamaño de la tipografía raiz en 10px lo que facilita mucho las cosas.

body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

Como ven solo tienen que dividir entre 10 el valor en pixeles para colocar el valor en rem, una solución bastante inteligente, el problema es que tendremos que cambiar el tamaño de todas las tipografías en nuestro sitio.

Otra solución interesantes es no usar una sola unidad para establecer los tamaños sino usar las tres unidades, es decir, establecer los tamaños del elemento raiz en pixeles, usar rem para los modulos como el header, footer, nav y para elementos dentro de los modulos usar em, esto para que el tamaño de estos últimos se adapte al de los modulos, un punto de vista muy útil si estamos haciendo sitios web responsive, sin embargo este último requiere de mucha planificación para no terminar con comportamientos impredecibles en el sitio.

Finalmente también podemos hablar de otros usos para el rem, no solo se puede usar para establecer el tamaño de las tipografías sino también para las propiedades padding, margin, width y en general para casí todas las propiedades pero siempre la medida se basa en el font-size establecido a la raiz.