Las nuevas unidades rem en Twenty Twelve de WordPress 3.5

Michael Stripe de R.E.M. (autor)

Michael Stripe de R.E.M. (autor)

Con la nueva versión de WordPress 3.5 también han actualizado el theme por defecto, llamado Twenty Twelve. Lo que más me llamó la atención nada más ponerme a investigar este nuevo theme, es la nueva unidad de medida, llamada REM. Esta unidad de medida se presentó con CSS3, e intenta terminar con todos los problemas que tenemos los desarrolladores web a la hora de hacer webs que se adapten al dispositivo del usuario.

El origen fue el píxel

Normalmente en informática se mide con pixeles (px), que es un punto. Si por ejemplo tenemos una resolución de pantalla de 1680×1050, tenemos 1680 pixeles de ancho y 1050 pixeles de alto. Esto está muy bien, pero cuando definimos el tamaño de las fuentes de letra en nuestra web con píxeles, hay navegadores que no amplían y reducen la web correctamente al darle a CTRL + y CTRL – (en realidad el que da problemas es únicamente Internet Explorer hasta su versión 8).

Como es un problema muy grave no poder cambiar el tamaño de la web, para facilitar la lectura del texto o para mejorar su accesibilidad, se empezó a usar una unidad relativa de medida, que cambiara según el porcentaje de escalado que quería el usuario. Así, se popularizó la unidad EM.

La posible solución fue el EM

La unidad de medida EM se basa en el tamaño de puntos especificado. Esto se hace en la etiqueta body, definiendo que font-size queremos para todo el documento. Si por ejemplo ponemos que la base son 16 píxeles, entonces 1 em equivaldría a 16 px, 2 em sería 32 px, etc…

La ventaja de usar ems en vez de px es que Internet Explorer y demás navegadores pueden escalar el tamaño del texto en el documento, y así empezaron a aparecer las primeras webs adaptables a las necesidades del usuario.

El problema, que siempre lo hay, es que la unidad em hereda el valor de la etiqueta que lo contiene. Por poner un ejemplo:

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

Con este CSS, cada elemento de la lista (li) esperaríamos que tuviera un tamaño de 14px, cuando en realidad lo tiene de 20px. Si bajamos un nivel más (li li), entonces mediría 27px! Como este comportamiento heredado daba más problemas que otra cosa, se inventó el REM.

Y apareció el REM

El comportamiento de la unidad rem es igual que el em, pero basándose únicamente en el tamaño definido en body, evitando la herencia. De esta forma disponemos de una unidad de medida relativa, que permite el escalado de nuestra web, sin tener que pelearnos con herencias.

Usando el ejemplo anterior, definimos que la unidad base sea de 10px con la siguiente operación:

10px / 16px = 0,625 (Necesitamos definir que nuestra base sea 62,5% del tamaño base de 16px)

y obtenemos:

html { font-size: 62.5%; } /* Asignar base a 10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Ahora, al definir el tamaño en rem, no tenemos que preocuparnos de las herencias, y sabremos a ciencia cierta que tamaño de letra estamos definiendo, según la operación:

Tamaño de letra deseado / tamaño de letra base = unidades en REM

Curiosamente, la unidad REM funciona correctamente en todos los navegadores, incluso Internet Explorer.

¿Cómo usar unidades REM en WordPress?

Ahora vamos con lo que de verdad nos interesa, a usar las unidades REM en nuestro theme de WordPress. Para editar por ejemplo Twenty Twelve, tenemos que tener en cuenta que usan como unidad base 14 pixeles (Esto lo vemos en la línea 476 del styles.css)

html {
    font-size: 87.5%; /* 14 / 16 = 0,875 */
}

Así, tan sólo tenemos que tener en cuenta que la base ($rembase) son 14 px, y el line-height son 24 px. Para calcular el tamaño de letra que deseamos lo dividimos entre $rembase y usamos el número obtenido, cogiendo 5 o 6 decimales.

Algunos ejemplos:

font-size: 16px;
font-size: 1.142857143rem; (16 / $rembase, 14)
line-height: 1.5; ($line-height, 24 / 16)

La unidad rem también la usan en Twenty Twelve para definir padding, margin, así como font-size.

padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase, 14)

Mi consejo para calcular rápidamente cantidades en WordPress es usar conversiones directas, como las siguientes:

 0.5 rem = 7px
 1 rem = 14px
 1.5 rem = 21px
 2 rem = 28px
 2.5 rem = 34px
 3 rem = 42px

Espero que con esta pequeña introducción puedas usar las unidades rem sin miedo. Si tienes cualquier duda, puedes dejar un comentario o solicitar Asistencia rápida.

4 pensamientos en “Las nuevas unidades rem en Twenty Twelve de WordPress 3.5

  1. Fernando

    Hola ¡

    te sigo desde hace poco…y me parece genial tu blog.,,,enhorabuena ¡¡

    Yo tengo un Samsung SII y hay veces que los textos de un blog se adaptan a mi pantalla y otras veces no. Al principio pensaba que era cosa de configuración de mi smartphone pero, después de leer tu artículo, creo que confirmo lo que ya sospechaba: El formato se adaptará a mi dispositivo dependiendo si el administrador del blog que estoy viendo ha configurado correctamente las unidades REM….¿es así?

    1. machbel

      El que se adapte o no al móvil se debe a que la web sea responsive o no, adaptándo el interfaz a la resolución del dispositivo. Desde tu móvil no puedes hacer nada para evitar esto, solo avisar al webmaster de que actualice la web.
      Un saludo!

Deja un comentario