Controla la legibilidad de tus webs con el text-rendering y sus alternativas

¡Muy buenas! ¿Cómo lo llevas? Hoy te traigo al blog un artículo muy breve sobre un tema que descubrí hace no tanto. De hecho, la idea surge porque estaba hace unas semanas leyendo código de una librería y me encontré algo que no conocía. Se trata de una propiedad de CSS –que no es realmente de CSS– que nos permite actuar sobre la legibilidad de nuestros textos, el text-rendering, y tirando del tema llegue a otras propiedades que también nos dan un manejo distinto de las fuentes de lo que habitualmente sabemos.

Así que… ¡dentro tema!

Introducción: el concepto de la legibilidad en web.

Entendemos por legibilidad aquel conjunto de características que hacen que una tipografía y, por tanto, un texto, sean fáciles de leer para el ojo humano. Hay muchas variantes que pueden afectar a la legibilidad, tanto de la «anatomía» de una tipografía en sí como de la disposición, tamaño y espaciado de las palabras y los bloques de texto, sin olvidarnos del asunto del contraste y los colores. Ya ahondaremos en detalles sobre esto algún otro día, pero lo que es clave saber es que la legibilidad es uno de los elementos fundamentales de la usabilidad web y del buen diseño.

Además, el formato web y ahora el formato móvil presentan sus retos particulares, porque nunca va a ser tan cómodo leer en una pantalla retroiluminada como lo es en papel, ni vamos a usar la misma distancia de lectura con un libro que con un monitor de escritorio.

Y es que, no nos engañemos, leer en una pantalla cansa más. Otra cosa es que nos hayamos acostumbrado y que además presente otras ventajas para nosotros, pero no es lo mejor que podemos darle a nuestra vista. Por lo tanto, está en nuestra responsabilidad como diseñadores tomar todas las medidas que podamos para que el proceso de lectura sea lo más efectivo, agradable y rápido para nuestros usuarios.

Una de esas medidas es, precisamente, una variable que corresponde al tipo de renderizado de las tipografías en el navegador, conocida por el nombre de text-rendering.

Text-rendering: CSS, pero no.

Text-rendering es oficialmente una propiedad de CSS, con soporte en la mayoría de navegadores (excepto el siempre nefasto IExplorer), y no es precisamente algo nuevo, pero no está definida en ninguno de sus estándares. What? ¿Dónde está el truco? Pues la trampa es que realmente el text-rendering no es en sí dominio del CSS, sino una propiedad de los SVG, los formatos de imagen vectoriales basados en XML.

Lo que sucede cuando actuamos sobre esta propiedad desde CSS es que le estamos indicando a los navegadores con los que es compatible, que son aquellos basados en el motor Gecko (como Firefox) y los WebKit (Chrome, Safari, Opera y muchos otros), que debe utilizar un modo u otro de renderizado para los textos dentro de su contenido HTML y XML. Porque, por si no lo sabías todavía, gran parte de las fuentes que utilizamos hoy en día están basadas en vectores y no en mapas de bit.

Dicho de otro modo, podemos darle instrucciones de forma global a los navegadores, que son los que controlan cómo se renderiza la información que les llega de los trazados de la fuente, para el tratamiento de las fuentes Open Type. Al tener estas libertades podemos elegir que las fuentes se muestren de formas más precisas y legibles mediante la modificación del kerning (espaciado entre ciertos caracteres) o las ligaduras (trazos entre algunos caracteres) o, por el contrario, priorizar el rendimiento al optimizar la velocidad de carga.

Nota: el kerning es un concepto de tipografía que establece un espaciado particular para las combinaciones de ciertos caracteres (como la T y la e, por ejemplo). A no confundir con el tracking o letter-spacing en CSS, que lo que hace es aumentar o disminuir el espacio entre las letras de forma equitativa.

¿Y cuáles son estas instrucciones? Vamos a ver en qué consiste cada una.

Valores del text-rendering

Auto

text-rendering: auto;

Es el valor por defecto, lo que lleva sucediendo siempre. Es tu propio navegador el que decide cuándo debe priorizar la velocidad, la legibilidad o la precisión geométrica a la hora de pintar texto. Obviamente, esto también queda al criterio personal de cada navegador, de modo que con este valor podemos tener resultados distintos dependiendo de dónde los rendericemos.

En general, uno de los criterios que usan los navegadores para elegir el renderizado es el tamaño del texto. Así, generalmente auto mejora la legibilidad si el tamaño del texto es inferior a 20px y mejora la velocidad para las fuentes más grandes. Pero, una vez más, todo esto depende del navegador que se use y su propia idiosincrasia. Aunque en la mayoría de casos nos dará buen resultado, tenemos el text-rendering precisamente para no dejar eso a su libre albedrío.

Optimize Speed

text-rendering: optimizeSpeed;

Esta opción nos permite priorizar la velocidad por encima de la precisión y la legibilidad. En estos casos el navegador deshabilita cualquier kerning y las ligaduras entre combinaciones de caracteres y directamente los muestra uno detrás de otro, sin calcular nada ni leer la información adicional que ciertas fuentes llevan.

Optimizar la velocidad puede ser importante en los casos en los que la cantidad de texto es muy grande (en cantidad y/o en tamaño) y, además, puede no ser otra opción en ciertas versiones de Android y de iOS, dependiendo de la capacidad de procesamiento de los dispositivos que los mueven.

