Diseño Plantillas
~ 18 min. leídos
16 comentarios
290201 vistas
valóralo
28 abril

Mejores Fuentes para Email: Consejos y Trucos de Uso

Stripo / Blog / Mejores Fuentes para Email: Consejos y Trucos de Uso

Una de las principales preocupaciones en el proceso de creación de email es elegir la fuente. Peso, altura, ancho, color, forma, espaciado... ¿Todo importa? Sí, importa. Pero lo más importante es elegir la fuente que sea fácil de leer, todo lo demás son detalles menores.

Mira nuestro video corto sobre fuentes, los tipos, fuentes seguras para usar en la web, y cómo aplicar fuentes festivas con Stripo. Y lo más importante, cómo elegir la fuente adecuada para tus plantilla de email:

Diseñe correos electrónicos sofisticados y totalmente receptivos.

Hay dos opciones a tomar cuando elijas la mejor fuente para email del 2018. La primera opción es elegir una fuente segura para la web que sea una fuente estándar e incluida por defecto en la mayoría de los SO y que usen la mayoría de los clientes.

Esta es una lista de las 10 mejores fuentes seguras para web que puedes usar con un 100 % de garantía de que se verá como tú la viste:

1. Arial
Diseñada en 1982, viene con todas las versiones de Microsoft, desde Windows 3, y Apple Mac OS X. La muestran todos los clientes de email. Debido a sus cortes diagonales terminales, luce menos mecánica comparada con otras fuentes de la familia sans-serif.

2. Helvetica
Una fuente sans-serif, uno de los tipos más utilizados, tiene letras redondeadas y mayúsculas anchas. Diseñada en 1957

3. Times New Roman
Tiene letras minúsculas altas, ligeramente condensadas, astas descendientes y ascendentes cortos. Encargada por “The Times” en 1931.

4. Verdana
Fue diseñada para ser legible en pantallas con resolución baja, su principal característica son sus minúsculas altas y anchas.

5. Courier / Courier New
Diseñada en 1955, similar a Times New Roman, pero ajustada para ser una fuente monoespaciada. Courier New tiene puntos y comas más pesadas que la Courier original. Courier es la fuente estándar utilizada en la industria del cine y escritura de guiones.

6. Tahoma
Parecida a Verdana pero con letras más angostas, contraposición más pequeña y letras más ajustadas. Es utilizada como fuente predeterminada para Windows 95, 2000 y XP.

7. Georgia
Tiene una minúscula alta, trazos más gruesos que el promedio, sus numerales se combinan con el texto debido a su tamaño similar.

8. Palatino
Fue diseñada originalmente para encabezados, publicidades e imprenta. Es más amplia que otras fuentes serif anticuadas.

9. Trebuchet MS
Tiene colas más cortas en algunas letras, en negrita sus letras son más puntiagudas, y sus puntos redondeados en minúscula. Fue lanzada en 1996.

10. Geneva
Una versión rediseñada de Helvetica, su principal distinción es que tiene un conjunto básico de ligaduras.

La siguiente opción es incluir una fuente para web pero hay muchos riesgos de que no se vea apropiadamente porque el cliente de email no soporte la fuente. En este caso, la fuente web será reemplazada por una fuente predeterminada.  

Aquí hay una lista de fuentes predeterminadas de los clientes de email más populares:

  • iCloud mail usa Helvetica como fuente predeterminada;
  • Gmail usa Arial;
  • Microsoft Outlook, en sus versiones más antiguas a menudo usa Calibri; 
  • Outlook 2007/2010/2013 tiene Times New Roman como fuente de respaldo.

¿Cómo elegir una fuente para email apropiadamente?

Si confías en tu opinión personal, existe el riesgo de que nadie comparta tu pensamiento sobre cuál es la mejor fuente, y tu mensaje será visto como un mensaje del pasado o será tan fácil de leer como las personas en el transporte público por la mañana temprano.

Si usas demasiadas fuentes se verá muy complicado en el mejor de los casos, y molesto en el peor. Elige solo una o dos fuentes para un email. En el caso perfecto, es suficiente usar solo una fuente, pero en diferentes tamaños: uno para resaltar el encabezado y otro para el resto del contenido.

En realidad, hay solo dos opciones para elegir una fuente. Puedes elegir una fuente segura para la web y asegurarte de que se mostrará igual para todos, o añadir una fuente web y confiar en que todos usen los clientes de email que soporten la fuente, lo que es casi imposible, porque Gmail, Yahoo Mail y Outlook 2007/10/13/16 no soportan fuentes web y, honestamente, más o menos que usuarios de iPhone y iPad pueden verlas. Así que no recomendamos usar fuentes web para no perjudicar la experiencia de usuario.

