DIA 18 / 2017

Guía incompleta de diseño visual de textos para productos digitales

Una pequeña ayuda para responder las preguntas, por lo menos algunas, que nos vamos a hacer al diseñar el formato de contenidos de texto que vivirán en el mundo digital.


Esto va de diseñar. Y supongo que ya habremos escuchado y leído que diseñar no es solamente «ponerlo bonito».

Diseñar va de ofrecer soluciones estableciendo una comunicación lo más eficiente y convincente posible. Diseñar va de preocuparse. Preocuparse por todo para que luego las personas a las que va dirigido el asunto no tengan que hacerlo por nada y simplemente disfruten. Y para hacerlo bien hay que contestar muchas preguntas en el camino.

El diseño visual podemos entenderlo como esa tarea con la que definimos cómo va a ser la fachada del edificio que representa el proceso completo de diseño del producto digital, pero si hablamos de cronología, sería quizá más útil verlo como el tejado, o por lo menos como uno de los pisos con mejores vistas. Y los edificios se construyen desde abajo (excepto Petra) así que cuando llegamos al momento de definir visualmente el producto ya se han debido realizar previamente determinadas tareas de análisis cruciales para que, al llegar a este punto, tomemos decisiones en la dirección correcta y el edificio sea estable, robusto y no se caiga. Ninguna decisión se debe tomar jamás “porque sí”, o “porque me gusta”. No se trata de si me gusta, se trata de si funciona o no para ese caso concreto.

Y por algún sitio hay que empezar. Y como en esto del diseño ya sabéis… «Content is king» lo mejor a la hora de comenzar a plantear un sistema de diseño es, en mi opinión, empezar por ahí.

La gente es muy reticente a leer. Y si se decidió que había que mostrar un texto, es porque necesitamos que se lea, así que lo tenemos que poner lo más fácil posible.

Voy por lo tanto a intentar ayudar a responder las preguntas, por lo menos algunas (de ahí lo de “incompleta” del título), que nos vamos a hacer al elegir el formato de los contenidos de texto cuya vida transcurrirá en el mundo digital. Haré alguna referencia en algún caso al soporte en papel, pero solo para tomarlo como contrapunto.

Vamos al lío…

Cuerpos de texto (body copy)

Tamaño

Cuanto más mejor y como mínimo 16 píxeles

Porque cuanto más grande mejor se lee. Eso sí, ten en cuenta que, a la hora de jerarquizar visualmente tus contenidos de texto, si te pasas con el tamaño del cuerpo puede que luego tengas problemas con el tamaño de tus titulares más importantes por ser demasiado grandes.

En digital no tenemos las limitaciones de espacio que tendríamos en papel. En papel, el número de páginas de una revista o un libro afecta a los costes y puede incluso repercutir en su viabilidad. Ahí, cuantas más páginas, más costoso, lo que lleva a intentar ser comedido con el tamaño del cuerpo de texto. Por eso, en papel, lo normal es que sea de entorno a 9 o 10 puntos (a no ser que se trate de un producto con un público objetivo que lo requiera, como niños pequeños o personas mayores, donde sería algo mayor).

En cambio, en digital no tenemos que contar con ese problema de costes por espacio así que nos podemos permitir trabajar con un cuerpo de texto mayor. No se talan árboles por alargar la página y al usuario no le molesta hacer scroll vertical en la ventana (donde sí le molesta y mucho hacer scroll es en textareas con un tamaño insuficiente para el texto que contienen, que lo único que consiguen es agobiar).

Otro factor por el que el cuerpo de texto en digital puede ser más grande es que las pantallas han ido creciendo a lo largo de los años y disponemos de más espacio por encima del pliegue. Los viewports han crecido mucho, lo que nos permite aumentar el tamaño del texto mejorando la legibilidad sin problema.

Probablemente en mobile, cuando el viewport es pequeño, reduzcamos algo el cuerpo de texto. Ahí estaremos más limitados de espacio y, buscando que se muestre la mayor cantidad posible en una misma pantalla, nos podemos permitir definir el tamaño un poco más pequeño ya que esa reducción se compensa con el hecho de que la distancia desde la que lo leemos es menor (la distancia a la que leemos en el móvil es menor que la distancia desde la que leemos en un monitor).

En cualquier caso, el tamaño mínimo puede variar levemente en función de la tipografía escogida, pero es recomendable no bajar de 16 píxeles por la pérdida de legibilidad.

Color

Con suficiente contraste con el fondo, sin pasarse.

Necesitamos que el color del texto disponga del suficiente contraste con su fondo para que se lea correctamente. Cuidado con pasarse que también es malo. Si hay demasiado contraste entre color del texto y su fondo podemos cansar la vista del lector (usuario). Así que mejor evitar un texto completamente negro sobre un fondo completamente blanco, y lo inverso. En ese caso, mejor que usar un gris muy oscuro sobre blanco, o gris muy claro sobre negro.

