La aproximación a cómo usar el texto a la hora de diseñar una web es una tarea compleja. Tenemos que partir del hecho de que más de un 90% de los contenidos que consumimos en Internet son textos. Además, piensa que podemos acceder a ese contenido desde múltiples tipos de pantallas y en diferentes condiciones. Eso nos plantea un escenario bastante complicado, donde las limitaciones técnicas marcan la toma de decisiones y la legibilidad del contenido debe ser nuestro principal objetivo como diseñadores de interfaces web.

Siguiendo algunas características básicas relacionadas con el texto, pretendo dar una guía de buenas prácticas en el uso de textos para diseño web que sirvan para aunar legibilidad y técnica:

1. Color y contraste

Las WCAG son un conjunto de estándares y pautas desarrollados por el World Wide Web Consortium (W3C) con el objetivo de asegurar que los sitios web sean accesibles para todas las personas, incluyendo aquellas con discapacidades o limitaciones de diferentes tipos.

Entre las más importantes se encuentra la capacidad de proporcionar un contraste adecuado entre el texto y el fondo para mejorar la legibilidad. Se mide con tres niveles de conformidad: A, AA y AAA, con el nivel AA como el más comúnmente utilizado. Para medirlo, debes utilizar herramientas que te permitan asegurar que cumples con un nivel doble AA como mínimo.

2. Tamaño y medidas relativas

Si alguna vez has usado un libro electrónico, sabrás que puedes ajustar el tamaño de la letra según tus necesidades. Eso mismo lo podemos hacer con nuestro ordenador y móvil ajustando las opciones de texto.

Para que el texto de nuestra web pueda también responder a esos ajustes, las medidas que se deben utilizar no son fijas como los píxeles, sino unos valores relativos llamados rem y em. Eso significa que si cambiamos los ajustes de tamaño de letra de nuestro sistema, esta medida también lo hace proporcionalmente. Si queremos un diseño accesible para personas con problemas de visión, es imprescindible el uso de medidas relativas.

Si nos centramos en el tamaño base que deben tener nuestros textos, es recomendable que el valor mínimo para un texto no esté por debajo de 1 rem (exceptuando algunos casos como el copyright y avisos legales). Por lo tanto, la medida base sería 1 rem (16px) y sobre esa escalaremos todos los textos: es decir, los párrafos tendrían como mínimo 1 rem y, según utilicemos títulos más grandes, escalamos desde ahí.

3. Ancho del párrafo

A diferencia de lo que ocurre en un libro, el texto HTML debe fluir para adaptarse a la pantalla. Las palabras de un párrafo, por ejemplo, bajarán una a una si no caben en la ventana del navegador, haciendo que la altura también aumente. Por lo tanto, no podemos controlar el tamaño de las cajas de texto de un artículo, hay que prever y dejar el espacio adecuado para el desarrollo del enunciado.

Según vemos, los párrafos fluyen y se adaptan al ancho de la ventana. Pero, ¿dónde está el punto donde deja de ser cómodo leer un párrafo que va de un lado a otro de una pantalla grande? Por lo general y según las pautas de Material Design, se sugieren entre 40 y 60 caracteres por línea dentro de un párrafo. O si lo establecemos por porcentajes, en el móvil y tablet usaremos casi un 100% de la pantalla, mientras que en escritorio rondará el 70% del ancho del contenedor principal, discriminando lo que queda fuera en el cálculo.

4. Interlineado de los textos

Por defecto, el interlineado en los párrafos web es escaso; podemos abrirlos un poco para hacerlos más cómodos en la lectura, pero no tanto como para romper el ritmo. Una norma base para los párrafos sería subir el line-height un 150%. En cambio, en los títulos dentro de etiquetas <h> es recomendable bajar el line-height a 100%, ya que por defecto pueden resultar muy abiertos. No existe una fórmula ideal, dependerá de la fuente y el fondo para obtener la mejor opción.

5. Alineación

Según la dirección de la lectura, en nuestra región es de izquierda a derecha, los textos deben dejarse alineados a la izquierda. Nunca se justifica el texto en web porque produce calvas en los párrafos, ya que no existe separación automática de palabras.

Con respecto a la alineación centrada, tampoco es recomendable porque el comienzo de la lectura es irregular. Se suele utilizar solo cuando es una frase promocional, va debajo de un icono o foto de perfil y no supera las dos o tres líneas.

6. Jerarquía

La utilización de la jerarquía va ligada el tipo de fuentes que puedes usar en un documento web. Además, debe tener en cuenta la semántica de las etiquetas HTML para la indexación del documento y el posicionamiento SEO. Lo importante con respecto a su percepción es usar bien los espacios y ordenar la información para poder diferenciar el título de los párrafos y los metadatos. Y eso lo vamos a conseguir usando diferentes tamaños, grosores y estilo del texto.

En conclusión, muchas de las cuestiones relativas al uso de texto en el diseño gráfico son válidas para el diseño de interfaces web, pero es importante resaltar las peculiaridades de los medios donde se va a visualizar este elemento tan importante en la comunicación.

Hay que atender a las condiciones y limitaciones técnicas que tiene el desarrollo web y, además, aportarle las nuevas características que han derivado de los estudios en accesibilidad del diseño UX / UI.