Más que palabras: cómo utilizar la tipografía de correo electrónico que habla volúmenes
Más que palabras: cómo utilizar la tipografía de correo electrónico que habla volúmenes
Publicado: 2021-09-16
Cuando pensamos en la creatividad en el correo electrónico, a menudo consideramos las imágenes como la solución de referencia para diseños llamativos, pero también hay una manera de ser creativo con el texto, aprovechando la tipografía.
La tipografía es el estilo del contenido escrito e incluye elementos como el tipo de letra, el peso, el tamaño, el color o el espaciado entre letras.
La tipografía bien considerada puede ser tan impactante que se reduce la necesidad de imágenes. Hoy en día, muchas marcas están captando la atención de los suscriptores y transmitiendo su mensaje con un texto bien diseñado y pocas o ninguna imagen.
Aprenda cómo usted también puede tener un impacto, mientras lo analizo:
Diferentes tipos de letra
Formas creativas de diseñar fuentes
Consejos para la tipografía en los correos electrónicos
Ejemplos de tipografía de correo electrónico
¿Qué es una tipografía?
Un tipo de letra es el diseño de un conjunto de caracteres que incluye letras, números, signos de puntuación y símbolos. Hay una gran cantidad de tipos de letra que se pueden usar para diseñar copias de correo electrónico. Esto puede hacer que sea un poco abrumador, especialmente si no está sujeto a las pautas de la marca. Pero hay algunas pautas generales que puede seguir para ayudar con su selección.
Clasificación tipográfica
Hay cinco clasificaciones básicas de tipos de letra: serif, sans serif, script, monoespaciado y display.
Las fuentes serif son reconocibles por el trazo decorativo al final de las letras, también descritas a menudo como pies.
Sans serif , que significa 'sin serif' en francés, tiene extremos limpios y precisos para cada letra.
Los tipos de letra monoespaciados tienen caracteres que cada uno ocupa la misma cantidad de espacio horizontal. Las fuentes que no están monoespaciadas son fuentes de ancho variable, con letras y espacios de diferente ancho.
Los guiones , o fuentes cursivas, suelen ser letras unidas y fluidas, similares a la escritura a mano.
Las fuentes de pantalla , o de fantasía, son tipos de letra decorativos y creativos, que están destinados a ser utilizados en gran formato o en el diseño de logotipos.
Serif y sans-serif son los tipos de letra más utilizados, especialmente para el cuerpo del texto. Esto se debe a que son más legibles y, por tanto, accesibles. Se rinden bien cuando se reducen y con pesos más bajos.
Los guiones y los tipos de letra de visualización son a menudo demasiado complejos para el cuerpo del texto. Es decir, pueden ser difíciles de leer e incluso más difíciles de escanear. Por lo que suelen estar reservados para titulares.
Los tipos de letra monoespaciados también se utilizan con menos frecuencia como cuerpo de texto. En cambio, se ven favorecidos en los recursos técnicos para que los lenguajes de programación distingan el código del lenguaje natural.
Tipos de letra web
Para utilizar un tipo de letra en un correo electrónico, debe ser una fuente web.
Este es un tipo de letra digital que se puede incluir en su código. Hay muchas fuentes web gratuitas disponibles, así como las que se pueden comprar. Primero, sin embargo, veamos los dos tipos de fuente digital que puede llamar a su correo electrónico: fuentes web seguras y fuentes web.
Fuentes seguras para la web
Estos son tipos de letra que se instalan en la mayoría de los sistemas operativos, lo que significa que llamar a estas fuentes en su código de correo electrónico dará como resultado una representación coherente en todos los clientes de correo electrónico, dispositivos y sistemas operativos.
Estas son las fuentes seguras para la web que mejor se admiten en dispositivos Windows y Mac:
Lista diseñada con fuentes CSS y disponibilidad de fuentes en una máquina personal (Mac)
Puede obtener pilas de fuentes CSS seguras para la web de fuentes CSS. Las pilas de fuentes son una lista de fuentes que comienzan con el tipo de letra principal que le gustaría representar, seguido de fuentes alternativas que se mostrarán si un suscriptor no tiene instalada la fuente elegida. Por ejemplo:
Estos son tipos de letra que no están disponibles en todos los sistemas operativos.
Por lo tanto, debe agregar un código adicional a sus correos electrónicos para usarlos. También debe asegurarse de tener fuentes seguras para la web de respaldo en su pila de fuentes, ya que no todos los clientes de correo electrónico procesarán fuentes web.
Hay muchos lugares diferentes donde puede encontrar fuentes web, como Google Fonts, que es un recurso gratuito, y Adobe Fonts, que requiere una suscripción.
Para obtener una guía completa sobre fuentes web, consulte nuestra Guía definitiva de fuentes web.
Idealmente, no debería utilizar más de dos estilos de fuente a la vez . Esto se debe en parte a que puede volverse ruidoso y confuso si aplica demasiados, pero también puede aumentar el tiempo de carga de su correo electrónico si está llamando a varias fuentes web.
Estilo de fuente
Hay estilos de fuente adicionales que podemos diseñar y codificar para ayudar a llamar la atención sobre palabras y oraciones dentro de nuestro correo electrónico. Pero cómo y cuándo los usamos es importante, ya que pueden afectar la legibilidad y accesibilidad de nuestros correos electrónicos.
La guía definitiva para la accesibilidad del correo electrónico
Descubra los conocimientos y los consejos paso a paso que necesita para escribir, diseñar y codificar correos electrónicos que cualquier persona pueda disfrutar, independientemente de su capacidad.
CONSIGUE TU GUIA
Negrita
Intente limitar el texto en negrita a un puñado de palabras que le gustaría destacar entre el resto de la copia en su correo electrónico. Esto asegurará que no tenga varias palabras clave luchando por llamar la atención.
Si bien el texto en negrita puede ayudar a los suscriptores videntes a identificar información clave, solo a través de la codificación semántica los lectores de pantalla notarán la diferencia.
La etiqueta <b> negrita no es semántica y no enfatizará las palabras elegidas para el usuario del lector de pantalla. Por lo tanto, para hacerse eco de la experiencia que obtienen sus usuarios videntes, utilice siempre la etiqueta <strong>.
Al igual que en negrita, las palabras en cursiva añaden énfasis, aunque en menor medida.
Al igual que con la negrita, hay varias formas de codificar el texto en cursiva. Sin embargo, es la etiqueta <em> la que cumple con las WCAG (no la etiqueta <i>) y puede dar a los lectores de pantalla una indicación de cómo se debe entender algo.
<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>
Tachado
La aplicación de este estilo puede llamar la atención sobre una reducción de precio o una actualización de la información.
Sin embargo, no se procesa de manera uniforme en todos los clientes de correo electrónico.
La etiqueta HTML <strike> no es compatible con Hey y solo es parcialmente compatible con las aplicaciones de Gmail. Y abordar este estilo con CSS line-through también tiene un soporte limitado con algunos clientes de correo electrónico que hacen que la línea sea tan delgada que es bastante difícil de ver.
También vale la pena señalar que existe un problema de accesibilidad con este estilo, ya que los lectores de pantalla no enfatizarán una palabra tachada, lo que podría afectar negativamente la experiencia de quienes dependen de la tecnología de asistencia. Agregar contexto antes de cada cantidad, como 'era' y 'ahora' hará que esta sea una experiencia valiosa para todos.
La mejor manera de codificar un tachado es usando la etiqueta HTML <strike>, así:
El uso de mayúsculas puede llamar la atención sobre las palabras clave y mostrar la jerarquía. Sin embargo, también puede verse como un grito, por lo que es mejor usarlo con moderación.
Otra razón para ser fácil con las mayúsculas es que afecta la legibilidad. Estamos familiarizados con la identificación de palabras por su forma. La forma rectangular uniforme del texto en mayúsculas nos ralentiza y reduce la capacidad de escaneo.
También recomendaría aplicar estilo al texto en mayúsculas con estilos CSS, ya que escribir en mayúsculas podría afectar negativamente a los lectores de pantalla. En algunos casos, un lector de pantalla puede aumentar el volumen cuando encuentra mayúsculas, o puede leer las palabras letra por letra, ya que las identifica como siglas.
Los lectores de pantalla no identifican el estilo CSS, por lo que tratará el texto en mayúsculas con estilo usando CSS de la misma manera que lo haría con el texto normal.
<p>We need to shout about this <br /><span>big win</span></p>
Espaciado de letras
Agregar espacio entre letras puede aportar un poco más de carácter e identidad a sus fuentes, y también puede hacer que algunos estilos de fuente sean más legibles.
Por ejemplo, si necesita aplicar un estilo en mayúsculas a su texto, agregar un poco de espacio entre letras también puede mejorar la legibilidad. Sin embargo, es un buen equilibrio, ya que demasiado espacio entre letras dañará la legibilidad.
Para obtener más información sobre lo que se debe y no se debe hacer con el espaciado entre letras, consulte esta útil publicación.
El soporte es bueno en todos los clientes de correo electrónico con solo Outlook que ofrece soporte parcial. Para agregar un poco de espacio entre letras, desea diseñar con CSS:
<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>
Alineación del texto
Hay un par de errores absolutos con alineación de texto.
En primer lugar, estilo justificado : esto hará que el texto se ancle a la izquierda y a la derecha de su contenedor. Para lograr esto, agrega un espaciado desigual entre las palabras, lo que tiene un gran impacto en la legibilidad.
El texto del cuerpo alineado a la derecha solo debe usarse para idiomas que se leen de derecha a izquierda. Es muy poco natural que los idiomas de izquierda a derecha se lean cuando están alineados a la derecha y también afectará negativamente la legibilidad.
El texto alineado al centro debe reservarse para titulares o párrafos cortos de no más de 3 líneas.
La alineación óptima es la alineación a la izquierda para idiomas de izquierda a derecha. Esto crea un punto de anclaje al que volver cada vez que se lee una línea, y es una consideración clave para las experiencias de lectura accesibles.
Para codificar la alineación del texto, puede utilizar el atributo de alineación de HTML. Sin embargo, esto también alineará cualquier otro elemento que tenga dentro de la celda. Usar CSS en etiquetas semánticas, como encabezados o párrafos, es la forma más efectiva de alinear su copia:
<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>
Color
Lo que hay que recordar con el color es el contraste.
Cuando selecciona colores de texto, debe asegurarse de que se destaquen sobre los colores de fondo o las imágenes de fondo. Esto ayudará a que su contenido sea legible para los suscriptores con una variedad de problemas de visión. La mejor manera de saber si tiene una buena relación de contraste es probar sus colores en el comprobador de contraste de WebAim.
Para profundizar en la creación, diseño y codificación de contenido accesible para correo electrónico, consulte las sesiones de Salesforce Trailhead que grabé con Mark Robbins, ingeniero de software en Salesforce.
Tamaño
Realmente no hay un límite superior para el tamaño del estilo de su texto. Sin embargo, desea mantener las palabras en una línea para que sean legibles y no rompan su correo electrónico.
Sin embargo, existe un límite para el tamaño del texto. Cualquier cosa por debajo de 14px se vuelve difícil de leer para muchas personas, y la función de ajuste de texto automático de Apple Mail de iOS se activará y ampliará su texto.
En Litmus, rara vez nos desviamos por debajo de 18px. Si lo hacemos, lo limitamos a información terciaria, como advertencias, notas al pie y contenido del pie de página. Esto permite que domine el contenido primario.
Altura de la línea
La buena legibilidad también se basa en un espacio adecuado entre cada línea de texto. Demasiado poco y puede ser difícil seguir una sola línea de texto sin que sus ojos se desvíen a otra línea. Demasiado, y cada línea puede parecer independiente de la siguiente, lo que hace que leer y escanear sea un desafío.
Para lograr esto, las alturas de las líneas deben estar entre 1,5 y 2 veces el tamaño del texto. Por ejemplo, un tamaño de fuente de 20 px debe tener una altura de línea de 30-40 px.
Consejos para usar la tipografía en el diseño de correo electrónico
Se puede lograr mucho diseñando contenido escrito. Explicaré cuatro formas en las que puede utilizar de forma eficaz la tipografía en sus correos electrónicos para generar un impacto y guiar a los lectores.
Ayude a los suscriptores a identificar su marca
En primer lugar, puede aplicar fuentes de marca para ayudar a los suscriptores a identificar su marca cuando abran su correo electrónico. Algunas fuentes son muy distintivas, incluso fuera de contexto. Piense en Walt Disney y Coca-Cola.
Diferenciar los tipos de comunicación
Puede diseñar diferentes tipos de comunicación, como correos electrónicos transaccionales y boletines informativos, utilizando diferentes estilos de fuente. Esto ayuda a su audiencia a identificar rápidamente el tipo de comunicación que ha recibido.
Elevar la personalidad de la marca
La personalidad de la marca también se puede elevar con la tipografía creativa, como el uso de fuentes de visualización en el área del héroe que indican mensajes clave.
¿Tu mensaje está llegando bien?
Mantenga a raya los errores y asegúrese de que sus correos electrónicos tengan un impacto. Obtenga una vista previa en más de 100 aplicaciones y dispositivos, valide enlaces e imágenes, pruebe la accesibilidad y más.
No cometer errores
Crear jerarquía
Una de las cosas más útiles que puede hacer con la tipografía es crear una jerarquía que ayude a guiar al lector a través de su correo electrónico. Así que pasaré un poco más de tiempo aquí.
Fuente de inspiración
Hoy en día, el volumen de correos electrónicos que recibe la mayoría de los suscriptores es considerable. Transmitir y digerir todos los mensajes recibidos simplemente no es posible. Por lo tanto, los correos electrónicos abiertos a menudo se escanean a medida que el lector busca puntos de anclaje dentro de su correo electrónico para comprender el valor.
Al buscar estilos, tamaños, pesos y colores de fuente, puede mostrar qué partes de su correo electrónico son más importantes. Aunque no soy un creyente en 'el redil', creo que es importante darles a los suscriptores la oportunidad de comprender el objetivo del correo electrónico y tomar medidas sin tener que comprometerse a leer mucho texto.
Déjame desglosarte con este ejemplo:
Utiliza una tipografía grande y en negrita en el área del héroe para llamar la atención sobre un titular que resume el valor o el propósito del correo electrónico.
Si los clics y las conversiones son el objetivo de su campaña, el seguimiento con un llamado a la acción puede ayudar al lector a tomar la acción sin tener que consumir todo el correo electrónico.
Luego, agregue títulos menos dominantes que dividan el texto del cuerpo para que este contenido pueda escanearse fácilmente si el lector no puede comprometerse a leer cada palabra.
Las marcas se vuelven creativas con la tipografía de correo electrónico
Ahora, algunos ejemplos de marcas con un gran uso de la tipografía en sus diseños de correo electrónico. ¿Qué los hace destacar y atraer a los lectores?
HÚMEDO
DAMP, un boletín que destaca a los enólogos y minoristas que se enfocan en la elaboración y venta de vinos naturales, se inclina fuertemente hacia la tipografía, trabajando con fuentes serif y sans-serif para trazar la jerarquía del contenido.
Fuente: Correos electrónicos realmente buenos
Fuentes utilizadas: Helvetica Neue con repliegue Arial, y la fuente del sistema serif Times New Roman.
El área de héroe muestra la única imagen en este boletín de noticias de formato largo, con tipografía en negrita que marca el tono para el correo electrónico abierto. Esta tendencia de diseño de correo electrónico de tipografía atrevida hace una declaración. No es de extrañar que tantas marcas hayan adoptado este estilo.
Lo realmente interesante de este correo electrónico es que logran este estilo moderno y limpio utilizando fuentes del sistema en lugar de fuentes web, lo que significa que las fuentes se mostrarán de manera similar en todos los clientes de correo electrónico.
Ready Mag
Ready Mag, un editor de gráficos en el navegador, también se inclina hacia las fuentes del sistema, liderando con las fuentes del sistema Mac, seguidas por una variedad de Helveticas. Probablemente esto supere lo que se requiere de una pila de fuentes en el correo electrónico.
Fuente: Correos electrónicos realmente buenos
Fuentes utilizadas : fuentes del sistema Apple, recurriendo a Helvetica y Arial.
Lo que me encanta de este correo electrónico es cómo la tipografía atrevida separa el contenido. Hace que el correo electrónico sea fácil de escanear. Y con un texto de cuerpo mínimo, los lectores con prisa pueden obtener el valor de cada sección y tomar medidas rápidamente.
Propaganda
La plataforma de autoedición Blurb utiliza fuentes web para llevar su identidad de marca a los correos electrónicos, utilizando pesos ligeros y en negrita, así como letras mayúsculas para delinear la jerarquía y las áreas de acción.
Fuente: Correos electrónicos realmente buenos
Fuentes utilizadas : Futura y Proxima Nova (fuentes web), recurriendo a Helvetica y Arial.
Es genial ver los números, los que componen los pasos, con estilo usando texto en vivo en lugar de imágenes. Esto crea una experiencia mucho más fluida para los suscriptores que dependen de los lectores de pantalla y también significa que estos se procesarán cuando las imágenes no estén cargadas.
Tripadvisor
Como muchas marcas, la plataforma de viajes Tripadvisor envió sus mensajes COVID-19 utilizando una plantilla de estilo de letra. Esta es una forma más personal y directa de comunicarse con los clientes, ofreciendo información importante sin la distracción de las imágenes o la posibilidad de ser confundido con un correo electrónico de marketing.
Fuente: Correos electrónicos realmente buenos
Fuentes utilizadas : Arial.
La tipografía grande y en negrita resalta el mensaje general del correo electrónico, mientras que los titulares diseñados para destacarse contra los bloques del texto del cuerpo dividen el contenido proporcionando puntos de anclaje para que el lector comprenda el valor de una sección.
Este correo electrónico altamente escaneable también tiene un amplio relleno a la izquierda y a la derecha del contenedor principal, que es una gran técnica para evitar que grandes bloques de texto abrumen al lector.
Tattly
El minorista de tatuajes temporales Tattly tiene un enfoque muy creativo para el diseño de correo electrónico, con correos electrónicos promocionales que a menudo aprovechan técnicas y tendencias de diseño interesantes. Usan tipografía en negrita en el héroe de este correo electrónico para llamar la atención sobre los nuevos productos que aparecen en el correo electrónico.
Fuente: Correos electrónicos realmente buenos
Fuentes utilizadas : Open Sans (fuente web), recurriendo a Helvetica y Arial.
Es común con correos electrónicos altamente diseñados, como este, que la tipografía se base en imágenes, en lugar de texto en vivo.
Hay una serie de consideraciones de accesibilidad que deben tenerse en cuenta al usar imágenes para el texto, como aplicar texto ALT que se hace eco de la copia y tener en cuenta cómo se verá el texto para las personas que necesitan ampliar el correo electrónico debido a una imagen visual. discapacidad. ¿El texto se pixelará y se volverá ilegible? Además, ¿qué tan legible es el texto basado en imágenes cuando el correo electrónico se reduce en dispositivos móviles?
Si bien el texto en vivo es la mejor manera de mantener sus correos electrónicos accesibles y legibles, existe una manera de hacer que las áreas de héroe basadas en imágenes sean valiosas para una audiencia más amplia, al envolver su imagen de héroe en una etiqueta H1 y agregar el texto de la imagen a su etiqueta ALT. como esto:
<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>
Este enfoque permite que el correo electrónico sea escaneado para los suscriptores que dependen de los lectores de pantalla, ya que pueden utilizar la función de acceso directo para navegar por los titulares.
“Envolver una imagen dentro de una etiqueta H1 es un código semántico válido y se incluirá en los menús de acceso directo de los encabezados del lector de pantalla. Sin embargo, es importante tener en cuenta que el texto ALT puede no ser leído por todas las herramientas de lectura de texto ". - Mark Robbins, ingeniero de software, Salesforce
La tipografía de correo electrónico tiene un gran impacto
Con el número cada vez mayor de mensajes que compiten por la atención de sus suscriptores, la carga de destacar y seguir brindando una experiencia confiable, rápida, sigue aumentando. La tipografía es una excelente manera de hacer que sus correos electrónicos sean hermosos, efectivos y accesibles sin ralentizarlo.
Tenga en cuenta esta guía y comparta cómo usa la tipografía en sus correos electrónicos. ¡Me encantaría verlos!
Cree correos electrónicos de marca y sin errores con Litmus
No más correos electrónicos rotos. Cree y pruebe sus correos electrónicos con Litmus para garantizar una excelente experiencia de suscriptor en cada bandeja de entrada.