La principal característica de tu fuente, como ya se mencionó, es la amenidad. ¿Qué podría añadirse? Una característica más importante que la amenidad es la legibilidad. No son exactamente lo mismo. En una fuente, algunos caracteres pueden ser legibles y otros no. Por supuesto que un texto legible es mejor y más rápido de leer, así que presta atención a que todos los caracteres sean visibles, claros y distintivos.

El experimento sobre la amenidad de fuentes fue brindado por Norbert Schwarz y Hyunjin Song en el 2010. Los resultados fueron sorprendentes. Pasas casi el doble de tiempo leer una fuente decorativa que una predeterminada y fácil de leer:

email font experiment, clear fonts are better to read

¿Cuál elegir, Serif o Sans-serif?

Otro punto es elegir entre fuentes serif y sans-serif. ¿Cuál es la diferencia?

difference between serif and sans serif fonts

Las fuentes serif pueden ser definidas como las que tienen una pequeña línea al final de cada carácter. Las fuentes serif más populares son Times New Roman y Georgia.

Las fuentes sans-serif son las que no tienen una línea decorativa al final de cada símbolo. Las fuentes sans-serif más populares son Arial, Trebuchet MS y Helvetica.

Durante la investigación vi que muchas fuentes que decían que las fuentes serif son más aptas para los emails, pero yo creo que mienten. Basado en la conjetura de que los emails son vistos solo online en pantallas de computadora de escritorio o en móviles, las mejores fuentes son las sans-serif. Es más fácil leer caracteres sans-serif desde la pantalla.

Otro hecho interesante es que el artículo del blog de diseño de email Beefree que recomienda utilizar fuentes serif para emails con contenido pesado utiliza sans-serif como fuente en su blog:

sans serif is better for screens

Entonces, ¿por qué no usan serif para su blog si es tan perfecto? Pienso que esa es una prueba de que las sans-serif son mejores porque la misma regla aplica para páginas web que para emails. Usa serif solo para encabezados y subencabezados si es necesario.

Use fuentes personalizadas en correos electrónicos para mantenerse totalmente en la marca.

Tamaño de Fuente

Si cambias la fuente, asegúrate de que la que hayas elegido no sea más pequeña que la anterior. A menudo, distintas fuentes tienen un peso de símbolo diferente, entonces los mismos 14px se verán diferentes debido a la familia de fuente.

El mejor tamaño de fuente para email es 14px y mayor para usuarios de pc de escritorio, y 16px para dispositivos móviles. Si usas una plantilla adaptable, asegúrate de que el tamaño de caracteres se incrementará automáticamente para la versión móvil.  

He hecho una plantilla de email con Stripo que permite comparar diferentes dimensiones de las mismas fuentes. Estos son los resultados:

how to choose a font for emai and to find the best font size? fonts sizes comparison examples

Como resultado, las fuentes de 16px lucen asombrosas. Preferiría utilizarlas tanto para escritorio como dispositivos móviles.

Espaciado

Es importante tener espacio entre párrafos y entre líneas de texto. Presta atención a que tu fuente tenga espacio suficiente entre líneas. La altura más ampliamente usada varía de 22px a 24px. En otras palabras, la altura perfecta para líneas en el email suele ser 1.5em, que son 24 píxeles.

Algo más a prestar atención es el espacio entre caracteres. No hay una opinión decisiva sobre qué es mejor, si una fuente con poco o mucho espacio.

Georgia y Times New Roman brindan un espacio muy angosto entre caracteres, así que influye bastante en la amenidad de lectura. A mi parecer, fuentes que tienen una buena distancia entre caracteres son Courier y Courier New. Tal vez por eso es por lo que estas fuentes son tan populares en el 2017. 

Usa espacios entre los elementos del email. Si hay una imagen en el mail, asegúrate de tener espacios antes y después de la imagen, eso mejora bastante la amenidad de lectura. Por supuesto, es mejor alinear al centro elementos gráficos como imágenes.

Este es un ejemplo donde se ignoró el espaciado:

bad email font and spacing, paragraphs

¿Puedes imaginar que hay un solo párrafo que contiene más de 1500 palabras? Es obvio que es mejor decir menos que más. 

Aquí hay uno más:

grey is worse than black for reading, email design, text color

Este es incluso peor porque la fuente es gris, dando una mala visibilidad, la fuente es muy pequeña y, sin comentarios sobre el espaciado. Sí, hay espaciado, pero no ayudará. Las oraciones son demasiado largas.

Enlaces y botones

