Información sobre las fuentes en emails

Qué aprenderás

Descubre las oportunidades y las limitaciones de usar fuentes online, y cómo enviar emails que se ajusten a tu marca.

Cómo funcionan las fuentes

Las fuentes son representaciones de texto y se pueden usar en medios impresos o en medios online. Es posible que conozcas algunas de las fuentes más comunes, como Arial o Times New Roman, pero hay miles de otras fuentes que puedes usar para comunicar y representar tu marca.

Con los medios online (como los sitios web o los emails), tus opciones de fuentes son casi ilimitadas. Sin embargo, cuando compartes tu creación con otra persona, es posible que no se vea exactamente igual, porque no todos los dispositivos tienen acceso a las mismas fuentes.

Hay 2 formas principales de que un dispositivo pueda acceder a una fuente y usarla: fuentes del sistema (es decir, fuentes almacenadas en el dispositivo que estás usando) y fuentes web (es decir, fuentes cargadas desde un servidor externo)

Información sobre las fuentes del sistema

Los ordenadores y los teléfonos vienen precargados con una variedad de fuentes. Hay algunas fuentes instaladas habitualmente (la mayoría de los dispositivos vienen con Georgia y Verdana, por ejemplo), pero los dispositivos pueden variar mucho en lo que incluyen de forma predeterminada. Las fuentes que se usan en la mayoría de los dispositivos se llaman fuentes «seguras para web».

Acerca de las fuentes web

A diferencia de las fuentes seguras para la web, las fuentes web se cargan desde un servidor externo al mismo tiempo que el contenido que estás viendo. Las fuentes personalizadas suelen ser fuentes web. Si utilizas una fuente web, también querrás configurar una fuente segura para la web como alternativa, por si un dispositivo en particular no puede cargar tu fuente web.

Información sobre las fuentes alternativas

Cuando ves algo online, ya sea una página web o un email, hay CSS (código que se utiliza para dar estilo al contenido online) entre bastidores que le indica a tu dispositivo qué fuente debe mostrar. Si tu dispositivo no puede acceder a la fuente, consultará el CSS para ver si hay una «fuente de reserva» (una fuente o varias fuentes seleccionadas por la persona que creó el sitio web o el mensaje de email, que se usará en caso de que la fuente preferida no esté disponible). Las fuentes de reserva deben ser fuentes seguras para la web que la mayoría de los dispositivos puedan usar. Te ofrecen un mayor control sobre cómo aparece tu mensaje cuando alguien lo ve en un dispositivo que no admite fuentes personalizadas/web.

Si no hay ninguna fuente de reserva disponible o si la fuente de reserva no es compatible con el dispositivo que se está usando, el dispositivo usará una fuente predeterminada, como Arial o Times New Roman. Las fuentes predeterminadas varían mucho entre dispositivos y aplicaciones.

Cómo funcionan las fuentes en email

Algunos clientes de email admiten fuentes web, pero otros no. Cuando alguien abra tu email en una bandeja de entrada o un dispositivo que no admita fuentes web, verá una fuente predeterminada. Puedes controlar qué fuentes del sistema se usan como copias de seguridad configurando una fuente alternativa.

Si alguien abre tu email en un dispositivo que admite fuentes web, se cargará la fuente desde la URL proporcionada en el CSS de tu email. Si el dispositivo puede acceder a la fuente, la mostrará; de lo contrario, pasará a las fuentes de reserva.

La compatibilidad con fuentes web depende de la aplicación de email, su versión y el tipo de cuenta de email. Algunos ejemplos de clientes compatibles con fuentes web:

• Apple Mail
• iOS Mail (la aplicación de email predeterminada de iOS)
• Algunas aplicaciones de email para Android (la compatibilidad varía según la aplicación; Android 2.3 no admite el método @import que utilizan las fuentes de Google y Adobe)
• Samsung Email en Android, excepto cuando se usa una dirección de email de Microsoft, como Outlook.com o Hotmail
• Outlook para Mac 2011 y 2016; Outlook para Mac 16.80 no admite fuentes web

Gmail, incluida la aplicación de Gmail en Android, por lo general no admite fuentes web. El webmail de escritorio de Gmail puede mostrar Roboto y Google Sans porque Gmail los incluye en sus propios estilos. Esto no significa que Gmail pueda cargar otras fuentes personalizadas desde tu email. Configura una fuente de respaldo y prueba el email en las aplicaciones de Gmail que usan tus destinatarios.

Para ver los detalles por aplicación y versión de email, consulta la tabla de compatibilidad de fuentes web de Can I email.

Optimizar las fuentes en tus emails

La mejor forma de garantizar que tu email se vea de forma uniforme en todos los dispositivos es utilizar una fuente web segura. Las fuentes predeterminadas de Klaviyo suelen ser seguras para la web. Encuentra las fuentes que ofrece Klaviyo en:

• Contenido > Medios y marca > Marca: selecciona Fuentes. Si, en su lugar, ves Estilo, selecciónalo para encontrar la sección Fuentes.
• El panel Editar estilos en el editor de plantillas de email
• La barra de herramientas de formato de texto al editar texto en un bloque de texto, o los controles de fuente en otros bloques que contienen texto
• El panel Editar estilos en el editor de formularios de registro

Consejos para usar fuentes personalizadas

Si prefieres usar una fuente personalizada, usa los consejos siguientes para asegurarte de que tus emails se vean bien diseñados en todos los dispositivos.

Usar fuentes alternativas

Selecciona una fuente de reserva segura para la web que se parezca lo máximo posible a tu fuente personalizada. Puedes seleccionar una fuente de reserva de entre las fuentes predeterminadas de Klaviyo al configurar la fuente personalizada.

Usar texto en las imágenes

Aunque un email con solo imágenes puede perjudicar la capacidad de entrega, puedes usar estratégicamente una combinación de texto en las imágenes y texto en bloques de texto para crear un email que se alinee con la marca. Elige una fuente personalizada y de marca para los encabezados y las llamadas a la acción (CTA), y combínala con una fuente segura para la web para usarla en el cuerpo del texto. Conserva también la información esencial y la CTA principal en bloques de texto o de botones, para que los destinatarios puedan usarlos incluso si las imágenes no se cargan.

Utiliza imágenes que incluyan la tipografía de tu marca para el texto seleccionado y asegúrate de añadir texto alternativo cuando añadas las imágenes a tu email. Luego, aplica la tipografía segura para web al resto del texto de tu email. Esto te permite usar la tipografía de tu marca y, al mismo tiempo, mantener el resto de tu email legible cuando las imágenes no se cargan.

Haz pruebas exhaustivas

Independientemente de los métodos que elijas, prueba tus emails a fondo, especialmente al usar un nuevo diseño. Envía el email a ti mismo en varios dispositivos para asegurarte de que te gusta cómo se ve en cada uno. También puedes utilizar programas de prueba de email como Litmus o Email on Acid para probar con una gama más amplia de dispositivos.

Recursos adicionales