Sugerencia: “Tiñe” el gris virándolo a colores fríos o cálidos según la línea gráfica del proyecto. Hará que todo quede más integrado.

Tipografía

La legibilidad, la prioridad absoluta al elegir.

Para el cuerpo de texto, procura elegir una tipografía con una altura de la x generosa. Se leerá mejor.

Procura también elegir una tipografía cuyos glifos tengan una forma que haga que se diferencien entre sí fácilmente. Se leerá mejor.

Es recomendable que la tipografía del cuerpo de texto disponga en sus glifos de una proporción cercana a 1:1 de alto/ancho. Se leerá mejor. Evita por lo tanto elegir variantes «narrow», «condensed» o «extended».

Mejor sans-serif, pero cada día menos.

Lo más usual es elegir una tipografía sin serifas (sans-serif o de palo seco) para los cuerpos de texto destinados a leerse en una pantalla. Suele ser así porque estas tipografías son más simples visualmente en su construcción. Sus glifos se construyen utilizando únicamente los trazos indispensables para que cada uno de ellos sea comprensible, evitando adornos y sin recrearse en su forma. Menos elementos y menos carga visual en un espacio pequeño nos lleva a más facilidad de lectura.

Cuando el soporte del cuerpo de texto es el papel, su tipografía es paradójicamente lo contrario, normalmente una tipografía con serifas (serif o roman) porque en papel los textos son más pequeños, como apuntaba antes, y las serifas, además de la función estética, ayudan a la legibilidad al sujetar visualmente la línea de texto aportándole más continuidad y horizontalidad. También influye que la resolución de impresión suele ser de 300ppp, suficiente para definir sin problemas en poco espacio glifos con formas complejas. En cambio, en digital, durante muchos años la resolución ha sido solo de 72ppp lo que hacía que, para pintar en la pantalla un glifo concreto, se hiciera con menor precisión, haciendo que la mejor opción para un texto pequeño como el cuerpo fuese una tipografía sans-serif, mucho más simple morfológicamente que una roman.

Pero que la mejor opción para un cuerpo de texto sea una sans-serif, va cambiando. El mayor tamaño de las pantallas (lo que repercute en textos más grandes) y su mayor densidad de píxeles (pantallas hiDPI) en muchos casos, hacen que la mayor complejidad morfológica de las tipografías con serifas no suponga una disminución de la legibilidad reseñable y que, por lo tanto, hoy podamos escoger sin problemas una tipografía serif para el cuerpo de texto de nuestro proyecto si así lo consideramos.

Nota: Sea la que sea, elige una tipografía diseñada por un profesional.
En internet podemos encontrar algunas tipografías gratuitas que están genial (no solo en Google Fonts), pero recomiendo huir de algunos sitios del estilo de DaFont, donde el 90% de las tipografías son basura (y la mayoría del otro 10% son ripeos cutres e incompletos de fuentes de pago por licencia). Puede que en esos sitios pudiésemos encontrar alguna fuente que sirva para otras aplicaciones, pero será muy raro encontrar una tipografía digna para un cuerpo de texto, diseñada con la exigencia que requiere y además completa con todo lo que debería disponer (vocales con tilde, caracteres especiales, ligaduras…).

Peso

Siempre pesos medios.

Para el cuerpo de texto no elijas un peso que no sea diferente de Normal/Regular/Medium. En tamaños pequeños necesitamos definición y contraste para una correcta legibilidad y si se elige un peso light o menor la perderemos.

También sería un error asignar un peso bold o mayor al cuerpo de texto ya que estaremos elevando demasiado e innecesariamente su peso visual, lo que repercutirá además en tener que elevar a su vez el peso visual de aquellas otras unidades de información con mayor importancia semántica que el cuerpo de texto (destacados…).

Interlineado

Auméntalo a aproximadamente 1,5 veces el tamaño del texto.

El valor de interlineado que viene como predeterminado hace que las líneas estén demasiado juntas asfixiando el texto y haciendo además que al lector, cuando termina de leer una línea, le cueste demasiado encontrar el comienzo de la siguiente. No lo dejes como viene de fábrica.

Llevando el término a un diseño visual que luego se traducirá en CSS, mejor hablemos, no de interlineado sino de altura de línea (distancia entre las líneas base de dos líneas de texto contiguas).

Para que la legibilidad sea óptima, amplía la altura de línea a alrededor de 1,5 veces el tamaño del texto. La tipografía del texto también afecta sutilmente así que será el ojo el que termine definiéndolo en última instancia (como casi siempre), pero siempre se moverá en un rango de entre 1,4 veces y 1,6 veces el tamaño del texto.