No uses una fuente diferente para marcar los enlaces. Nunca pongas enlaces sin un texto de ancla. El texto del anclaje debería explicar a dónde se dirige el enlace y ser orgánicamente parte del texto. No uses palabras como “aquí”, “enlace” o “link” como texto de ancla. Son muy cortos y generales como para que alguien se interese.

Con los botones sucede lo mismo que con los enlaces, pero son una forma más interactiva para los usuarios. Es mejor usar ambos en el email. Si brindas un enlace para leer un artículo, haz que sea un enlace de texto, y si das un enlace para probar un producto que tienes, usa botones.

Una de las mejores prácticas es hacer que los enlaces sean del mismo color que el logo. Luce genial, mira:

color identity, the best fonts for logo, text and links

No hay reglas exactas sobre el color de los botones que sea mejor, pero lo mejor es confiar en la psicología del color e intentar no arruinar el concepto de diseño con una reproducción de color muy fuerte.

Hay dos fuentes que se adaptan mejor a los botones: Georgia y Verdana. Está bueno usar Georgia también para encabezados y subencabezados. ¡Luce genial! En realidad, lo único que deberías verificar antes de enviar un email es cómo el color de texto combina con el fondo del botón y asegurarse de que sea bien visible para su lectura. También verifica si el texto está ubicado apropiadamente en el botón, no debería cruzar sus bordes. 

Este es un ejemplo donde el botón luce genial:

the best font for email banner and button design

Este es un ejemplo donde los botones y enlaces se usan demasiado:

too many links and buttons in email design

Hacer que sus botones de CTA notable y se puede hacer clic en todas parts.

Texto sobre banners

Aquí está el cambio a usar fuentes propias, web, script, manuscritas o decorativas que no deberías utilizar como fuente del texto principal. En caso de que el texto en el banner sea parte de una imagen podrías hacer algo. 

Lo principal a tener en cuenta al crear un banner de email es resaltar la identidad de la marca. Podrías usar cualquier fuente, pero es mejor usar una legible. No escribas demasiado sobre un banner. Debería haber solo unas palabras de bienvenida que creen interés y motiven a los usuarios a seguir leyendo.

Estos son dos buenos ejemplos. Este es con fuentes claras y sencillas:

clear font for email banner, the best fonts for emails

Un banner más que adopta fuentes decorativas:

decorative font on email banner, the best email fonts

El que elijas para inspiración y para diseño de tu email es tu elección.

Colores

La única regla que seguir al usar colores es solo exhibir la identidad de la marca. Si tienes una idea de hacer un texto colorido, deja de lado este punto de vista porque hará que el texto no pueda leerse. 

Por lo general, solo 3 colores deben utilizarse en un email. Uno es para el encabezado, el otro para el resto del texto, y el azul para hacer visible los enlaces. ¡Eso es todo! Incluso podrías reducir esta cantidad a solo dos colores, haciendo el encabezado del mismo color, pero resaltándolo con un tamaño o fuente diferente.

Si deseas subrayar una oración o una frase, tan solo usa la fuente en negrita, usar otro color es ambiguo. Comúnmente para el contenido de un email, los diseñadores usan color gris oscuro o negro. Es mejor para la legibilidad. La única excepción es cuando tienes un fondo negro. En este caso, usa una fuente blanca. No uses gris claro porque es difícil de leer por los diferentes ajustes de contraste.

Etiquetas HTML y formato del texto

Por lo general, las fuentes para web son declaradas en la disposición CSS, así que ya no será simple HTML pero hay varias etiquetas HTML para el formato del texto, espero que todos sepan esto de antemano, pero aquí va:

  • Para usar fuente en negrita:
    <strong> </strong> o <b> </b>
  • Para hacer una lista con viñetas en el email usa esta estructura:
    <ul>
        <li>primer punto</li>
        <li>segundo punto</li>
        <li>tercer punto</li>
    </ul>
  • Para usar la cursiva o itálica para dar énfasis:
    <i> </i> o <em> <em>
  • Para añadir un texto pequeño de la misma fuente que usas:
    <small> </small>
  • Para resaltar el texto con amarillo (por defecto):
    <mark> </mark>
  • Para marcar que hay texto que fue borrado, pero no reemplazado:
    <del> </del>
  • Te permite definir un párrafo:
    <p> </p>

Prácticas adecuadas para la implementación de fuentes para web 

Debido a muchos experimentos hechos por el equipo de marketing de eSputnik, las mejores fuentes para emails son Arial y Tahoma. Arial es la fuente más convincente entre quienes arman campañas de marketing de email. Tahoma luce genial tanto en emails con mucho contenido como con pequeños textos.

