Las unidades de CSS no tienen mucho misterio, ya que están documentadas en cientos de sitios web, sin ir más lejos en DesarrolloWeb.com tenemos varios artículos sobre el tema. Pero en la práctica surgen dudas sobre estos asuntos porque, a veces, las personas no tenemos claro cuándo utilizar em o rem, porcentaje, etc. cuando se trata de dar tamaño a los textos.

Sobre este asunto, Daniel Martínez estuvo exponiendo las respuestas a los problemas más típicos a la hora de asignar tamaños a las fuentes, siempre con unidades de medida para las hojas de estilo que se adapten al dispositivo, para el Responsive Web Design.

Las mejores unidades de medida para los textos en CSS

Como debemos de saber, cuando trabajamos con diseños adaptables, debemos usar siempre medidas relativas, para que éstas se adapten a las dimensiones de las pantallas donde pueda verse el sitio web. Esto nos obliga a descartar px, cm, pero nos quedan varias otras donde elegir.

Básicamente, la mejor unidad para trabajar textos adaptables en CSS es el rem, "la unidad perfecta". Esta unidad de medida quiere decir "root em", y es aquella que nos remite al tamaño de fuente que tenemos en la raíz. Por ejemplo, si nosotros tomamos el BODY y tiene un font­size de 100% (lo que corresponderá generalmente con unos 16 píxeles), sabemos que siempre rem será equivalente a esos 16 píxeles, lo pongas donde lo pongas.

Por qué rem es más útil que em

Hasta hace poco, estoy seguro de que muchos de los desarrolladores venían utilizando unidades de medida en em, pero ¿cuál era el problema con estos em? pues que el em depende del tamaño de la fuente del contenedor, o del tamaño de fuente declarado en alguno de los contenedores padre de éste.

La unidad em es relativa al padre, que si tiene a su vez otra unidad en em, se hace relativa al padre y así, en la jerarquía de elementos hasta llegar al elemento raíz, el BODY. Esto, que puede resultar fácil de entender, en la práctica a veces nos puede dar algún quebradero de cabeza al calcular qué medida es exactamente un em en un contenedor, porque dicho tamaño depende de una innumerable cantidad de contenedores que pueden estar anidados, hasta llegar al contenedor donde estamos indicando las medidas. De este modo, para cambiar el tamaño de la fuente de ese elemento, tenemos que tener en cuenta muchas otras medidas que pueda haberse dado a cualquiera de los padres en la página.

Calculando un valor en em

Veamos esto en números para darnos cuenta de cómo se debe calcular el tamaño de una fuente usando em, para hacerla corresponder al tamaño de píxeles deseado.

Imaginemos el tamaño base de la fuente es de 16 píxeles. El tamaño de un H1 imaginemos que lo queremos de 24 píxeles, que sería 1.5em. ¿Por qué? pues tenemos que aplicar la regla "target/context" el target es la medida que le queremos dar al H1, 24px y el contexto es la medida del contenedor donde estamos 16px. De modo que la medida que le tenemos que poner al H1 sería de 24/16 = 1.5em.

Pero ahora imaginemos que dentro del H1 tenemos un link y queremos darle un tamaño de letra menor, digamos 12px. Ahora ya no podemos dividir 12/16 para saber el tamaño de esa medida en em, ahora tendríamos que tener en cuenta el tamaño del H1 que habíamos quedado que era 1.5em. Si no sabemos que eso equivale en este caso a 24px, primero deberíamos de calcular el tamaño del H1 para llegar a los 24px que tenía. Target sería 12px y context 24px, de modo que 12/24 = 0.5em el tamaño en em que deberíamos poner al enlace.

Pero la cosa se puede complicar todo lo que queramos. Ahora podemos imaginar que dentro del link hay un SPAN, al que queremos darle otro tamaño de fuente distinto. Si queremos acertar con el tamaño deseado tendremos que tener en cuenta el tamaño del BODY, el definido luego para el H1, el definido para el enlace y finalmente calcular el tamaño del SPAN.

Pensando en otros dispositivos

Pensemos además en diferentes dispositivos. El tamaño de una fuente en un móvil podría ser si se desea un poquito menor que el tamaño de fuente en un Ipad.

Si queremos entonces reducir la fuente podríamos asignar al BODY, por medio de "mediaqueries" para pantallas pequeñas, un tamaño de 80% en el tamaño de la fuente. Como todas las fuentes están definidas con medidas relativas, encontraremos que se reducen en toda la página, pero en la práctica observaremos que se nos empieza a descuadrar, que los tamaños no casan.

Estos son los típicos problemas que evitamos con rem.

Cómo funcionan las unidades Rem

Rem no funciona de manera relativa a su contenedor, sino de manera relativa al tamaño definido en la raíz. De esa forma, cuando quiero calcular una medida de un elemento, no tengo que pensar en el tamaño de su padre o en el tamaño del padre del padre.

La regla del "target/context" sigue valiendo perfectamente, pero puedo hacer la cuenta siempre con respecto al tamaño definido en la raíz.

Si en el elemento BODY teníamos 16px de tamaño y quiero 24px en el H1, tengo que calcular 24/16 = 1.5rem. Si luego en el enlace que había dentro del H1 quiero que sea 12px, tengo que calcular como context 16px (que era el equivalente al 100% definido como tamaño de la raíz) y no el tamaño del H1. O sea, en este caso sería 12/16 = 0.75rem.

Compatibilidad con las unidades de medida Rem y fallback

Infelizmente, existe un problema con las unidades de medida especificadas en rem y no es otro que Internet Explorer 8 y por supuesto, las versiones anteriores a éste. Los IE antiguos no son compatibles con las unidades rem.

La solución es sencilla y se realiza por lo que se denomina fallback, que se basa en especificar código alternativo en caso de que no funcione el original. En este caso el fallback es tan sencillo como especificar las medidas en dos unidades.

font­size: 16px;
font­size: 1rem;

Los navegadores antiguos que no entienden rem se quedarán con font­size 16px (porque ignoran la segunda línea, ya que no son compatibles con esa unidad). Los que entienden rem simplemente leen la segunda línea y sobreescriben el valor especificado en la primera.

Ciertamente nos da un poco más de trabajo especificar por partida doble todas las medidas, pero aquí encontramos una de las ventajas de usar los llamados preprocesadores CSS. Éstos tienen la posibilidad de escribir un mixin por medio del cual podemos indicar en nuestros CSS, siempre medidas en píxeles y luego que el propio preprocesador sea el que la convierta a rem, mediante la regla target/context y escriba las dos unidades de medida, tanto en rem para los navegadores modernos y píxeles como fallback para los Internet Explorer antiguos.

Conclusión

De momento, con estas informaciónes esperamos que tengas suficiente para empezar a experimentar con los rem y asignar de manera más sencilla los tamaños de las fuentes de tus sitios web.

Si te ha interesado este artículo debes saber que simplemente te hemos resumido los primeros 14 minutos del programa. Estuvimos hablando sobre muchas otras medidas y unidades en CSS, no solamente para las fuentes, sino para otros tipos de atributos, como altura, anchura, etc. Todo eso lo encontrarás en el #designIO sobre unidades de medida CSS.