Mais do que palavras: como usar tipografia de e-mail que fala volumes

Serif e sans-serif são as fontes mais comumente usadas, especialmente para texto. Isso ocorre porque eles são mais legíveis e, portanto, acessíveis. Eles renderizam bem quando reduzidos e com pesos menores.

Os tipos de letra de script e de exibição são frequentemente muito complexos para cópia do corpo. Ou seja, podem ser difíceis de ler e ainda mais difíceis de digitalizar. Portanto, geralmente são reservados para manchetes.

Fontes monoespaçadas também são menos comumente usadas como texto do corpo. Em vez disso, eles são favorecidos em recursos técnicos para linguagens de programação para distinguir o código da linguagem natural.

Fontes da web

Para usar uma fonte em um e-mail, ela precisa ser uma fonte da web.

Esta é uma fonte digital que pode ser chamada em seu código. Existem muitas fontes da Web gratuitas disponíveis, bem como aquelas que podem ser adquiridas. Primeiro, porém, vamos dar uma olhada nos dois tipos de fonte digital que você pode chamar em seu e-mail: fontes seguras da web e fontes da web.

Fontes seguras da web

Esses são tipos de fontes instalados na maioria dos sistemas operacionais, o que significa que chamar essas fontes em seu código de e-mail resultará em uma renderização consistente em clientes de e-mail, dispositivos e sistemas operacionais.

Aqui estão as fontes seguras da web com melhor suporte em dispositivos Windows e Mac:

Fontes da web

Esses são tipos de letra que não estão disponíveis em todos os sistemas operacionais.

Portanto, você precisa adicionar algum código extra aos seus e-mails para colocá-los em uso. Você também deve garantir que tenha fontes seguras da web substitutas em sua pilha de fontes, pois nem todos os clientes de e-mail renderizarão as fontes da web.

Existem muitos lugares diferentes onde você pode encontrar fontes da web, como Google Fonts, que é um recurso gratuito, e Adobe Fonts, que requer uma assinatura.

Para obter um guia completo sobre fontes da web, consulte nosso Guia definitivo para fontes da web.

Idealmente, você não deve usar mais de dois estilos de fonte por vez . Isso ocorre em parte porque pode ficar barulhento e confuso se você aplicar muitos, mas também pode aumentar o tempo de carregamento do seu e-mail se você estiver chamando várias fontes da web.

Estilo da fonte

Existem estilos de fonte adicionais que podemos criar e codificar para ajudar a chamar a atenção para palavras e frases em nosso e-mail. Mas como e quando os usamos é importante, pois pode afetar a legibilidade e acessibilidade de nossos e-mails.

O guia definitivo para acessibilidade de e-mail Descubra os insights e os conselhos passo a passo de que você precisa para escrever, projetar e codificar e-mails que podem ser aproveitados por qualquer pessoa - independentemente de sua capacidade. OBTENHA O SEU GUIA

Audacioso

Tente limitar o texto em negrito a um punhado de palavras que você gostaria de destacar entre o resto da cópia em seu e-mail. Isso garantirá que você não tenha várias palavras-chave lutando por atenção.

Embora o texto em negrito possa ajudar os assinantes com visão a identificar as principais informações, é apenas por meio da codificação semântica que os leitores de tela perceberão a diferença.

A <b> tag em negrito não é semântica e não enfatiza a (s) palavra (s) escolhida (s) para o usuário do leitor de tela. Portanto, para ecoar a experiência que seus usuários videntes estão obtendo, sempre use a tag <strong>.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

itálico

Semelhante ao negrito, colocar palavras em itálico adiciona ênfase, embora em menor grau.

Assim como o negrito, existem várias maneiras de codificar texto em itálico. No entanto, é a tag <em> que é compatível com WCAG (não a tag <i>) e pode dar aos leitores de tela uma indicação de como algo deve ser entendido.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

Tachado

Aplicar este estilo pode chamar a atenção para uma redução de preço ou atualização de informações.

No entanto, ele não é processado de forma consistente nos clientes de e-mail.

A tag HTML <strike> não é compatível com Hey e apenas parcialmente compatível com aplicativos do Gmail. E lidar com esse estilo com CSS line-through também tem suporte limitado com alguns clientes de e-mail tornando a linha tão fina que é difícil de ver.

