Uso de las fuentes en el Editor de Email de Connectif

A la hora de crear correos electrónicos que se alineen con los objetivos de marketing, es importante comprender cómo funcionan las fuentes, para escoger aquellas que mejor se alinean con la marca y su diseño, pero también conocer sus limitaciones a la hora de enviar emails consistentes en los diferentes clientes de correo electrónico. 

En este artículo se explican las propiedades de las fuentes disponibles en el Editor de Email de Connectif y su comportamiento en los clientes de correo electrónico, para que escojas aquellas que más te convengan a la hora de diseñar tus correos electrónicos con Connectif.

 

1. Propiedades

Muchos de los clientes de correo electrónico bloquean algunas tipografías y utilizan las fuentes de respaldo (fallback fonts), por lo que, aunque en el Editor de Email de Connectif existan muchas opciones de fuente, cuando los contactos reciban los correos, es probable que no se vean exactamente igual que en el email diseñado, porque no todos los dispositivos y proveedores de email tienen acceso a las mismas fuentes.

1.1. Cómo funcionan las fuentes

  • Hay dos formas principales en que un dispositivo puede acceder y usar una fuente: fuentes del sistema (es decir, fuentes almacenadas en el dispositivo que está utilizando) y fuentes web (cargadas desde un servidor externo). 
  • Existen algunas fuentes del sistema básicas que vienen instaladas en la mayoría de los dispositivos (Georgia y Verdana, por ejemplo), pero pueden diferir bastante entre dispositivos. Por ello, las fuentes que utilizan la mayoría de los dispositivos se denominan fuentes web (web fonts).
  • Al crear correos electrónicos, es importante considerar las fuentes disponibles, ya que existen fuentes seguras para la web (web-safe fonts) y fuentes personalizadas (custom fonts).

1.1.1. Cómo funcionan las fuentes seguras para la web

  • Las fuentes seguras para la web son aquellas que están ampliamente instaladas en la mayoría de los dispositivos y sistemas operativos.
  • Se muestran correctamente en casi todos los clientes de correo electrónico, independientemente de la plataforma o dispositivo.
  • Ejemplos: Arial, Times New Roman, Georgia y Verdana.
 

Al usar fuentes seguras para la web puedes asegurarte de estas se verán en la mayoría de los destinatarios del correo electrónico.

1.1.2. Cómo funcionan las fuentes personalizadas

  • Las fuentes personalizadas no están garantizadas en todos los dispositivos y sistemas operativos.
  • Son fuentes personalizadas que requieren un código CSS con fuentes de respaldo para garantizar que, si la fuente principal no está disponible, una similar será utilizada en su lugar.
  • Es común agregar varias fuentes de respaldo para asegurar que el contenido se vea bien.
 

El uso de estas fuentes personalizadas en emails puede proporcionar una estética más personalizada y atractiva, pero puede generar inconsistencia en algunos clientes de correo electrónico.

1.2. Cómo funcionan las fuentes en los diferentes clientes de correo electrónico

  • Los clientes de correo electrónico (como Gmail, Outlook o Apple Mail) interpretan las fuentes de manera diferente.
  • Algunos clientes de correo, especialmente aquellos en dispositivos móviles o versiones más antiguas de aplicaciones de escritorio, pueden no admitir ciertas fuentes personalizadas.
  • Si el cliente de correo admite el uso de <link>, @import o @font-face, las fuentes web pueden mostrarse correctamente usando HTML y CSS estándar.

  • Solo estos clientes de correo admiten fuentes web a través de servicios como Google Web Fonts:

    • Outlook para Mac.

    • iOS Mail (el navegador de correo electrónico predeterminado en iOS).

    • Apple Mail.

    • Android (cliente predeterminado, no Gmail)

    • Samsung Mail (Android 8.0).

    • Thunderbird.

  • Gmail no admite generalmente fuentes web, excepto Roboto.
 

Es importante probar los correos electrónicos en varios clientes para asegurar que la presentación de las fuentes sea coherente.

 

2. Cómo se usan las fuentes en Connectif

2.1. Fuentes disponibles en el Editor de Email de Connectif

En el Editor de Email de Connectif hay disponibles una combinación de fuentes seguras para la web y fuentes personalizadas.

