Melhores fontes para e-mail: Dicas e truques de uso

Uma das maiores preocupações no processo de criação de e-mails é escolher a fonte. Tamanho, altura, largura, cor, forma, espaçamento ... Tudo isso realmente importa? Sim, é importante, mas a coisa mais importante é escolher uma fonte fácil de ler; todas as outras características da fonte são menos importantes.

Assista ao nosso breve vídeo sobre fontes, seus tipos, fontes seguras para a Web e como aplicar fontes festivas com o Stripo. E o que é mais importante - como escolher a fonte certa para seus templates de e-mail:

Fontes seguras da Web

Aqui está a lista das 10 principais fontes seguras da Web que você pode usar com 100% de garantia de que serão visualizadas por qualquer um da forma como você projetou:

1. Arial

Projetado em 1982, é fornecido com todas as versões dos aplicativos Microsoft, a partir do Windows 3 e Apple Mac OS X. Exibido por todos os clientes de e-mail. Devido a cortes diagonais terminais, ela parece menos mecânica em comparação com outras fontes da família sans-serif.

2. Helvetica

Um tipo de letra sans-serif, uma das fontes mais utilizadas, tem letras arredondadas e amplas letras maiúsculas. Projetada em 1957

3. Times New Roman

Tem letras minúsculas altas, ligeiramente condensadas, descendentes e ascendentes curtos. Encomendada pelo "The Times" em 1931.

4. Verdana

Foi projetada para ser legível em telas de baixa resolução, sua principal característica é caracteres altos e amplos.

5. Courier / Courier New

Foi projetada em 1955, semelhante à Times New Roman, mas ajustada para ser uma fonte monoespaçada. Courier New tem pontos e vírgulas mais pesados que a Courier original. Courier é a fonte padrão usada para roteirização na indústria cinematográfica.

6. Tahoma

Semelhante à Verdana, mas tem letras mais estreitas, pequenos contadores e espaçamento entre letras. Usada como a fonte de tela padrão para as versões do Windows 95, 2000 e XP.

7. Geórgia

Tem letras minúsculas altas, os traços são mais grossos do que a média, seus numerais combinam perfeitamente com o texto devido ao tamanho similar.

8. Palatino

Foi originalmente concebido para títulos, anúncios e impressão. É mais larga do que outras fontes serif antigas.

9. Trebuchet MS

Tem pontas encurtadas para algumas letras; em negrito suas letras são mais pontudas do que arredondadas e arredondadas em minúsculas. Lançada em 1996.

10. Geneva

Uma versão redesenhada da Helvetica, sua principal distinção é que tem um conjunto básico de ligaduras.

Outra opção é incluir uma fonte da Web, mas há muitos riscos de que ela não seja mostrada corretamente por não ser suportada pelo cliente de e-mail. No último caso, a fonte será revertida para uma fonte padrão.  

Aqui está a lista de fontes padrão para os clientes de e-mail mais populares:

• iCloud Mail usa Helvetica como fonte padrão;
• Gmail adota Arial;
• Microsoft Outlook das versões mais antigas geralmente usa Calibri;
• Outlook 2007/2010/2013 tem Times New Roman como fonte “padrão”.

Como escolher a fonte correta para seu e-mail?

Se você confiar apenas em sua opinião pessoal, existe o risco de que outras pessoas não compartilhem da sua opinião sobre a melhor fonte de todos os tempos e sua mensagem parecerá antiquada ou será tão difícil de usar quanto alguém no transporte público no início da manhã.

Se você usa muitas fontes, no mínimo será uma situação complicada de gerenciar. Escolha apenas uma ou duas fontes para um e-mail. Em um caso perfeito, basta usar apenas uma fonte, mas usar tamanhos diferentes: um para destacar o cabeçalho e outro para o conteúdo restante.

Na verdade, existem apenas duas opções para escolher uma fonte. Você pode escolher uma fonte segura para a Web e ter certeza de que ela será a mesma para todos os usuários ou adicionar uma fonte da Web e contar com o uso de todos os clientes de e-mail que a suportam, o que é quase impossível, porque Gmail, Yahoo Mail e Outlook 2007 / 13/10/16 não suportam fontes da web e poucos usuários de iPhone e iPad poderão vê-las. Por isso, não recomendamos o uso de fontes da Web para não prejudicar a experiência do usuário.

A principal característica da fonte do seu conteúdo, como foi mencionado acima, é a facilidade de ler. O que mais poderíamos falar? Mais uma característica importante é a legibilidade. Elas são características diferentes. Em uma fonte, alguns caracteres podem ser legíveis e outros não. Claro, o texto legível é melhor e mais rápido de ler, então preste atenção se todos os caracteres estiverem visíveis, claros e distintos.

Um experimento sobre legibilidade de fontes foi feito por Norbert Schwarz e Hyunjin Song em 2010. Os resultados foram impressionantes. Você gasta quase duas vezes mais tempo para ler uma fonte decorativa do que uma fonte padrão e fácil de ler:

