4.3. Verdaderos tipos móviles: fuentes adaptables
Al plantear un diseño fluido, en donde los elementos se escalan en relación a sus contextos, es necesario utilizar unidades relativas en, hasta donde sea posible y lo permita el bosquejo gráfico, la mayoría de sus componentes. Habitualmente, en proyectos web se suelen utilizar valores en pixeles para definir cuerpos tipográficos ya que, como cuando se usan anchos fijos, se tiene la sensación de poseer mayor control sobre el flujo estético de la página. Sin embargo, ya se ha demostrado que ésta es una práctica inflexible, y que es contraria a los principios del diseño web responsivo. No es posible, al menos no de manera dinámica, que el contenido fluya líquidamente en sus contenedores si se restringe la adaptabilidad del mismo.
Con este fin se utilizan entonces otras unidades de medidas, como em y rem. Ver Tabla 2: Unidades relativas en CSS. Si bien ambos comparten raíces, no son exactamente lo mismo.
El término em es simplemente una manera de expresar la letra ‘M’ en forma escrita y se pronuncia como tal. Históricamente, se usaba la letra ‘M’ para establecer el tamaño de una fuente determinada, debido a que […] es la más grande (más ancha) de las letras. Hoy en día, EM (sic.) como una unidad de medida define la proporción de la anchura y la altura de una letra con respecto al tamaño en puntos de una fuente dada (Frain, 2012, p. 76).
Al ser una unidad de medida relativa, es complicado imaginar un em en el espacio. Gráfica y físicamente no existe como tal, sino que se configura sobre la marcha en relación a un valor pre-establecido, a partir del cual adapta sus propios valores. Un em equivale al tamaño base de la fuente de un elemento, definido en la propiedad font-size. Esto quiere decir que todas las declaraciones que se midan en em en ese elemento o en sus descendientes que hereden este valor, serán un múltiplo del número establecido como tamaño de fuente. “Dimensionar las fuentes de tus elementos relativamente significa que sólo es necesario ajustar la línea base inicial y el resto del contenido se ajustará automáticamente – proporciones intactas” (Kadlec, 2012, p. 29).
Un caso de aplicación real es, por ejemplo, un elemento de lista desordenada – <ul> – cuyo font-size es de 22px. Al establecer márgenes en sí mismo, o en sus descendientes – etiquetas de lista <li> – de manera relativa con em, por ejemplo 0.5em, este valor será computado como 22 x 0.5 = 11, es decir 11px de márgenes. Si no se define un valor de base en px, sino que se utilizan siempre ems, el navegador tomará como cuerpo el que establece por defecto a todas las páginas por igual, 16px. Es importante resaltar que el usuario cuenta con la posibilidad de cambiar ese número manualmente desde las opciones de la aplicación, y se han reportado navegadores en dispositivos móviles que establecen el tamaño de fuente en números mayores, así que es una buena idea o práctica definir inicialmente un valor en pixeles sobre el cual sentar bases, siendo también 16px una cantidad recomendada.
Con la llegada de CSS3, una nueva unidad de medida ha sido introducida. Rem, abreviación de root em – es decir, em raíz – funciona de manera similar a em, excepto que la formulación matemática para calcular su valor no se hace sobre la propiedad font-size del padre del elemento directamente, sino que absolutamente todos ellos, sin importar en qué nivel jerárquico se encuentren, heredan el mismo tamaño de cuerpo, definido en el elemento raíz de toda página web, <html>. Esto quiere decir que únicamente es necesario establecer un número para el root y luego establecer valores con unidad rem que sean proporcionales a aquél. Esto soluciona los problemas de herencia y agravamiento progresivo que puede ocasionar un uso inconsistente de unidades em en elementos anidados.
Si bien es un módulo introducido con la última versión de CSS, todos los navegadores modernos soportan correctamente esta unidad de medida relativa. No obstante, hay versiones anteriores de los mismos que no saben interpretarla, como por ejemplo Internet Explorer 8 y previos, los cuales cuentan, aún, con una gran base de usuarios, por lo cual hay que evaluar si la utilización de rems afectará, y en qué medida, a la experiencia de algunos navegantes. Una sugerencia habitual es proveer valores fijos en pixeles antes de usar rems, de manera que los navegadores que tengan soporte para este módulo, utilicen la última declaración como válida, ya que como se ha mencionado anteriormente, a menos que se indique lo contrario, al superponerse declaraciones en CSS el navegador graficará en pantalla sólo la última definida.
Entonces, ¿qué opción conviene usar para diseños responsivos? Si bien ambas opciones son símiles y escalables, es preferible, al menos por el momento, utilizar em. Como bien explica Tim Kadlec, rem aún es una novedad, por lo que no es recomendable obviar una recurrencia a un valor en pixeles.
Usar ems no sólo permite que la tipografía escale, sino que también puede facilitar el mantenimiento. Si decide aumentar el tamaño de fuente en todo su sitio, basta con cambiar el porcentaje que se aplica al cuerpo y ya está todo listo. Con rems, ya que tienes que recurrir al uso de pixeles, tendrás que actualizar cualquier elemento con pixeles como tamaño en todo el código. (2012, p. 33)