Como encontrar e usar fontes suportadas por e-mail para design e legibilidade

Publicados: 2022-06-29

Você já criou um email ao acaso e escolheu a primeira fonte que viu? Clique em enviar. Chamá-lo bom para ir?

Quando se trata de design de e-mail, sua escolha de fonte pode fazer uma enorme diferença entre um assinante clicar ou seguir em frente. Eles não apenas ajudam a tornar seu e-mail mais visualmente atraente, mas também podem melhorar a legibilidade geral. A aparência, o arranjo e o estilo trabalham juntos para criar uma tipografia única, que é onde seu e-mail pode brilhar.

Embora não haja nada de errado em utilizar fontes tradicionais – como Arial ou Times New Roman – para comunicar sua mensagem, existem muitas fontes exclusivas suportadas por e-mail que levarão suas campanhas para o próximo nível.

Se você está se perguntando como encontrar e usar fontes da Web suportadas por e-mail para impulsionar sua campanha de e-mail em alta velocidade, nós o apoiamos! Vamos mergulhar em como você pode melhorar seu engajamento e legibilidade usando fontes da web corretamente.

O que são fontes da web?

Antes de começar a ser criativo, você precisa saber a diferença entre fontes da web e fontes seguras para a web.

  • Fontes seguras para a Web: essas fontes são mais prováveis ​​de serem encontradas em todos os principais sistemas operacionais e provedores de e-mail e incluem Arial, Verdana, Georgia, Times New Roman e Courier. As marcas continuam a usá-los porque são clássicos e serão renderizados corretamente em todos os aspectos.

  • Fontes da Web: projetadas e licenciadas especificamente para sites, as fontes da Web não são encontradas em todos os dispositivos e sistemas operacionais por padrão. As fontes da Web incluem Roboto e Open Sans.

Embora haja momentos em que você precise usar fontes tradicionais, as fontes da web permitem que o designer tenha mais criatividade para ajudar a transmitir a mensagem e a estética da marca sem se limitar ao texto pré-instalado.

Por que as fontes suportadas por e-mail são importantes?

Como profissional de marketing por e-mail, você sabe que é importante permanecer na marca com estilo, cores e tipografia. No entanto, você também precisa criar uma mensagem envolvente que ressoe com seus assinantes. As fontes suportadas por e-mail atuam como uma extensão de sua marca, permitindo que você utilize texto no título, corpo e sobreposição de imagem para criar sua mensagem de forma criativa e acessível.

Se sua marca é um pouco pateta, você pode crescer e utilizar um tipo divertido e elegante. No entanto, se você for mais interessante, você pode querer manter algo mais padrão. As fontes da Web oferecem essa flexibilidade e criatividade.

Onde você pode encontrar fontes da web?

Embora existam muitos provedores de fontes da Web por aí, você deseja garantir que a empresa licencie fontes da Web em e-mail (não apenas site ou uso móvel) e siga suas diretrizes de distribuição. Os fornecedores de fontes compatíveis com e-mail recomendados incluem:

  • Fontes do Google

  • Typekit da Adobe

  • MyFonts

  • Tipo Comercial

  • Fonte Primavera

  • Loja de fontes

Quais clientes de e-mail suportam fontes da web?

Quando você for além das fontes seguras para a Web, usará fontes que são baixadas à medida que as mensagens são abertas. É importante observar que nem todos os dispositivos suportarão fontes específicas, então você configurará Cascading Style Sheets para criar “pilhas de fontes”. Essas pilhas de fontes são usadas como backups caso a fonte selecionada não se integre.

Depois de escolher suas fontes da Web, é importante considerar como o provedor de serviços de e-mail real será exibido. Normalmente, esses clientes de e-mail oferecem suporte a fontes da Web:

  • Correio iOS

  • Apple Mail

  • Android (cliente de email padrão)

  • Outlook 2000

  • Outlook.com

  • Thunderbird

Se um provedor de e-mail não exibe fontes da web – nem tudo está perdido – é por isso que você configura essas pilhas de fontes úteis como backup. As pilhas de fontes garantirão que seu e-mail ainda tenha uma estética semelhante à que você pretendia originalmente. Além disso, cada cliente de e-mail tem uma fonte padrão que os assinantes verão em vez de sua fonte da web. Os padrões incluem:

  • Gmail: Arial

  • Apple Mail: Helvética

  • Microsoft Outlook: Calibri

Como escolher as fontes web certas para sua campanha de e-mail

Agora que você entende o básico sobre fontes da Web, é hora de descobrir as melhores maneiras de escolher a tipografia certa para suas campanhas de e-mail. As fontes suportadas por e-mail são cruciais para entregar sua mensagem e ter a possibilidade de aumentar as taxas de cliques e as taxas de conversão.

Pense desta forma – os humanos são visuais. Quantas vezes você pegou um produto no supermercado simplesmente por causa de sua embalagem colorida e divertida? O mesmo vale para e-mails. É mais provável que seus assinantes abram, cliquem e comprem em seus e-mails se não apenas o conteúdo for atraente para eles, mas também for entregue em um design visualmente atraente.

Com centenas de fontes da Web diferentes para escolher, aqui estão três maneiras de restringir suas seleções para escolher a melhor fonte compatível com e-mail para suas campanhas.

1. Selecione a fonte do corpo correta.

A fonte do corpo deve ser distinguível e acessível para pessoas com deficiência visual. Se você tiver mais conteúdo no corpo, é recomendável usar uma fonte serif — como Georgia e Verdana — que tenha texto com blocos mais longos.

