¿Cómo aplicar las tipografías de forma creativa sin arruinar tu reputación online?

A menudo se habla de la imagen corporativa y de cómo ésta se debe aplicar de manera coherente y uniforme entre todos los canales de marketing que utiliza cada negocio.

Entre los elementos que conforman la identidad de una marca, están las tipografías, por lo que saber cómo aplicarlas es básico en este campo.

Aplicar bien las tipografías no consiste sólo en elegir cuál representa a la marca y en saber cómo utilizarla para cada elemento (logotipo, textos para web, correspondencia en papel, etc.), ¡todo lo contrario!, hay que saber qué es lo que mejor funciona mejor en cada medio y cuáles son sus limitaciones.

“Saber seleccionar las tipografías adecuadas es muy importante cuando se busca legibilidad y representatividad, especialmente en el mundo online, donde se premia a la creatividad en su justa medida.”

Las tipografías son uno de los elementos diferenciadores de las marcas, eso está claro, pero abusar de la creatividad en este aspecto y olvidarse de la legibilidad termina perjudicando gravemente a la experiencia de usuario y, por tanto, la reputación online.

En muchas ocasiones, si no se aplica correctamente el estilo tipográfico según el soporte o medio en cuestión, el mensaje termina por perderse, generando con ello una mala impresión en el usuario (más adelante te contaré mi caso particular con el tema del e mail marketing).

Piensa que, por muy creativo y diferente que sea el estilo de tu marca, el consumo de contenidos a través de dispositivos digitales, es necesario que el texto se lea bien, que el fondo no moleste y que el tamaño de letra sea el adecuado.

Por ello, en este post quiero que abarques conmigo cuestiones relacionadas con el correcto uso de las tipografías. Concretamente:

¿Cómo funciona la tipografía en el mundo online y qué influencia tiene sobre la percepción de los usuarios?

Hay quienes dicen que el uso correcto de las tipografías es todo un arte de la articulación de una marca (o brand articulation); cada diseño tipográfico transmite unos conceptos diferentes pero, además, utilizarlas en uno u otro canal puede aportar muchos matices.

A priori, parece banal dedicarle tiempo a este aspecto que puede parecer tan pequeño en el desarrollo de una identidad corporativa. Sin embargo, este elemento es el que va a fomentar la lectura de tus contenidos, así que… ¡es súper importante!

Conocer todas las tipografías que existen y sus significados es imposible (además surgen nuevas constantemente), pero sí se pueden conocer las clasificaciones que hay al respecto y qué rasgos generales comparten:

1. Serif: Son las tipografías con adornos. Tienen una gran influencia en la caligrafía antigua hecha a mano, y surgieron con la creación de la imprenta. Pueden tener más o menos adornos en función de la época de su creación, pero siempre son trazos complicados y muy trabajados.
2. Sans Serif: Propias de la revolución industrial, son mucho más sencillas que las anteriores. No tienen “serifas” es decir, remates en sus extremos. La más común es la tipografía Arial. Son las más utilizadas en los canales online gracias a su alta legibilidad en pantalla.
3. Manuscritas: Esta tipografía, también conocida como script, es la más semejante a la caligrafía a mano. Son de tipo cursiva y de legibilidad media. Suelen utilizarse más para el encabezado de textos o títulos que para un cuerpo textual completo.
4. De exhibición: Son las que más carga emocional transmiten. Representan épocas, movimientos culturales, sentimientos, incluso características de la personalidad de sus diseñadores. Algunas se diseñan para fines concretos, como la tipografía de Star Wars, y terminan asociándose rápidamente a esa marca que hay detrás de su diseño.

Además del tipo de tipografía elegido, hay otros elementos visuales que forman parte de la maquetación de un texto e influyen en cómo ésta representa a la marca. Vamos a verlos en el siguiente apartado.

► Elementos diferenciadores que personalizan a tu marca

Cuando se genera un contenido online, se piensa en el propio mensaje y en el diseño. Y el diseño no hace sólo referencia a los colores o las imágenes utilizadas, también entra en juego la maquetación del texto.

“Aplicar elementos diferenciadores en la maquetación de los textos, marca la diferencia entre una marca y su competencia.”

Vamos a ver qué elementos debes tener claros y cómo afectan al mensaje que quieres transmitir:

1. Formas: Los diferentes tipos de letra pueden ser más redondeados, alargados, cuadrados, etc. Estas formas tan diferentes evocan diferentes sensaciones. Por ejemplo, las letras muy redondeadas con volutas en las serifas tienden a recordar épocas históricas, y las que son más cuadradas se relacionan con los 80 y las nuevas tecnologías de la época.
2. Combinaciones: A la hora de maquetar, se pueden utilizar diferentes tipografías en un mismo mensaje. Se pueden utilizar tipografías más trabajadas para los títulos o mensajes destacados, y otras más sencillas para el cuerpo textual. De esta manera, la maquetación parecerá más ordenada y visual.
3. Contrastes: En línea al punto anterior, si se van a combinar diferentes tipografías, hay que buscar que éstas contrasten, para que quede claro que no es un error provocado por la semejanza entre ambas tipografías. Lo que no es recomendable es aplicar más de dos tipografías para un mismo medio.
4. Tamaño: En función del tipo de soporte, el tamaño adecuado varía. En el entorno digital no es recomendable utilizar menos de un 10 o un 12, dependiendo de las tipografías, ya que se perdería legibilidad. A partir de este tamaño, se pueden utilizar letras más grandes para destacados, títulos, etc., pero siempre pensando en que se va a leer en una pantalla y no se puede abusar de los textos grandes, ya que no serán cómodos.
5. Sangrías: Al maquetar textos para canales online, las sangrías a menudo son menos utilizadas que en los medios offline. La maquetación suele hacerse en cajas o tablas y las sangrías pierden relevancia, aunque en un texto largo siempre son útiles y se pueden incluir.
6. Interlineado: En online el interlineado mínimo es en torno a 1,15. Menos de eso hace que las letras se junten (los palos bajos de una línea con los palos altos de la de abajo) y sea el texto sea muy difícil de leer.
7. Negritas: Utilizadas para remarcar mensajes importantes, textos destacados o encabezados. En online a veces es recomendable utilizarlas en lugar de mezclar diferentes tipografías. Dependerá del canal y de la longitud del mensaje y de los textos a remarcar.
8. Mayúsculas: A parte de su uso correcto según las normas ortográficas, las mayúsculas pueden dar mucho juego al maquetar contenidos online. Hay que tener en cuenta que en los canales digitales el uso de mayúsculas se entiende como un grito o una exaltación, por lo que no hay que utilizarlas sin sentido.

Un buen uso de estos elementos, facilita que la maquetación resulte en textos legibles y entendibles, que aporten valor añadido a la marca y su reputación online.

► Errores de legibilidad web

Es bastante habitual confundir conceptos de legibilidad online y offline. Hay que tener siempre presente que no es lo mismo leer un periódico, una carta o una lona, que leer a través de una pantalla.

Además, hoy en día los contenidos deben ser responsive para poder consumirse a través del ordenador, de la tablet o del móvil. Por lo tanto, es necesario pensar en la legibilidad en pantallas pequeñas.

Es común, al olvidarse de ese aspecto, cometer alguno de estos errores:

1. Falta de jerarquía: Al maquetar un contenido es muy necesaria la jerarquía, no sólo visualmente, sino indicándola a través de los H1, H2, H3… De esta manera, esa jerarquía se adapta a las necesidades de cada pantalla.
2. Contraste bajo: A veces, por seguir la línea cromática de una identidad visual, se utilizan colores muy difíciles de leer que a penas contrastan entre ellos. Para facilitar la legibilidad, es necesario utilizar una letra que contraste mucho con el fondo (a ser posible, negro o colores oscuros sobre blanco o colores muy claros).
3. Mala selección de tamaño: Al elegir un tamaño de letras, se puede hacer de manera relativa (que ocupe cierto espacio dentro de todo el diseño) o de manera absoluta (que mida ciertos píxeles en concreto). En los medios online, es más adecuado utilizar los tamaños relativos que se adaptan a los diferentes dispositivos. Ten en cuenta que no es lo mismo leer en una pantalla grande de un ordenador, que en un móvil de pantalla pequeña.
4. Demasiada longitud en los párrafos: Otro de los errores más comunes es redactar pensando en offline y hacer párrafos muy grandes. En online, la vista se cansa más rápido y necesita “descansos” entre párrafos. Se trata de jugar con los espacios en blanco que permiten una lectura relajada y cómoda.
5. Renglones demasiado largos: En línea con el punto anterior, los renglones no deben ser de mucho caracteres. Por un lado, agobiarán en la lectura sin son muy extensos. Por otro, en pantallas grandes van a obligar al lector a estar constantemente girando la cabeza para ir de principio a fin, cosa que no suele gustar.
6. Exceso de enlaces: Este error no está relacionado con la herencia de la maquetación offline, sino que es propio del entorno digital. A veces, tratamos de incluir tantas fuentes en un párrafo que acabamos llenándolo de enlaces. Esto dificulta mucho su lectura y molesta en la navegación online, ya que al desplazarse por la pantalla es fácil pinchar en un enlace por error.

Tipografías en email marketing: Usos y limitaciones

Una vez que se tienen claros los parámetros que hay que seguir para utilizar diferentes tipografías en los medios digitales, ya se puede empezar a trabajar en los diversos canales.

“No todos los canales online funcionan de la misma manera a la hora de maquetar y compartir contenidos.”

Por ejemplo, en las redes sociales no se tienen opciones de maquetación más allá de la utilización de diferentes párrafos. Sin embargo, al crear newsletters las opciones van mucho más allá, pero también las limitaciones.

En un email se pueden incluir negritas, diferentes tamaños de letra, subrayados e incluso tachados. Sin embargo, el uso de diferentes tipos de fuentes está muy limitado.

José Argudo me ha ayudado a investigar sobre este aspecto, así como de qué manera cargan y se visualizan las tipografías en distintos clientes de correo electrónico.

Según las últimas actualizaciones de estos gestores, los únicos que cargan bien prácticamente cualquier tipografía son:

1. AOL Mail
2. Aplicación nativa de Android mail (no Gmail)
3. Apple Mail
4. iOS Mail
5. Outlook 2000
6. Aplicación móvil de Outlook

Por este motivo, a la hora de hacer email marketing es más recomendable utilizar tipografías básicas disponibles en cualquier ordenador o dispositivo móvil, como Arial, Times New Roman, Tahoma, Calibri, Cambria, etc.

Por otro lado, una vez que se tenga seleccionada la tipografía, también hay que tener en cuenta el color que se utiliza para la misma.

Por ejemplo, yo en el blog utilizo un gris concreto que me gusta mucho y se lee bien en web. Sin embargo, varios suscriptores de mi newsletter me han comentado que este mismo color no se pueden leer bien los emails en dispositivo móvil.

Antes de terminar, me gustaría incluir un vídeo sobre cómo crear una newsletter:

Conclusiones

Encontrar una tipografía y una manera de maquetar que encaje en todos los canales online puede ser difícil. Por eso, yo siempre recomiendo hacer diferentes pruebas antes de lanzar los mensajes a nuestras comunidades.

No hay que olvidar que los usuarios leerán los contenidos desde diferentes dispositivos, navegadores o aplicaciones. Así que, lo ideal es crear mensajes legibles en todas las opciones posibles.

¿Qué tipografía sueles utilizar en tus contenidos digitales?,
¿haces combinaciones o siempre usas la misma?