Uso de las fuentes en el Editor de Email - 1-min.png

Actualmente, estas son las fuentes seguras para la web disponibles en el Editor de Email:

  • Sans-serif:
    • Arial
    • Arial Black
    • Arial Narrow
    • Arial Rounded MT Bold
    • Avant Garde
    • Calibri
    • Candara
    • Century Gothic
    • Franklin Gothic Medium
    • Futura
    • Geneva
    • Gill Sans
    • Helvetica
    • Impact
    • Lucida Grande
    • OptimaSegoe UI
    • Tahoma
    • Trebuchet MS
    • Verdana
  • Serif:
    • Big Caslon
    • Bodoni MT
    • Book Antiqua
    • Calisto MT
    • Cambria
    • Didot
    • Garamond
    • Georgia
    • Goudy Old Style
    • Hoefler Text
    • Lucida Bright
    • Palatino
    • Perpetua
    • Rockwell
    • Rockwell Extra Bold
    • Baskerville
    • Times New Roman
  • Monospaced:
    • Consolas
    • Courier New
    • Lucida Console
    • Lucida Sans Typewriter
    • Monaco
    • Andale Mono
  • Fantasy:
    • Copperplate
    • Papyrus
  • Script:
    • Brush Script MT

A estas fuentes, se suman estas fuentes personalizadas, con sus correspondientes fuentes de respaldo:

/* Bitter */
font-family: 'Bitter', Georgia, Times, 'Times New Roman', serif;

/* Comic Sans MS */
font-family: 'Comic Sans MS', 'Comic Neue', cursive;

/* Droid Serif */
font-family: 'Droid Serif', Georgia, Times, 'Times New Roman', serif;

/* Inter */
font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Montserrat */
font-family: 'Montserrat', 'Trebuchet MS', Tahoma, sans-serif;

/* MS Serif */
font-family: 'Microsoft Sans Serif', Georgia, serif;

/* New York */
font-family: 'New York Line', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Open Sans */
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Palatino Linotype */
font-family: 'Palatino Linotype', Palatino, 'Palatino LT STD', 'Book Antiqua', Georgia, serif;

/* Poppins */
font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Roboto */
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans

 

2.2. Cómo se sirven las fuentes personalizadas en Connectif

Si eliges mostrar un texto con una fuente personalizada en un email de Connectif, solo aquellos contactos que usen clientes de correo que tengan instaladas estas fuentes podrán visualizarla. El resto verá la fuente de respaldo.

  

Si quieres servir la fuente, deberás incluirla en los estilos CSS del email. Connectif no lo hace de forma predeterminada.

2.3. Recomendaciones y mejores prácticas para utilizar las fuentes disponibles de email

A continuación, se resumen las recomendaciones a la hora de crear emails y utilizar las diferentes fuentes disponibles con Connectif:

  • Utiliza fuentes seguras para la web siempre que sea posible: Para asegurar la mayor compatibilidad en todos los dispositivos y clientes de correo, prioriza el uso de fuentes seguras para la web.
 

La mejor manera de garantizar que tu correo se vea coherente en todos los dispositivos es usar una fuente segura para la web.

  • Prueba en diferentes clientes: Antes de enviar una campaña de email, realiza pruebas en varios clientes de correo y dispositivos para asegurarte de que las fuentes se muestran correctamente en todos los casos.
  • Optimiza para dispositivos móviles: Muchos correos se abren en dispositivos móviles, por lo que es fundamental que las fuentes sean legibles en pantallas pequeñas. Fuentes sans-serif como Arial y Helvetica suelen funcionar bien en estos casos.
  • Contraste y legibilidad: Asegúrate de que las fuentes elegidas contrasten adecuadamente con el fondo del correo para mantener una legibilidad óptima.

 

 

 ¡Enhorabuena!
Has llegado al final de la lección.

  

¿Te han quedado dudas sin resolver?
Recuerda que tienes a tu disposición a nuestros especialistas en Connectif. Para contactar con ellos, tan solo tendrás que abrir ticket a Soporte haciendo clic en el botón azul de “Ayuda” de tu dashboard.

 


¡Sigue aprendiendo!

Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0