Optimize Legibility

text-rendering: optimizeLegibility;

Lo opuesto al caso previo: aquí priorizamos la legibilidad. Ello significa que damos permiso al navegador para que se tome todo el tiempo y recursos necesarios para calcular cómo debe mostrar bien la fuente, dependiendo de qué caracteres tenga adyacentes, y dependiendo de qué instrucciones le vengan dadas por el archivo de la propia tipografía; sin que nos importe ni la cantidad de texto mostrado ni el tamaño del mismo.

Con esta opción tenemos al usuario lector contento y agradado, pues visualmente hemos mejorado mucho la experiencia, pero no todo son ventajas. Nos estamos cargando el rendimiento, afectamos al tiempo de carga de la página (y por tanto, al SEO) y en dispositivos móviles puede generarnos hasta problemas serios.

De hecho, deberíamos tener mucho cuidado si optamos por priorizar la legibilidad cuando tenemos más de 1000 palabras en nuestra página, porque en un navegador móvil nos puede dar problemas importantes. Así que, si vas a tocar esto, recuerda que existen las media queries en CSS y blinda la experiencia en formatos reducidos.

Geometric Precision

text-rendering: geometricPrecision;

La precisión geométrica se distrae de la legibilidad a otro nivel, ya que su prioridad principal es el escalado adecuado de las fuentes y sus espacios para que estos sean exactos. La idea detrás es que normalmente las tipografías no se escalan de manera lineal. Si nosotros tenemos una fuente de tamaño 16px, que suele ser un estándar, y luego la escalamos a 140% para uno de los títulos, no vamos a tener una fuente de 22.4 píxeles disponible. Eso no existe de forma explícita en el sistema de la fuente, así que se nos redondeará el resultado a 22px.

Sin embargo, lo que hace el navegador cuando le decimos que priorice la precisión geométrica es precisamente escalar el texto de manera fluída, sin redondear a nada. Así que, si queremos, podemos tener nuestro título con sus 22.4px, porque así lo ha querido el diseñador. Siempre y cuando el usuario use cierto tipo de navegador, claro, porque sólo nos vamos a encontrar esta opción de forma real en los navegadores WebKit. Los Gecko aplican esto sólo como un optimizeLegibility.

Si queréis mi opinión, no le veo demasiado interés a esta opción, salvo en casos en que queramos realmente crear una obra maestra de títulos encajados al milímetro, pero en la era de lo responsive no me parece la elección más sabia.

Comparativa: optimizeSpeed VS optimizeLegibility

Para cerrar este tema del text-rendering, aquí tenéis un ejemplo de código en el que se puede apreciar la ligera pero existente diferencia entre un método u otro:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Corben&family=Raleway:wght@300&display=swap" rel="stylesheet">


<div class="wrapper-demo">

<div class="corben">
  <p class="render-speed">TI Ti ff fl ffi st ct.</p>
  <p class="render-legibility">TI Ti ff fl ffi st ct.</p>
</div>

<div class="raleway">
  <p class="render-speed">LYoWAT - ff fi fl ffl</p>
  <p class="render-legibility">LYoWAT - ff fi fl ffl</p>
</div>
  
</div>

.wrapper-demo > * {
  padding: 20px;
  font-size: 24px;
}

.wrapper-demo p { margin: 5px 0; }

.raleway {
  font-family: "Raleway", sans-serif;
}

.corben {
  font-family: 'Corben', cursive;
}

.render-speed {
  text-rendering: optimizeSpeed;
}

.render-legibility {
  text-rendering: optimizeLegibility;
}

También os dejo este enlace a un codepen para que podáis jugar con ello.

Alternativas al text-rendering

Lo que hemos visto está muy bien pero, siendo sinceros, probablemente nos baste con que suela ser el navegador el que gestione la muestra de texto en la gran mayoría de casos. Ahora bien, lo que sí puede ser un tema que queramos controlar a dedo nosotros es que en ciertas ocasiones podamos usar una tipografía en todas sus consecuencias.

Que queremos que haya ligaduras porque la fuente las soporta, las forzamos. ¿Que no nos gusta el kerning? Pues lo quitamos. Ambas cosas de forma individualizada. Para ello no hace falta pasar por modificar el sistema de renderizado de la fuente. Basta con utilizar otras propidades muy propias (ja) y concretas que nos da CSS3. Estoy hablando, respectivamente, de font-variant-ligatures, y por otro, de font-kerning.

Pero hay algo todavía más potente de las tipografías que usamos. El nivel experto es usar la propiedad font-feature-settings, desde la cual podemos habilitar y deshabilitar características de la fuente con total control.

No es ni muy conocida ni muy usada porque, generalmente, las propiedades de tipo font-variant son mucho más semánticas y fáciles de manejar y recordar que la configuración que admite font-feature-settings. De manera que cierro este artículo invitándote a echarles un vistazo. Probablemente te descubran que puedes hacer muchas cosas con el texto que no sabías, ¡tan sólo cambiando algunas clases de tu hoja de estilos!

Y esto es todo por hoy en este breve tema de tipografía. Espero que os haya resultado interesante.

¡Nos leemos pronto!