Cómo utilizar Tipografías en newsletters

En este artículo veremos cómo utilizar las tipografías en newsletters, que fuentes son comunes en los distintos sistemas operativos y las posibilidades que ofrecen la utilización de fuentes personalizadas.

Las tipografías es uno de los elementos más importantes de los newsletters, ya que es uno de los pocos elementos que se renderizan de forma constante entre las distintas plataformas de email y aparecen por defecto. Hay que recordar que las imágenes pueden estar bloqueadas ofreciendo una visión completamente diferente de nuestro newsletters.

Fuentes cross-platform

Desgraciadamente como en muchos otros aspectos del email marketing, las fuentes soportadas por los distintos clientes de correo y en las distintas plataformas como Windows, MAC o Linux son limitadas.

Sans Serif Web Safe Fonts

Como fuentes sans serif compatibles entre las distintas plataformas tenemos:

• Arial
• Arial Black
• Tahoma
• Trebuchet MS
• Verdana

Si lo que quieres es estar seguro de que se renderizarán correctamente, no está de más incluir como fall-back, fuente que se muestra en caso de no disponer de la primera opción como:

• Century Gothic
• Geneva
• Lucida
• Lucida Sans
• Lucida Grande

En el momento de codificar nuestro HTML definiremos en el campo “font-family” las fuentes que queremos utilizar, con orden de prioridad de izquierda a derecha.

<td valign=»top» align=»center» style=»font-size:22px; font-family: ‘Trebuchet MS’, Arial, sans-serif; color:#000000; line-height:32px; font-weight:600;»><span style=»font-size:22px;»>Texto con fuentes seguras

Serif Web Safe Fonts

Como fuentes de sistemas seguras que utilicen serifa, tenemos:

• Courier
• Courier New
• Georgia
• Times
• Times New Roman

Al igual que en le caso anterior podemos utilizar como fall-back las fuentes:

• MS Serif
• New York
• Palatino
• Palatino Linotype

Monospace Fonts

En el caso de fuentes monospace las mejores opciones son:

• Courier
• Courier New

Si lo que queremos es una lista de fuentes a prueba de cualquier cliente de email, nos deberíamos restringir a la utilización de:

• sans-serif: Helvetica, Arial, Verdana, Trebuchet MS
• serif: Georgia, Times New Roman, Courier

Otras fuentes ampliamente soportadas son: Helvetica, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Charcoal, Lucida Console, Lucida Sans Unicode, Lucida Grande, Palatino Linotype, Book Antiqua, Palatino, Tahoma, Geneva, Times, Times New Roman, Trebuchet MS, Verdana, Monaco.

Utilización de las Web fonts en newsletters

Aunque las web fonts son ampliamente utilizadas en la Web, su uso en los newsletters no pasa de ser experimental, un reducido número de clientes de email las soportan. El mayor número de estas fuentes están accesibles en servicios como Google Web Fonts.

Los clientes de correo que soportan las Web fonts son:

• Outlook2000
• iOS Mail
• Apple Mail
• Android (clientes de email pero no Gmail)
• Thunderbird

Al igual que al utilizar fuentes de sistema poco estándar, si utilizamos web fonts se recomienda utilizar siempre una fuente de fall-back. El principal problema que dependiendo de donde estemos utilizando la web Font, la alineación con otros se complica.

Para importar la fuente utilizaremos:

Una vez importada podemos aplicar estilos en la clase que lo soporta:

Como conclusión, si quieres maquetar un newsletters 100% compatible con todos los clientes de email para los distintos sistemas operativos, utiliza la lista corta de fuentes compatibles.

La utilización de Web fonts es otra alternativa, aunque debemos recordar que se trata de una aplicación experimental y deberemos tener siempre una fuente de fall-back.

Si todo esto te suena a chino, pero quieres que tus newsletters sean lo más parecidos posibles a los diseños en PSD, utiliza nuestros servicios de maquetación de newsletters.

Herramienta para crear Landing Pages con verificación de emails

¿Validas tus emails o pierdes dinero?