Nota: Quiero recalcar que cuando hablo de esas 1,5 veces, estoy hablando de cuerpo de texto. En contenidos con una relevancia semántica menor que el body copy (un pie de foto, el correspondiente semántico a una nota al pie, un legal…) el tamaño del texto probablemente será menor por aquello de jerarquizar visualmente, y a su vez también su altura de línea funcionará óptimamente con un valor menor, entorno a 1,25.

Interletrado

No lo toques.

Ya se ha preocupado el tipógrafo de conseguir la máxima legibilidad pesando y balanceando individual y colectivamente los glifos al diseñar la tipografía.

Nota: Estoy dando por hecho de que hemos elegido una tipografía digna diseñada por un profesional (sí por favor).

Alineación

A la izquierda. Siempre.

— Pero justific…

— No. A la izquierda, siempre.

Dando por hecho que estamos hablando de un proyecto en el que el usuario leerá de izquierda a derecha, lo mejor es la alineación a la izquierda.

Porque, veamos: Si alineamos un cuerpo de texto…

  • Al centro:
    Perderá legibilidad porque cada una de sus líneas comienza verticalmente en un lugar distinto, lo que provoca que al ojo (cerebro) le cueste más identificar cuál es la siguiente línea a leer.
  • A la derecha:
    El doble de pérdida de legibilidad que si alineamos al centro, por las mismas causas.
  • Justificado:
    Perdemos legibilidad porque al justificar una columna de texto, el espacio interpalabra pasa a ser variable a diferencia del de una columna sin justificar, que siempre el mismo. Al justificar un bloque de texto, por lo tanto se pueden generar ríos debido a esos espacios interpalabra variables. Estaríamos así cometiendo el error de dar prioridad a la forma (que todas las líneas de texto comiencen y terminen verticalmente en el mismo lugar para conformar columnas perfectas) por encima de su función (transmitir el contenido de la forma más eficiente posible) obteniendo una preciosa(?) columna más difícil de leer.

— “¿Entonces no podemos justificar el texto y que quede bien? Con lo bonito que queda justificado ahí siempre de lao a lao…”

— Es que eso, justificado y que quede bien, solo va a pasar en el mundo ideal de la piruleta y el unicornio. Si fuese un diseño para impresión donde el resultado es inalterable en cuanto a contenido y composición, no habría problema. Pero el mundo real del diseño visual de productos digitales e interfaces, es un mundo donde los contenidos casi siempre van a ser dinámicos (cambiantes) y donde el contenedor del texto va a adaptar su tamaño al dispositivo. Y si esa caja de texto no va a contener siempre el mismo texto ni va a tener siempre el mismo tamaño, es inviable controlar esos ríos que se generarán al justificar con cortes por silabación manualmente. Y lamentablemente, a día de hoy, tampoco podemos controlarlos mediante cortes automáticos por silabación cuando se trata de texto en español. CSS permite cortar de forma automática palabras silábicamente (hyphens) pero las reglas de nuestro idioma español van más allá de cortar sílabas. En cualquier caso, seamos optimistas y tengamos paciencia. Hoy algunos navegadores están ya dando soporte al diccionario de hifenación en español. Faltan aún otros muy importantes (Hola Chrome) pero terminará llegando el día en el que se pueda sin problema. ;)

Nota: La alineación al centro puede funcionar en bloques de texto cortos (tres o cuatro líneas como máximo) con una relevancia semántica distinta (titulares, destacados, entradillas, citas,…) que dispondrán normalmente además de un mayor tamaño, pero no en un cuerpo de texto.

Longitud de línea

De 55 a 70 caracteres en cada línea de texto.
En mobile, de 40 a 55 caracteres por línea.

Si las líneas de texto son demasiado largas o demasiado cortas, la lectura será más lenta.
Si las líneas son demasiado largas, es más difícil para el lector regresar rápidamente al comienzo de la siguiente línea (hola Wikipedia visitada en una pantalla grande). Por el contrario, si son demasiado cortas, también será más incómodo porque se necesitarán más desplazamientos.

La tipografía aplicada al texto afecta a la elección del número de caracteres por línea, de ahí que hablemos de rangos.

Las líneas de texto más largas son mejores para que el lector pueda escanear más rápido la información y las líneas más cortas son más precisas comunicando. Por lo tanto es interesante plantearse usar, siempre dentro del rango, líneas más largas cuando es más probable que el lector vaya a escanear visualmente el texto en cuestión y líneas más cortas cuando esperamos que se vaya a leer a fondo detenidamente.

Subrayado

Nunca subrayes buscando destacar.

En el mundo digital, el subrayado se entiende por todo el mundo como “elemento interactivo”. Por lo tanto, si no es un enlace no lo subrayes ya que parecerá que lo es y confundirás al usuario, lo que ayudará a frustrarlo (sensación de pérdida de control), consiguiendo lamentablemente que la experiencia decaiga.

Titulares (encabezados)

Los titulares no dejan de ser un texto y no debemos olvidarnos de lo que ello implica (legibilidad) pero en ese ejercicio con múltiples variables a tener en cuenta con el que sopesamos cómo queremos que sea el formato de un titular, vamos a poder permitirnos incrementar la importancia de esa variable que define cuánto trabaja ese texto titular como un componente gráfico aportador de personalidad e identidad a la línea gráfica del proyecto.

Esto es así porque un titular normalmente representará su mayor importancia mediante un tamaño más grande (entre otras cosas), lo que nos deja más margen de maniobra a la hora de escoger tipografías con una forma más característica y menos convencional o variar sus valores “oficiales” de configuración y presentación definidos por el tipógrafo, a costa de perder algo de legibilidad con la elección.

Tipografía

Los titulares aman las tipografías en su variante Narrow o Condensed.

A la hora elegir el formato de un titular, como con todo, debemos sopesar los «edge cases» que vamos a tener que contemplar. Será relativamente rápido encontrar una solución que nos cuadre cuando el titular se componga de tres palabras pero… ¿sigue funcionando igual de bien cuándo sea mucho más largo, incluso de varias líneas? De ahí que las variantes narrow o condensed, por definición más estrechas que altas, sean una buena opción al conseguir que nos quepa más texto en el mismo espacio.

Sugerencia: Prueba a utilizar sans-serif para cuerpo de texto y serif para titulares, o a la inversa. Suele funcionar ya que acentúa de una forma evidente la diferencia entre cuerpos de texto y titulares, lo que ayuda a la jerarquía visual de los contenidos y, por lo tanto, mejora su comprensión.

Interletrado

Redúcelo sin pasarte.

En un titular casi siempre nos podemos permitir el lujo de reducir el interletrado de los titulares sin perder legibilidad y haciendo que, con el mismo tamaño ocupen menos.

Juntar las letras ok, pero ¿cuánto? Aquí la tipografía elegida juega un papel crucial, y su peso también. La clave está en no dejar que los caracteres se lleguen a tocar entre sí y dejarles que sigan respirando individualmente. Si haces que los caracteres se toquen o, leyéndolos a distancia, se empasten entre sí por estar demasiado juntos, se perderá su silueta y no se reconocerán con claridad disminuyendo la legibilidad, y por lo tanto además la capacidad de atracción del titular.

En mayúsculas

No lo hagas.

Si tomas la decisión de mostrar todos los caracteres del titular en su versión de caja alta (mayúsculas) estarás uniformizándolos al igualar su altura. Esa homogeneización hace que la legibilidad baje. Para contrarrestar eso podríamos aumentar el interletrado, pero hacerle eso a un titular normalmente es tirar piedras sobre tu propio tejado por la pérdida de espacio que conlleva (puede ser una opción en el caso muy concreto de estar seguro de que el titular es, y será siempre en cualquier momento y situación, muy corto).

Interlineado en titulares

Redúcelo a 1,15 veces el tamaño del texto.

A diferencia del cuerpo de texto, donde aumentamos el interlineado, aquí lo mejor es reducirlo aplicándole un valor cercano al del valor del tamaño del texto del titular. Eso sí, nunca exáctamente el mismo (te quedarías corto).

Hay que entender que este valor de 1,15 hay que tomarlo como una referencia que se puede ver afectada por la tipografía en sí (no es lo mismo el interlineado que requiere una Helvetica que una Zapfino (evitad Zapfino por favorrr).

Le apliques el valor que le apliques, nunca lo reduzcas tanto como para que puedan coincidir un glifo con trazo descendente de la línea de arriba con un glifo con ascendente de la de abajo y estos se toquen. Si se tocan tendríamos el problema de reconocimiento que describía antes si nos pasábamos reduciendo el interletrado, pero aquí en vertical, disminuyendo la legibilidad.

Nota: Si el interlineado del titular termina siendo aplicado en el proyecto vía CSS (propiedad line-height) mejor aún que aplicarle el valor 1,15 es aplicarle “normal”. De esta forma será un valor cercano al 1,15 pero se toma de la propia tipografía, ajustándose así mejor ya que cada una tiene el suyo propio.

¡Ya acabo!

Espero que estas pautas os ayuden un poco.  Me gustaría terminar recordando que cada proyecto es un mundo que hay que tratar como lo que es, único, y que esto son solo eso, pautas, no axiomas matemáticos inquebrantables ;)

“Aprende las reglas como un profesional para que puedas romperlas como un artista.”

— Pablo Picasso

Ángel Corral Arias
Ángel Corral Arias

UX/Visual Designer, UI Developer y CSS Lover.
También lo enseña en FICTIZIA.
Creó su primera web el siglo pasado y, aunque todo haya cambiado tanto, sigue enamorado de esto como el primer día.