Também é importante notar que há um problema de acessibilidade com esse estilo, já que os leitores de tela não enfatizam uma palavra tachado, o que pode impactar negativamente a experiência daqueles que dependem de tecnologia assistiva. Adicionar contexto antes de cada valor, como 'era' e 'agora', tornará essa experiência uma experiência valiosa para todos.

A melhor maneira de codificar um tachado é usando a tag HTML <strike>, assim:

<p>Was<br /><span> <strike> $200 </strike> </span></p>

Maiúsculas

Usar letras maiúsculas pode chamar a atenção para palavras-chave e mostrar a hierarquia. No entanto, também pode ser visto como gritos, por isso é melhor usar com moderação.

Outro motivo para ir devagar com as maiúsculas é que isso afeta a legibilidade. Estamos familiarizados com a identificação de palavras por sua forma. A forma retangular uniforme do texto em maiúsculas nos torna mais lentos e reduz a digitalização.

Eu também recomendaria estilizar o texto em maiúsculas usando o estilo CSS, já que escrever em maiúsculas pode impactar negativamente os leitores de tela. Em alguns casos, um leitor de tela pode aumentar o volume ao encontrar letras maiúsculas ou pode ler as palavras letra por letra, pois as identifica como siglas.

O estilo CSS não é identificado pelos leitores de tela, portanto, ele tratará o texto em maiúsculas estilizado com CSS da mesma forma que trataria o texto normal.

<p>We need to shout about this <br /><span>big win</span></p>

Espaçamento entre letras

Adicionar espaçamento entre letras pode trazer um pouco mais de identidade e caráter às suas fontes, e também pode tornar alguns estilos de fonte mais legíveis.

Por exemplo, se você precisa aplicar algum estilo de maiúsculas ao seu texto, adicionar um pequeno espaçamento entre letras também pode melhorar a legibilidade. No entanto, é um equilíbrio delicado, pois o espaçamento excessivo entre letras prejudicará a legibilidade.

Para obter mais informações sobre o que fazer e o que não fazer no espaçamento entre letras, verifique esta postagem útil.

O suporte é bom para clientes de e-mail, com apenas o Outlook oferecendo suporte parcial. Para adicionar algum espaçamento entre letras, você deseja estilizar usando 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>

Alinhamento de texto

Existem algumas proibições completas com alinhamento de texto.

Em primeiro lugar, estilo justificado : isso fará com que o texto fique ancorado à esquerda e à direita de seu contêiner. Para conseguir isso, ele adiciona espaçamento desigual entre as palavras, afetando fortemente a legibilidade.

O corpo do texto alinhado à direita deve ser usado apenas para idiomas que são lidos da direita para a esquerda. Não é natural que os idiomas da esquerda para a direita sejam lidos quando alinhados à direita e também afetará negativamente a legibilidade.

O texto alinhado ao centro deve ser reservado para títulos ou parágrafos curtos de no máximo 3 linhas.

O alinhamento ideal é alinhado à esquerda para idiomas da esquerda para a direita. Isso cria um ponto de ancoragem para retornar a cada vez que uma linha é lida e é uma consideração chave para experiências de leitura acessíveis.

Para codificar o alinhamento do texto, você pode usar o atributo de alinhamento HTML. No entanto, isso também alinhará quaisquer outros elementos que você tenha na célula. Usar CSS em tags semânticas, como cabeçalhos ou parágrafos, é a maneira mais eficaz de alinhar sua cópia:

<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>

Cor

O que é preciso lembrar com a cor é o contraste.

Ao selecionar as cores do texto, você precisa garantir que elas se destaquem em relação às cores ou imagens de fundo. Isso ajudará a tornar seu conteúdo legível para assinantes com uma série de deficiências visuais. A melhor maneira de descobrir se você tem uma boa taxa de contraste é testar suas cores no verificador de contraste WebAim.

Para um mergulho mais profundo na criação, projeto e codificação de conteúdo acessível para email, verifique as sessões do Salesforce Trailhead que gravei com Mark Robbins, engenheiro de software da Salesforce.

Tamanho

Não há realmente um limite máximo para o tamanho do estilo de seu texto. No entanto, você deseja manter as palavras em uma linha para que sejam legíveis e não quebrem seu e-mail.

No entanto, há um limite para o tamanho do texto pequeno. Qualquer coisa abaixo de 14 px torna-se difícil para muitas pessoas lerem, e o recurso de ajuste automático de texto do iOS Apple Mail irá iniciar e ampliar seu texto.