Devo escolher uma fonte Serif ou Sans Serif?

Mais um ponto é escolher entre fontes serif e sans-serif. Qual a diferença entre elas?

Fontes Serif podem ser definidas como fontes que possuem uma pequena linha no final de cada caractere. As fontes Serif mais populares são Times New Roman e Georgia.

Fontes Sans serif são aquelas que não possuem uma linha decorativa no final de cada símbolo. As fontes seguras sans-serif mais populares são Arial, Trebuchet MS e Helvetica.

Em minha pesquisa, encontrei vários artigos que alegavam que as fontes serif são mais adequadas para e-mails, mas eu acho que isso não é verdade. Com base na suposição de que os e-mails estão sendo observados apenas on-line usando a tela da área de trabalho ou do celular, as melhores são as fontes sans serif. É mais fácil ler caracteres sem serifa na tela.

Mais um fato interessante é que o artigo no blog de design de e-mail Beefree, que recomenda o uso de fontes com serifa para e-mails com conteúdo pesado, usa sans-serif como fonte do blog:

Então, por que eles não usaram uma fonte Serif para os artigos do blog, se elas são as melhores? Eu acho que é uma prova de que uma fonte sans serif é melhor, porque a mesma regra funciona tanto para páginas da web quanto para e-mails. Use uma fonte com serifa somente para cabeçalhos e subtítulos, se necessário.

Tamanho da fonte

Se você está mudando a fonte, certifique-se de que aquela que você escolheu não pareça menor do que a anterior. Muitas vezes, fontes diferentes têm alturas diferentes, então o mesmo tamanho nominal de 14px terá tamanhos físicos diferentes devido à família de fontes escolhida.

O melhor tamanho para e-mail é 14px ou mais para usuários de desktop e 16px para quem usa dispositivos móveis. Se você usar um template responsivo, verifique se o tamanho dos caracteres será aumentado automaticamente para a versão de e-mail para celular.  

Construí um template de e-mail com Stripo que permite comparar diferentes dimensões das mesmas fontes. Aqui estão os resultados:

Como resultado, as fontes 16px parecem incríveis. Eu prefiro usá-la para desktops e dispositivos móveis.

Espaçamento

É crucial criar espaços entre parágrafos, bem como entre linhas de texto. Certifique-se de que a sua fonte tenha espaços suficientes entre as linhas. A altura da linha mais utilizada varia de 22 a 24 px. Em outras palavras, o tom de linha perfeito para e-mails geralmente é 1,5em, ou seja, 24 pixels.

Mais uma coisa é prestar atenção aos espaços entre os caracteres. Não há opinião decisiva que seja melhor usar: a fonte de espaço estreito ou a larga.

Georgia e Times New Roman fornecem espaços muito estreitos entre os caracteres, o que influencia muito a legibilidade. Na minha opinião, fontes que têm boa distância entre os caracteres são Courier ou Courier New. Talvez esse seja um dos motivos para que elas sejam algumas das mais populares em 2017. 

Use espaços entre os elementos do e-mail. Se houver uma imagem em um e-mail, verifique se há espaços antes e depois da imagem, o que facilita muito a leitura. Naturalmente, é melhor alinhar os elementos gráficos como imagens.

Aqui está um exemplo onde os espaços foram desconsiderados:

Você poderia imaginar que esse é um só parágrafo do e-mail que contém mais de 1500 palavras? É óbvio que é melhor falar menos ao invés de falar mais. 

Aqui está mais um:

Este é ainda pior porque a fonte é cinza, o que leva a uma má visibilidade, a fonte é muito pequena e, claro, não preciso nem comentar sobre espaços.  Sim, eles existem, mas isso não ajuda. As frases são muito longas.

Links e botões

Não use uma fonte separada para destacar os links. Nunca coloque links sem texto âncora. O texto em âncora deve explicar onde esse link leva e é organicamente uma parte do texto. Não use as palavras "aqui" ou "link" como um texto âncora. Elas são muito curtas e genéricas e não atraem interesse.

Botões funcionam como os links, mas eles têm uma forma mais interativa para os usuários. É melhor usar ambos em seu e-mail. Se você der um link para um artigo externo, crie um link de texto, se você der um link para experimentar o produto que você tem, use botões.

Uma das melhores práticas é tornar os links da mesma cor de um logotipo. Fica uma aparência ótima, confira:

(Fonte: Email da Designmodo)

Não há regra exata sobre a cor dos botões que devem ser usados, mas é melhor confiar na psicologia das cores e tentar não estragar o conceito de design com uma reprodução de cores muito gritantes.

Existem duas fontes que melhor se adequam aos botões: Georgia e Verdana. É legal usar a fonte Georgia para títulos e subtítulos também. Elas ficam ótimas! Na verdade, a única coisa que você deve verificar antes de enviar um e-mail é como a cor do texto corresponde ao plano de fundo do botão e certificar-se de que ele esteja visível o suficiente para a leitura. Verifique também se o texto está localizado corretamente no botão, ele não deve cruzar as bordas do botão. 

