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:
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:
¿Cuál elegir, Serif o Sans-serif?
Otro punto es elegir entre fuentes serif y sans-serif. ¿Cuál es la diferencia?
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:
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.
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:
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:
¿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:
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:
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:
Este es un ejemplo donde los botones y enlaces se usan demasiado:
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:
Un banner más que adopta fuentes decorativas:
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:
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ó.
17 comentarios