Uno de los mayores obstáculos que encontramos los maquetadores de email es el uso de tipografías especiales en los diseños. Hemos repetido hasta la saciedad a todos nuestros clientes las dificultades que implica el uso de fuentes poco comunes en email y aún así sigue siendo el principal motivo de discusión entre diseñadores y programadores.
A menudo, dados los avances en el uso de fuentes en la web, se exige al email el mismo funcionamiento, pero, como siempre, las limitaciones en email son mucho mayores que en la web. El uso de WebFonts se ha extendido como la práctica más común a la hora de integrar tipografías en la web, pero su uso no está admitido en todos los clientes de email, por lo que encontramos varios problemas a la hora de aplicarlo.
Podemos tratar de utilizar la tipografía deseada y aportar una tipografía de sistema “fallback” en caso de que no pueda mostrarse, pero esto plantea algún problema. El primero, es que el look&feel del email no será consistente en todos los clientes de email, dado que mostrará distintas tipografías en función de la compatibilidad. El segundo es que muchas veces los tamaños de caja entre la tipografía deseada y la fuente de fallback son distintos y esto puede generar descompensaciones en los cuadros de texto. En este enlace podéis ver el soporte de Webfonts en email (y sus distintos modos de utilizarlas: @import, @font-face, <link>…) creado por Campaign Monitor.
Principalmente, por esta dificultad de controlar los cambios de tamaño de las tipografías, nuestra recomendación a los clientes suele ser equilibrar las necesidades de branding y funcionalidad y conseguir un email lo más consistente posible en las distintas aplicaciones de correo. Esto se puede conseguir utilizando titulares en imagen con la tipografía corporativa, y escogiendo una fuente de sistema común a la mayoría de los ordenadores para sustituir a la corporativa en los cuerpos de texto.
También podemos optar por mostrar la webfont o tipografía importada, asegurándonos que la tipografía de fallback no produce cambios en la estructura del email no problemas de legibilidad a causa de los distintos tamaños de caja.
Aquí tenéis una lista de las tipografías que podemos escoger y su compatibilidad con los distintos sistemas operativos:
Fuente: elwebmaster.com
Siempre que no se trata de diseños muy específicos, tratamos de utilizar Arial/Helvetica y Times New Roman/Times que son las únicas con las que podemos asegurar que el 100% de los clientes de email mostrarán la tipografía indicada. Y para contrastar esta práctica fijémonos en como lo aplican las marcas punteras del sector del email marketing:
Mailchimp: Fuente coporativa: Open Sans. En email: Arial/Helvetica + tipografías especiales en imagen
Litmus: Fuente coporativa: Proxima Nova. En email: Arial + Helvetica
Campaign Monitor: Fuente corporativa: Lato/Helvetica Neue. En email: Tahoma/Arial-Helvetica.
A pesar de que en los cuadros de compatibilidad de webfonts parece que existe un panorama alentador, la realidad es que en la práctica el estándar de tipografía en email no es suficientemente fiable y puede producir problemas. Por ello, desde Digital Response, y respaldados por las prácticas de las grandes compañías de referencia, recomendamos siempre aplicar las tipografías más comunes (Arial-Helvetica/Times New Roman-Times) a los cuerpos de texto del email y ser muy cuidadosos con la utilización de webfonts. Para textos breves como titulares o integrados con la imagen del email es recomendable maquetar en imagen, añadiendo siempre el contenido del texto a la etiqueta alt=””, para que el texto sea visible en aquellas aplicaciones que no descargan las imágenes por defecto.
Y si alguien se está preguntando por qué no enviar todo como imagen para que la marca mantenga toda sus consistencia, aquí puede leer sobre la importancia de equilibrar imagen y texto en el HTML del email:
Defensive design en email marketing: ALT frente al bloqueo de imágenes
Tipografía en Email Marketing: Imagen VS Texto & Web Fonts