Aqui está um exemplo de um botão legal:

(Fonte: modelo de email Stripo)

Aqui está um exemplo onde os botões e links são usados em excesso:

Texto em banners

Aqui está a chance de usar fontes proprietárias, web, script, manuscritas ou decorativas que você não deveria usar como fonte do texto principal. Caso o texto em um banner faça parte de uma foto, você poderá fazer qualquer coisa. 

A principal coisa que você deve se preocupar ao criar um banner de e-mail é destacar a identidade da marca. Você pode usar qualquer fonte, mas é melhor escolher uma fácil de ler. Não escreva muito texto em um banner. Deve haver apenas palavras de boas-vindas que despertem o interesse e motive os usuários a continuar lendo.

Aqui estão dois exemplos interessantes. O primeiro é com fontes claras e simples:

(Exemplo de e-mail com uma fonte legível)

Mais um banner que usa fontes decorativas:

(Exemplo de e-mail com uma fonte decorativa)

Você deve decidir qual deles adotar com base na sua inspiração e design de e-mail.

Cores

A única regra que você deve seguir é usar cores apenas para mostrar a identidade da marca. Se você tiver uma ideia para fazer um texto colorido, deixe de lado esse ponto de vista, pois isso tornará o texto difícil de ler. 

Normalmente, existem apenas 3 cores podem ser usadas no e-mail. Uma para marcar o cabeçalho, outra para o corpo do texto e a cor azul para tornar os links visíveis. E é só isso. Você pode até reduzir para duas cores ao mesmo tempo em que torna o cabeçalho da mesma cor, mas enfatiza-o com tamanho ou fonte diferente.

Se você quiser sublinhar uma frase, basta usar uma fonte em negrito; usar uma cor diferente é ambíguo. Comumente para conteúdo de e-mail, os designers usam cores cinza escuras ou pretas. É melhor para a legibilidade. A única exceção é quando você tem um fundo preto. Nesse caso, use uma fonte branca. Não use uma fonte cinza claro porque é difícil ler em diferentes configurações de contraste.

Tags HTML para formatação de texto

Normalmente, as fontes seguras para a Web são declaradas em um layout CSS, portanto não será apenas HTML simples, mas existem várias tags HTML para formatação de texto; é possível que você já conheça essas definições, mas aqui estão elas:

• Para usar uma fonte em negrito:

<strong> </strong> or <b> </b>

• Para fazer a lista com pontos no e-mail, use esta estrutura:

<ul>
 <li>primeira opção da lista</li>
<li>segunda opção da lista</li>
<li>terceira opção da lista</li>
</ul>

• Para usar cursiva para enfatizar o texto:

<i> </i> ou <em> <em>

• Para adicionar um pequeno texto da mesma fonte que você usa:

<small> </small>

• Para realçar o texto com preenchimento amarelo (por padrão):

<mark> </mark>

• Para marcar um texto que foi excluído, mas não substituído:

<del> </del>

• E este permite que você defina um parágrafo:

<p> </p>

Práticas recomendadas para implementação de fontes seguras da Web 

Devido a muitas experiências feitas pela Equipe de marketing do eSputnik, as melhores fontes para e-mails são Arial e Tahoma. Arial é a fonte mais atraente entre aqueles que criam campanhas de marketing por e-mail. Tahoma tem uma ótima aparência em e-mail carregados com conteúdo e pequenos textos.

Eu criei um template de e-mail com o editor Stripo com o mesmo texto e o mesmo tamanho 18px para cada fonte. Não há Palatino e Geneva no editor de e-mail do Stripo, mas há fontes personalizadas como o Roboto e o Open Sans que não são fontes padrão mas funcionam em vários sistemas operacionais. No entanto, é melhor definir uma fonte padrão caso você as use.

Então, aqui estão os resultados, basta comparar essas fontes e escolher a que melhor atende a todas as suas necessidades:

Não perca seu tempo procurando a melhor fonte para o Gmail, a melhor fonte para o Outlook ou para qualquer outro cliente de e-mail. Os clientes de e-mail substituem as fontes desconhecidas pelas fontes padrão. E, como dissemos acima, Gmail usa Arial, o Outlook usa Time New Roman e o Mac OS X usa Helvetica.

Conclusão

Considerando todos os itens acima, podemos dizer que não há consenso de tipo e tamanho de fonte que será legível e terá boa aparência em todos os tipos de dispositivos. Você sempre tem que escolher:

• Georgia e Times New Roman são estreitas;
• Courier New é larga, mas talvez larga demais para e-mails;
• Arial é mais leve que Helvetica;
• É impossível distinguir as fontes Verdana e Tahoma.

Na minha opinião, essas duas últimas são as melhores fontes de e-mail para newsletters, mas parecem ruins quando impressas. Pessoalmente, prefiro escolher as duas últimas fontes para meus templates de e-mail. Qual você prefere? Não hesite em deixar comentários no Facebook e compartilhe este artigo se você gostar.