Recibe actualizaciones
por Messenger
10 min

Nos habrá pasado a todos, antes o después: nos enamoramos de un tipo de letra, lo usamos en nuestras comunicaciones, para después darnos cuenta de que en los mensajes enviados ha desaparecido, sustituida por la indiferente neutralidad de Arial o (peor todavía), de Times New Roman.

En general, esto se debe a que el tipo de letra elegido no es uno de los tipos estándar para la web, por lo cual no es compatible con el dispositivo con que se visualiza el mensaje. En esta entrada analizaremos cuáles son los tipos de letra adecuados para su uso en la web, cómo superar los límites que se presentan y cuáles son las mejores prácticas para las campañas de e-mail.

Tipos correos electronicos

¿Cuáles son los tipos de letra estándar para la web?

La parte textual es, a todos los efectos, uno de los componentes más importantes de un e-mail. El estilo, la disposición y las características gráficas del texto constituyen su aspecto tipográfico, un elemento que, bien usado, puede cambiar radicalmente la presentación de un mensaje. El problema es que la representación gráfica de los tipos de letra varía enormemente en función del dispositivo y del cliente que abre el mensaje.

Se definen como estándar para la web los pocos tipos de letra que todos los sistemas operativos aceptan, aquellos que aparecen correctamente en cualquier entorno/modo/dispositivo de visualización. Los tipos de letra estándar son los siguientes:

  • Arial
  • Courier
  • Georgia
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Dado que garantizan una visualización excelente, estos tipos de letra son la opción más segura para las campañas de e-mail. La desventaja es que su número es muy reducido, y esto limita bastante el potencial creativo de los mensajes. Por fortuna, hay muchas maneras de superar este límite.

Un buen diseñador de e-mail sabe, ante todo, sacar el máximo partido del potencial tipográfico del tipo de letra, generando un equilibrio entre el texto, las imágenes, el espaciado y otros elementos gráficos. También se pueden utilizar tipos de letra no estándar limitando al mismo tiempo los inconvenientes derivados de la no compatibilidad. Una opción es utilizar juegos de caracteres – como las Google Fonts – que el navegador mismo descarga cuando se abre el mensaje.

Además, una CSS específica también permitirá que el sistema sepa con qué tipo de letra sustituir las que no se visualizan correctamente: algo así como unos tipos de letra de “reserva” (en inglés font stack) que permiten tener bajo control los daños de la no visualización.

El editor BEE de MailUp incluye una función inteligente pensada precisamente para ahorrarle a quien compone el e-mail la construcción de una hoja CSS: en el momento de elegir el tipo de letra, BEE incluirá automáticamente una lista de caracteres de reserva (especificaciones en este enlace).

Tipos letra correo electronico

Veamos tres factores a tener en cuenta al elegir y definir los tipos de letra para tus campañas de e-mail.

El tipo de letra adecuado para el cuerpo del mensaje

Con un artículo que ha sido noticia, Bloomberg ha rechazado definitivamente el uso de Arial y Helvética en los e-mail, señalando que “no son ideales” para ese uso. La razón es el diseño demasiado uniforme de algunas letras (p, b, q, d en particular), que resultan difíciles de distinguir entre sí.

“Siempre es mejor utilizar un tipo de letra en que la forma de las letras no sea ambigua”, aconseja el tipógrafo Gerry Leonidas en el artículo. Son mejores los tipos serif, cuyas terminaciones ayudan a dar una identidad inequívoca a cada carácter. La imagen resume la diferencia entre tipos serif  (“con gracias o serifas”) y sans serif (palo seco, palo bastón).

Tipos letra correos electronicos serifos sans serifos

¿Las mejores alternativas a Arial y Helvética? Georgia y Verdana. Cuando leemos un e-mail, el ojo normalmente recorre rápidamente un par de párrafos como máximo. Un espaciado significativo y constante entre las letras ayuda a la lectura rápida, mientras que la presencia de serifas facilita el reconocimiento de los caracteres por el ojo, sobre todo en presencia de bloques de texto largos y compactos.

Un buen ejemplo de tipos serif en acción es el que ofrece Skillcrush, que elige el tipo Georgia para aligerar sus mensajes enteramente textuales, sin otra concesión que la alternancia cromática entre el gris antracita y el rosa.

Tipos letra correos electronicos ejemplo 01

En cambio, si los bloques de texto son cortos y se alternan con abundancia de imágenes, está bien utilizar una fuente sans serif. IFTT, por ejemplo, elige Helvética para el cuerpo del mensaje y Arial para el llamado a la acción. El resultado es claro, legible y agradable.

Tipos letra correos electronicos ejemplo 02

En conclusión: en general es bueno elegir un tipo de letra serif si los mensajes incluyen bloques de texto medianos o largos. En particular, tipos de letra como Verdana y Georgia facilitan la lectura rápida del texto por parte del usuario. En cambio, si los mensajes sólo contienen bloques de texto breves y compactos, un tipo de letra sans serif puede funcionar igual de bien, si no mejor.

 

El tipo de letra adecuado para los títulos

Los títulos sirven para definir la estructura de un mensaje, pautando las secciones de texto y los distintos módulos de contenido. También tienen la función de facilitar la lectura de los mensajes y de acelerar su comprensión. Hay varias maneras de utilizar la formatación de los títulos para mejorar la legibilidad de los mensajes.

a) El mismo tipo de letra, pero en tamaños/colores/estilos distintos

Utilizar el mismo tipo de letra para los títulos y para el cuerpo hace que los mensajes resulten sencillos y claros. Lo importante es diferenciar las diferentes partes del texto usando elementos como el espaciado, el tamaño y el formato (negrita, mayúsculas, etc.). Esta estrategia puede servir para reforzar la identidad gráfica de la marca y garantizar una visualización uniforme de los e-mail en todos los dispositivos y clientes.

El consejo es que el cuerpo del carácter de los títulos sea como mínimo el doble con respecto al cuerpo del texto del mensaje, espaciándolos bien para mejorar la legibilidad. Veamos el ejemplo de Skyscanner, que utiliza Arial en todos los puntos del mensaje:

Tipos letra correos electronicos ejemplo 03b) Alternancia de distintos tipos de letra

Para obtener un efecto de contraste muy refinado, se puede alternar un tipo de letra palo bastón en el cuerpo del mensaje con un serif en los títulos. Este tipo de combinación se recomienda siempre en el mundo de la tipografía porque es prácticamente imposible equivocarse. El secreto es evitar el uso de dos fuentes “fuertes”, de personalidad bien marcada, y preferir la alternancia entre un tipo de letra adornado y protagonista con uno más sobrio y discreto.

Veamos las posibles combinaciones. Combina un tipo serif estándar…

  • Courier
  • Georgia
  • Times New Roman

…con un palo bastón estándar:

  • Arial
  • Helvetica
  • Lucida Sans
  • Tahoma
  • Trebuchet
  • Verdana

Incluso si los tipos de letra utilizados son distintos, el tamaño de los tipos utilizados en los títulos debe ser, como mínimo, el doble del utilizado en el cuerpo del texto. También se puede jugar con los colores y el formato para enfatizar el contraste. Veamos dos ejemplos muy limpios y eficaces: el boletín informativo de Medium y una DEM de Kusmi Tea. Ambos utilizan un tipo de letra con serifas para los títulos de las entradas y una fuente sans serif para el cuerpo del texto; el ejemplo de Kusmi Tea añade además un toque de vivacidad dado por los colores.

Tipos de letra correos electronicos ejemplo 03

Tipos de letra correos electronicos ejemplo 04c) ¿Tipos de letra no estándar? ¡Añádelos en la composición gráfica!

La identidad visual de una marca, a menudo pasa por tipos de letra propietarios o logotipos que no tienen nada de estándar o de web safe. Mantener estos rasgos distintos en los mensajes puede ser importante, por lo cual la solución es simple: utiliza tipos estándar para los bloques de texto, y añade los tipos no estándar en las imágenes, como hace, por ejemplo, Vueling.

Tipos de letra correos electronicos ejemplo 05

De este modo se evitan las posibles dificultades de visualización del tipo de letra en los clientes, aunque al mismo tiempo se abre espacio a problemas que a veces acompañan a la visualización de las imágenes, que pueden aparecer desactivadas y, por tanto, con lagunas en algunos clientes. Sin embargo, es un riesgo que vale la pena correr.