He creado una plantilla de email con el editor Stripo con el mismo texto y el mismo tamaño de 18px para cada fuente. No hay Palatino ni Geneva en el editor Stripo pero hay fuentes personalizadas como Roboto y Open Sans que son fuentes predeterminadas no en todos, pero en la mayoría de los Sistemas Operativos, y es mejor definir una fuente de último recurso en caso de que las uses.

Así que, estos son los resultados, solo compara estas fuentes y elige la que se adapte mejor a lo que más necesitas:

the best font for email, web safe fonts comparison

No gastes tiempo buscando la mejor fuente para Gmail, la mejor fuente para Outlook y cualquier otro cliente de email. Porque los clientes de email reemplazan las fuentes desconocidas por sus fuentes de respaldo. Y como ya dijimos antes, Gmail usa Arial, Outlook reemplaza las fuentes con Times New Roman, y Mac OS X usa Helvetica.

Resumen

Independientemente de lo dicho anteriormente, podemos decir que no hay una fuente profesional y un tamaño que sea legible y luzca bien en todos los tipos de dispositivos. Siempre tienes que elegir:

  • Georgia y Times New Roman son muy angostas;
  • Courier New es ancha, pero puede que sea muy ancha para un email;
  • Arial es más ligera que Helvetica;
  • Es imposible diferenciar las fuentes Verdana y Tahoma.

A mi parecer, estas dos últimas son las mejores fuentes para emails para boletines informativos de negocios, pero lucen mal cuando están impresas. En cuanto a mí, preferiría elegir las últimas dos fuentes para mis plantillas de email. ¿Cuál prefieres tú? No dudes en dejar comentarios en Facebook y compartir este artículo si te gustó.

Paulo Marreiros hace 2 meses

Excelente o artigo dessa página. De muito gosto! Todos as minhas dúvidas e ac e acredito que também de outras pessoas, foram esclarecidas. PauloMar/São Paulo, Brazil.

Hanna Kuznietsova comentado en Paulo Marreiros hace 2 meses

Paulo, Obrigado por uma revisão tão agradável. Estamos muito felizes que o artigo tenha sido útil. Desejamos sinceramente o melhor em suas campanhas

pirates hace 3 meses

nice blog theme you use in your blog can you share which theme you are using

Hanna Kuznietsova comentado en pirates hace 3 meses

Hello, Pirates. Thank you for your question. If you are talking about the font we are using, it is Montserrat, 16px. If it's not what you asked us about, then could you clarify please what theme exactly you mean? Thank you

Igor Greshner hace 5 meses

Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.

Hanna Kuznietsova comentado en Igor Greshner hace 5 meses

Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing

Khairom Munawwar Baharom hace 11 meses

Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)

Hanna Kuznietsova comentado en Khairom Munawwar Baharom hace 11 meses

Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.

Martin Schenk hace 11 meses

Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.

Hanna Kuznietsova comentado en Martin Schenk hace 11 meses

Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück

rohit dubey hace 1 año

Thanks for sharing this amazing content. This is really helpful for us.

Hanna Kuznietsova comentado en rohit dubey hace 1 año

Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!

Marcia Bosscher hace 1 año

What font are you using for this post? I like it!

Hanna Kuznietsova comentado en Marcia Bosscher hace 1 año

Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day

Myron Gould hace 1 año

I found this article to be a very helpful refresher. Thank you!

Hanna Kuznietsova comentado en Myron Gould hace 1 año

Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!

Te podría interesar

← anterior siguiente →
09 octubre · 16 min. leídos
16 Mejores Prácticas para Diseño de Encabezado de Email

El encabezado del email es el elemento que usas regularmente en tus emails de boletines. Pero muy a menudo olvidamos que es más complejo que solo un logo y un menú. El encabezado de boletín completo consiste de tres partes esenciales: información sobre el remitente; la línea de asunto, y el preencabezado; el encabezado en sí. En esta publicación te mostraremos cómo hacer la línea de asunto y el preencabezado. Y te mostraremos 16 ideas de encabezado para que tus emails...

Diseño Plantillas How-to
Use-Data-from-Google_Featured Image
25 septiembre · 9 min. leídos
Cómo Extraer Datos de Google Sheets a los Emails

¿Alguna vez pensaste en extraer datos de Google Sheets a los emails para automatizar el proceso de producción/actualización de email?  Bueno, es posible. Incluso es posible hacerlo sin tu interferencia. Queremos recordarte qué es el contenido en tiempo real: El contenido en tiempo real, o contenido dinámico, te permite actualizar el contenido del email después de que haya sido enviado. Esto quiere decir que los usuarios siempre verán contenido nuevo, precios y descripciones actualizadas, no verán los anuncios de ofertas...

Diseño Plantillas How-to AMP
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones