Design Modelos
~ 18 minutos de leitura
16 comentários
290197 visualizações
28 abril

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

Stripo / Blog / 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:

Design sofisticado e-mails totalmente responsivos.

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:

Email Fonts_Reading Texts

Devo escolher uma fonte Serif ou Sans Serif?

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

Email Fonts_Sans Serif vs Serif

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:

Best Practices for Email Fonts

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.

Use fontes personalizadas em e-mails para permanecer totalmente na marca.

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.  

Email Font Size

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:

Image with Poor Spaces

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:

Another Example of Email with Poor Fonts and Spaces

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:

Highlighted Links

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:

Email Example with Cool Button Fonts

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

Example with Too Many Buttons in Email

Faça seus botões de CTA perceptíveis e clicáveis em qualquer lugar.

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:

Email Example with Legible Font

Mais um banner que usa fontes decorativas:

Email Example with Decorative Font

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:

Comparison of Fonts

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.

Paulo Marreiros há 2 meses

Excelente o artigo dessa página. De muito gosto! Todos as minhas dúvidas e ac e acredito que também de outras pessoas, foram esclarecidas. PauloMar/São Paulo, Brazil.

Hanna Kuznietsova comentou com Paulo Marreiros há 2 meses

Paulo, Obrigado por uma revisão tão agradável. Estamos muito felizes que o artigo tenha sido útil. Desejamos sinceramente o melhor em suas campanhas

pirates há 3 meses

nice blog theme you use in your blog can you share which theme you are using

Hanna Kuznietsova comentou com pirates há 3 meses

Hello, Pirates. Thank you for your question. If you are talking about the font we are using, it is Montserrat, 16px. If it's not what you asked us about, then could you clarify please what theme exactly you mean? Thank you

Igor Greshner há 5 meses

Parabéns pela excelente pesquisa! Esclareceu bastante minhas dúvidas, sou a favor da Verdana e Tahoma a anos, por ser um formato mais agradável para ler.

Hanna Kuznietsova comentou com Igor Greshner há 5 meses

Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing

Khairom Munawwar Baharom há 11 meses

Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)

Hanna Kuznietsova comentou com Khairom Munawwar Baharom há 11 meses

Khairom, Thank you for your question. Unfortunately, it is not a websafe font. I just uploaded Montserrat to my account, sent an email to some email addresses. Only Apple Mail and Apple iPhone Mail (Native Mail on iOS) did not replace Montserrat with a default font. Others did replace it with the default fonts. Tests with Email on Acid just confirmed that Montserrat gets to be replaced by Gmail and Outlook.

Martin Schenk há 11 meses

Für deutsche Texte ist Verdana und Tahoma nicht empfehlenswert, da die abschließenden Anführungszeichen "verkehrt" dargestellt werden.

Hanna Kuznietsova comentou com Martin Schenk há 11 meses

Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück

rohit dubey há 1 ano

Thanks for sharing this amazing content. This is really helpful for us.

Hanna Kuznietsova comentou com rohit dubey há 1 ano

Rohit Dubey, We're glad to hear you find this helpful. You might be interested to know that you can upload custom fonts to your projects with Stripo. https://stripo.email/blog/add-use-custom-fonts-stripo/ Have a great day!

Marcia Bosscher há 1 ano

What font are you using for this post? I like it!

Hanna Kuznietsova comentou com Marcia Bosscher há 1 ano

Marcia, Thank you. We are flattered to know. It's Montserrat, 16px. For your convenience, to detect fonts on other websites, you can use this tool http://whatfontapp.com/ Have a good day

Myron Gould há 1 ano

I found this article to be a very helpful refresher. Thank you!

Hanna Kuznietsova comentou com Myron Gould há 1 ano

Myron, We're glad you liked it. You may be also interested in reading Paul Airy's post to find out which of the web-safe fonts is best for email accessibility. http://createsend.com/t/d-ABFFF5F25EC93A19 Also, we're glad to say that you can upload custom fonts with Stripo. If you have any questions about custom, web-safe and accessible fonts, or if you have any questions regarding our tool, please feel free to contact us at any time. Thank you for your interest in our blog!

Você talvez se interesse por

← anterior próximo →
9 dias atrás · 18 minutos de leitura
15 melhores exemplos de newsletter para inspirá-lo em 2019

Em nosso post anterior, mostramos como fazer sua primeira campanha de e-mail bem sucedida e como melhorar as campanhas atuais em 10 etapas simples. Hoje, mostraremos os melhores exemplos de newsletters por e-mail (em nossa opinião) para sua inspiração. 1. Adidas Linha de assunto: Não apenas fale sobre salvar os oceanos. Corra para os oceanos Como Elvis Presley cantou "Um pouco menos de conversa, um pouco mais de ação, por favor". Ele estava muito certo. Muitas pessoas apenas falam, mas...

Design Marketing Modelos
09 outubro · 16 minutos de leitura
16 Práticas recomendadas de design de cabeçalhos de e-mail

O cabeçalho do e-mail é um dos elementos que você usa regularmente em seus newsletters por e-mail. Mas muitas vezes esquecemos que criar um cabeçalho é mais complexo do que apenas um logotipo e um menu. O cabeçalho completo do boletim informativo consiste de três partes essenciais: informações sobre o remetente; a linha de assunto e o pré-cabeçalho; o próprio cabeçalho do e-mail. Nesta postagem, mostraremos como definir a linha de assunto e o pré-cabeçalho. E compartilharemos 16 ideias de cabeçalhos...

Design Modelos Como fazer
Esteja sempre a par das notícias, guias, artigos e manuais de marketing de e-mail