No Litmus, raramente ficamos abaixo de 18 px. Se o fizermos, o limitaremos a informações terciárias, como advertências, notas de rodapé e conteúdo do rodapé. Isso permite que o conteúdo primário domine.

Altura da linha

A boa legibilidade também depende do espaço adequado entre cada linha de texto. Muito pouco e pode ser difícil seguir uma única linha de texto sem que seus olhos se desviem para outra linha. Demais, cada linha pode parecer independente da próxima, tornando a leitura e a digitalização um desafio.

Para conseguir isso, a altura das linhas deve ser entre 1,5 e 2 vezes o tamanho do texto. Por exemplo, um tamanho de fonte de 20 px deve ter uma altura de linha de 30-40 px.

Dicas para usar tipografia no design de e-mail

Muito pode ser alcançado estilizando o conteúdo escrito. Explicarei quatro maneiras pelas quais você pode usar a tipografia com eficácia em seus e-mails para causar impacto e orientar os leitores.

Ajude os assinantes a identificar sua marca

Em primeiro lugar, você pode aplicar fontes de marca para ajudar os assinantes a identificar sua marca quando abrirem seu e-mail. Algumas fontes são muito distintas, mesmo fora do contexto. Pense em Walt Disney e Coca-Cola.

Diferencie os tipos de comunicação

Você pode definir o estilo de diferentes tipos de comunicação, como emails transacionais e boletins informativos, usando diferentes estilos de fonte. Isso ajuda seu público a identificar rapidamente o tipo de comunicação que recebeu.

Eleve a personalidade da marca

A personalidade da marca também pode ser elevada com tipografia criativa, como o uso de fontes de exibição na área do herói chamando mensagens importantes.

A sua mensagem está sendo transmitida corretamente? Mantenha os erros sob controle - e garanta que seus e-mails tenham impacto. Visualize em mais de 100 aplicativos e dispositivos, valide links e imagens, teste a acessibilidade e muito mais. Não cometa erros

Criar hierarquia

Uma das coisas mais úteis que você pode fazer com a tipografia é criar hierarquia, ajudando a guiar o leitor através de seu e-mail. Então, vou ficar um pouco mais de tempo aqui.

Hoje, o volume de e-mails recebidos pela maioria dos assinantes é substancial. Para passar e digerir todas as mensagens recebidas simplesmente não é possível. Portanto, os e-mails abertos costumam ser verificados conforme o leitor procura por pontos de ancoragem em seu e-mail para entender o valor.

Aprendendo os estilos, tamanhos, espessuras e cores das fontes, você pode mostrar quais partes do seu e-mail são mais importantes. Embora eu não acredite no 'rebanho', acho que é importante dar aos assinantes a oportunidade de entender o objetivo do e-mail e agir sem ter que se comprometer a ler muitos textos.

Deixe-me explicar para você com este exemplo:

Ele usa uma tipografia grande e em negrito na área do herói para chamar a atenção para um título que resume o valor ou propósito do e-mail.

Se cliques e conversões são o objetivo de sua campanha, fazer um acompanhamento com uma frase de chamariz pode ajudar o leitor a agir sem ter que consumir todo o e-mail.

Em seguida, adicione títulos menos dominantes que quebrem o texto do corpo para que esse conteúdo possa ser facilmente verificado se o leitor não puder se comprometer a ler todas as palavras.

Marcas se tornando criativas com tipografia de e-mail

Agora, alguns exemplos de marcas com grande uso de tipografia em seus designs de e-mail. O que os faz se destacar e atrair os leitores?

ÚMIDO

DAMP, um boletim informativo que destaca produtores de vinho e varejistas que se concentram na produção e venda de vinhos naturais, inclina-se fortemente para a tipografia, trabalhando com fontes serif e sans-serif para estabelecer a hierarquia de conteúdo.

Fontes usadas: Helvetica Neue com fallback Arial, e fonte do sistema serif Times New Roman.

A área do herói exibe a única imagem neste boletim informativo de formato longo, com a tipografia em negrito dando o tom para o e-mail aberto. Esta tendência de design de e-mail de tipografia ousada faz uma declaração. Não é de se admirar que tantas marcas tenham adotado esse estilo.

O que é realmente interessante sobre este e-mail é que eles alcançam esse estilo moderno e limpo usando fontes do sistema em vez de fontes da web - o que significa que as fontes serão renderizadas de forma semelhante em todos os clientes de e-mail.

Ready Mag

Ready Mag, um editor gráfico no navegador, também se inclina para as fontes do sistema, liderando com as fontes do sistema Mac, seguidas por uma série de Helveticas. Provavelmente, isso está além do que é exigido de uma pilha de fontes no e-mail.

Fontes usadas : fontes do sistema Apple, voltando para Helvetica e Arial.

O que adoro neste email é a forma como a tipografia ousada separa o conteúdo. Facilita a verificação do e-mail. E com o mínimo de texto, os leitores com pressa podem obter o valor de cada seção e agir rapidamente.

Blurb

A plataforma de autopublicação Blurb usa fontes da web para trazer sua identidade de marca para e-mails, usando pesos leves e em negrito, bem como letras maiúsculas para delinear a hierarquia e as áreas de ação.

Fontes usadas : Futura e Proxima Nova (fontes da web), recorrendo a Helvetica e Arial.

É ótimo ver os números - aqueles que compõem as etapas - estilizados usando texto ao vivo em vez de imagens. Isso cria uma experiência muito mais suave para assinantes que dependem de leitores de tela e também significa que eles serão renderizados quando as imagens não forem carregadas.

Tripadvisor

Como muitas marcas, a plataforma de viagens Tripadvisor enviou suas mensagens COVID-19 usando um modelo em estilo de carta. Esta é uma forma mais pessoal e direta de se comunicar com os clientes, oferecendo informações importantes sem a distração das imagens ou a probabilidade de ser confundido com um e-mail de marketing.

Fontes utilizadas : Arial.

A tipografia grande e em negrito destaca a mensagem abrangente do e-mail, enquanto os títulos estilizados para se destacarem contra blocos de texto quebram o conteúdo, fornecendo pontos de ancoragem para o leitor compreender o valor de uma seção.

Este e-mail altamente escaneável também tem um amplo preenchimento à esquerda e à direita do contêiner principal, o que é uma ótima técnica para evitar que grandes blocos de cópia sobrecarreguem o leitor.

Tattly

O varejista de tatuagem temporário Tattly tem uma abordagem muito criativa para design de e-mail, com e-mails promocionais frequentemente aproveitando técnicas e tendências de design empolgantes. Eles usam tipografia em negrito no herói deste e-mail para chamar a atenção para os novos produtos apresentados no e-mail.

Fontes usadas : Open Sans (fonte da web), voltando para Helvetica e Arial.

É comum em e-mails altamente projetados, como este, que a tipografia seja baseada em imagens, em vez de texto ao vivo.

Há uma série de considerações de acessibilidade que precisam ser feitas ao usar imagens para texto, como aplicar texto ALT que ecoa a cópia e levar em consideração a aparência do texto para pessoas que precisam ampliar o e-mail devido a um visual imparidade. O texto irá pixelar e se tornar ilegível? Além disso, quão legível é o texto baseado em imagem quando o e-mail é reduzido em dispositivos móveis?

Embora o texto ao vivo seja a melhor maneira de manter seus e-mails acessíveis e legíveis, há uma maneira de tornar as áreas de herói baseadas em imagens valiosas para um público mais amplo, envolvendo sua imagem de herói em uma tag H1 e adicionando o texto da imagem à sua tag ALT, assim:

<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>

Essa abordagem torna o e-mail digitalizável para assinantes que dependem de leitores de tela, pois eles podem usar a funcionalidade de atalho para navegar pelas manchetes.

“Encapsular uma imagem em uma tag H1 é um código semântico válido e será incluído nos menus de atalho dos cabeçalhos do leitor de tela. No entanto, é importante observar que o texto ALT pode não ser lido por todas as ferramentas de leitura de texto. ” - Mark Robbins, engenheiro de software, Salesforce

A tipografia de e-mail é muito forte

Com o número cada vez maior de mensagens competindo pela atenção de seus assinantes, a tarefa de se destacar e ainda fornecer uma experiência confiável - rápida - fica cada vez mais pesada. A tipografia é uma ótima maneira de tornar seus e-mails bonitos, eficazes e acessíveis sem atrasar você.

Lembre-se deste guia e compartilhe como você usa a tipografia em seus e-mails. Eu adoraria vê-los!

Crie e-mails da marca e sem erros - com Litmus Não há mais e-mails quebrados. Crie e teste seus e-mails com Litmus para garantir uma ótima experiência de assinante em cada caixa de entrada. Inicie o seu teste gratuito