Enquanto Arial e Helvetica já foram as escolhas populares, letras como p, b, q e d parecem muito uniformes e são mais difíceis de distinguir. Com uma fonte com serifa, são adicionados traços extras para dar mais caráter às letras. Como os e-mails precisam ser escaneáveis, letras largas e com espaçamento consistente ajudam os assinantes a lerem rapidamente.

fontes de e-mail com serifa e sem serifa

Fonte: W3Schools

Veja este exemplo CAVA Dips, que utiliza uma fonte de corpo com serifa fácil de ler, combinada com um título mais estilizado e uma frase de chamariz.

Veja este exemplo CAVA Dips, que utiliza uma fonte de corpo com serifa fácil de ler, combinada com um título mais estilizado e uma frase de chamariz.

Fonte: E-mails realmente bons

Embora a serifa seja ideal para e-mails mais longos, a utilização de uma fonte sem serifa ainda é legível e aceitável. Com apenas uma linha de corpo de texto, Cater 2 Me acertou em seu design de fonte da web. Ele dá um soco e vai direto ao ponto sem ser uma distração.

Embora a serifa seja ideal para e-mails mais longos, a utilização de uma fonte sem serifa ainda é legível e aceitável. Com apenas uma linha de corpo de texto, Cater 2 Me acertou em seu design de fonte da web.

Fonte: E-mails realmente bons

2. Use um cabeçalho estilizado com uma fonte de corpo emparelhada.

Embora isso possa parecer mais “simples”, usar a mesma fonte para seu cabeçalho e corpo ajudará a estabelecer uma melhor identidade de marca e garantir que toda a mensagem apareça no cliente de e-mail. Ao desenvolver seu e-mail, certifique-se de que o cabeçalho e o corpo sejam de tamanhos diferentes e tenham preenchimento e estilo variados para diferenciar melhor os dois. Também é importante observar que quanto mais fontes da web você tiver, mais tempo seu e-mail levará para carregar, o que é outra vantagem de usar apenas uma fonte.

Tome este exemplo de Lululemon. A empresa utiliza títulos que são 2x o corpo do texto com preenchimento suficiente entre os dois. Os assinantes podem diferenciar facilmente entre os dois elementos enquanto criam um design limpo e clássico.

A empresa utiliza títulos que são 2x o corpo do texto com preenchimento suficiente entre os dois.

Fonte: E-mails realmente bons

No entanto, se você quiser ser mais criativo, combinar fontes diferentes que se complementam pode ajudar a se destacar na caixa de entrada e manter os assinantes engajados. É recomendável usar apenas duas fontes da Web por e-mail, mas pode ser complicado porque você não deseja que as fontes sejam ilegíveis e inacessíveis. Se você está procurando uma maneira de descobrir fontes comparáveis, pode utilizar o Font Pair para ajudar a encontrar as combinações de fontes mais impactantes para o design do seu e-mail.

Tattly faz um ótimo trabalho ao combinar duas fontes diferentes, mantendo-se no ponto com os padrões de sua marca. O título imediatamente chama sua atenção e atrai seus olhos para o corpo para ver o que a venda implica. Devido às imagens, você pode dizer que essa marca é mais alegre - então as várias fontes funcionam.

Tattly faz um ótimo trabalho ao combinar duas fontes diferentes, mantendo-se no ponto com os padrões de sua marca.

Fonte: E-mails realmente bons

3. Crie uma estrutura de fonte consistente.

Depois de selecionar suas fontes da web, você tem muitos outros elementos a serem considerados, como tamanho da fonte, espaçamento, links e botões, cores e muito mais. Esses recursos ajudarão a manter seus e-mails consistentes, independentemente do estágio da jornada do cliente em que seus assinantes estejam.

  • Fonte: para o corpo do texto, sua fonte deve ser dimensionada em 14px para desktop e 16px para dispositivos móveis. Ao usar um design responsivo, verifique se as fontes compatíveis com e-mail flutuarão automaticamente entre os tamanhos de tela.

  • Espaçamento: Especialmente entre o título e o corpo do texto, certifique-se de ter uma altura de linha ampla entre 22px e 24px. Espaços muito estreitos podem diminuir a legibilidade e o engajamento.

  • Links e botões: Ao criar links e botões, não use uma fonte separada para sublinhar sua frase de foco e verifique se ela inclui o link âncora. Os botões são uma ótima maneira estilizada de chamar a atenção para sua frase de chamariz.

  • Cores: use apenas três cores que se identifiquem com os padrões da sua marca: uma cor para o cabeçalho, uma para o corpo e a última para os links.

Embrulhar

Se você está pensando em usar fontes da web em suas campanhas de e-mail, nós recomendamos! As fontes da Web são uma ótima maneira de cativar seu público e ajudar a transformar seus clientes em potencial em clientes com um design de e-mail impactante. Ao escolher suas fontes compatíveis com e-mail, certifique-se de:

  • Crie pilhas de fontes de backup

  • Utilize um estilo de fonte com serifa

  • Emparelhar o texto do cabeçalho com o texto do corpo

  • Desenvolva uma estrutura de fontes consistente para todas as campanhas futuras

Você está pronto para começar a criar suas próprias campanhas de e-mail com fontes da web? Emma oferece um editor de arrastar e soltar e a capacidade de codificar e-mails completamente do zero. Experimente uma demonstração hoje para saber mais!