Si el contenido textual del interior de la imagen va a ser particularmente relevante, es conveniente encuadrarlo también en un bloque de texto para asegurarse de que no se pierda en caso de que la imagen presente lagunas. Así lo hace, por ejemplo, LOVEThESIGN con el código del bono de descuento:

Tipos de letra correos electronicos ejemplo 06

En conclusión: subraya la identidad de la marca en el encabezamiento del mensaje, introduciendo el logotipo y un título en un tipo de letra propietario, que no será óbice para pasar a un tipo de letra estándar con menos riesgos en el resto del mensaje.

¿Y los enlaces?

Uno de los beneficios de insertar tantas imágenes en los e-mail es poder asociar a cada una de ellas un enlace accesible. De este modo, cualquiera que sea el punto del mensaje en que el usuario se encuentre, siempre será llevado a la página de destino para poder continuar con la compra o con la navegación.

Sin embargo, si se ha optado por una composición menos gráfica y más textual, siempre se pueden introducir enlaces de texto en modo discreto, funcional y eficaz. El texto que contiene el enlace no debe por fuerza empobrecerse con el feo formato azul subrayado: se aconseja jugar solamente con los colores (usando por ejemplo los de la marca) o con el subrayado, manteniendo el mismo color que el texto que no lleva enlace.

¿La alternativa radical? No diferenciar los enlaces de ninguna manera, de modo que todo el texto sea enlace. El resultado será más simple y ofrecerá menos distracciones; al mismo tiempo será más eficaz en lo que se refiere a atraer tráfico al sitio de destino. Veamos el ejemplo de Intimissimi, en el que la posibilidad de hacer clic se extiende también a todas las áreas blancas del mensaje:

Tipos de letras correos electronicos ejemplo 06

En conclusión: lo importante es experimentar. Prueba distintas combinaciones de tipos de letra y colores hasta encontrar el que mejor se adapte al estilo de tu marca y a su identidad visual. Solo hay que tener presente que es preferible tener enlaces simples y poco resaltados.

Las mejores prácticas para elegir el tipo de letra correcto para tus e-mail

  • Para el cuerpo del mensaje, utiliza siempre un tipo de letra estándar para la web. Si el mensaje contiene bloques de texto sustanciales, es preferible usar un tipo de letra serif.
  • Presta atención a la formatación de los títulos, de modo que resalten. Juega con los tamaños y prueba una fuente palo bastón.
  • Lleva tráfico al sitio enlazando en extensión pero sin resaltar, sin distraer del mensaje.

¿Te gustó este artículo? Tenemos muchos otros para ti.

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

La diferencia entre un e-mail bueno y uno impresionante: 7 factores

Asunto, enfoque, seguimiento y mucho más. Aquí hay 7 tácticas operativas para crear email brillantes, efectivos y centrados en el cliente. Cada vez que aparece algo ...

Sigue leyendo

Tres tácticas de Email Marketing para fomentar la compra por impulso

El email marketing es uno de los mejores canales para traer tráfico a su sitio web. No solo puede usarlo para compartir noticias sobre su ...

Sigue leyendo

Tutorial: Cómo crear un e-mail en bloques de color

Nos gustan mucho los email coloreados. Un estilo que nos encanta (y lo vemos mucho) son los bloques de colores: la mitad del e-mail tiene un ...

Sigue leyendo

Tutorial: Cómo crear un e-mail con galería en cuadrícula para PC y móvil

¿Quieres diseñar un e-mail simple, hermoso, adaptable al móvil con un montón de fotos? Aquí encontrarás cómo. La entrada de hoy es una guía paso ...

Sigue leyendo

¿Cuánto valen tus campañas? Todo sobre el ROI del Email Marketing

Qué es, cómo calcularlo y con qué acciones optimizar la métrica del canal e-mail que responde a la más urgente de las preguntas: "¿qué rendimiento ...

Sigue leyendo

¿Cómo se crea una mailing list?

Descubramos en 5 pasos cómo crear una lista de contactos y además mejorarla y expandirla gracias a una estrategia de creación de bases de datos.   Al ...

Sigue leyendo