Tipografía en Email Marketing: Imagen VS Texto & Web Fonts

El texto de nuestros mensajes es importante desde dos puntos de vista: el copy y el estilo visual. Hoy nos centramos en el segundo, vamos a hablar de tipografías y posibilidades visuales de los textos.

Email Fonts

Uno de los principales consejos que damos a nuestros clientes es que deben considerar la estructura y diseño de los emails para que se pueda maquetar como texto la mayoría del contenido. Esto nos permitirá varias cosas:

  1. Evitar problemas de entregabilidad. Un bajo ratio texto/imagen es uno de los aspectos que alerta a los filtros antispam, por tanto, un excesivo peso de la imagen en el email puede ser el motivo de que lleguemos a la bandeja de correo no deseado.
  2. Usabilidad en la versión sin imágenes del email. Según Litmus, el 43% de los usuarios lee los emails sin descargar las imágenes, por lo que no debemos dejar de cuidar esta visualización y tratar de llegar al usuario de esta manera. Para ello, nos ayuda maquetar los textos y completar el contenido de los alts de las imágenes.
  3. Versatilidad en Responsive Design. Los textos se adaptan fácilmente a la visualización en móvil, mientras que que el contenido en imagen puede quedar pequeño en móvil y obligarnos a ocultar/mostrar elementos, complicando bastante el código y aumentando el peso y tiempo de carga.
  4. Uso de plantillas. Muchos clientes apuestan por plantillas que les permiten reducir los tiempos de desarrollo. Si los textos se inclyen como imagen se debe crear una nueva imagen en cada caso, mientras que si los textos son editables en la plantilla, se reduce el tiempo y el esfuerzo de modificación de la misma.

Aún así, en ocasiones nos es imposible usar texto y debemos incluir ciertos copies en imagen por directrices de diseño y cuestiones de branding. Lo ideal es mantener el equilibrio entre las necesidades de branding y la funcionalidad del email marketing. Siempre que utilicemos textos como imagen debemos recordar incluir el contenido textual en los Alts de las imágenes para que el usuario pueda ver el contenido en la versión sin imágenes en los servicios que lo permitan.

Otra opción que podemos utilizar si tenemos algo de flexibilidad son las Web Fonts. El soporte no es, ni mucho menos, universal, pero si no somos demasiado exigentes y permitimos que en los casos sin soporte se muestre un fallback podemos plantearnos utilizarlo. Aquí tenéis el soporte en los distintos servicios. Cómo véis, es fiable en los clientes móviles pero algunos servicios importantes como Outlook.com y Gmail fallan.

Email client

Soporta Web Fonts

iOS Mail

Outlook

Sólo 2000 y 2011 en Mac

Outlook.com

No

Apple Mail

Yahoo! Mail

No

Gmail

No

Android (default client)

Windows Live Mail

No

Thunderbird

AOL Mail

No

Para usar las Web fonts tenemos dos opciones <link> o @import. Tras algunas experiencias (tests realizados por Mailchimp) parece que la mejor opción es @import, dado que <link> no parece funcionar en Android.

style

Hay algunos servicios de fuentes que no podemos utilizar en email. Por ejemplo, Typekit que utiliza Javascript para servirlas. Sí podemos utilizar una de las librerías más conocidas y amplias: Google Fonts.

Otra opción es alojar las fuentes nosotros mismos, si bien, para utilizar esta opción debemos ser muy conscientes de las licencias de las tipografías que estamos usando y no incurrir en usos no permitidos.

Si no tenemos unas guías estrictas de branding que nos obliguen a tener un especial cuidado por la tipografía y  nos decidimos por las Web Fonts, debemos cuidar también las tipografías “fallback“, es decir, las fuentes seguras que se mostrarán en caso de que el servicio de email no pueda interpretar la fuente específica que le pedimos.

css

En este caso, si el cliente de email no da soporte a nuestra web font, se mostraría “Times New Roman” o la tipografía con serifa predeterminada en su defecto. Muchas veces, las directrices de branding nos impedirán utilizar el recurso de las web fonts, pero es interesante considerarlo para potenciar  el impacto de nuestros textos en los servicios que sí nos lo permiten.

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+Email to someonePrint this page

2 thoughts on “Tipografía en Email Marketing: Imagen VS Texto & Web Fonts

  • Hola,
    – Muy buen articulo…una pregunta:
    He leído un par de artículos en Vero y otro de Neil Patel que hablan de la nueva tendencia de incluir videos – gifs – en las campañas de email marketing. Cual es tu opinión?, no se hace muy pesado y tiene problemas de apertura?

    Saludos!

    • Hola Carlos:
      Por lo general recomendamos utilizar el GIF en email sólo para detalles pequeños (botones, iconos, flechas y CTAs…), ya que como bien dices aumenta mucho el peso de las imágenes y puede provocar problemas de descarga. En cualquier caso, bien usado es un recurso interesante.
      Te dejamos un post que escribimos al respecto hace unos meses:
      Gif en email marketing

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *