Melhores fontes para E-mail: Dicas e Truques de Uso
Uma das preocupações mais marcantes no processo de produção de e-mail é a escolha da fonte correta. Peso, altura, largura, cor, forma, espaçamento... Tudo isso importa? Sim, é verdade, mas também uma das coisas mais importantes é escolher a fonte que seja legível.
Neste post, iremos lhe mostrar como escolher a melhor fonte profissional para e-mail.

Fontes de e-mail HTML: Regras gerais a serem seguidas
Existem três regras básicas a serem observadas ao escolher a melhor fonte para e-mail:
1. Nunca use mais de 2 fontes em e-mails
Se você usar muitas fontes, seu e-mail irá aparentar muito complicado na melhor das hipóteses e irritante na pior. Escolha apenas uma ou duas fontes para um e-mail. Em um caso perfeito, isso será suficiente usar apenas uma fonte, mas em tamanhos diferentes: uma para destacar o título e outra para o restante do seu conteúdo.
2. Evite usar mais de 2 estilos de fonte em e-mails
Não misture estilos de fonte regulares, negrito e itálico em e-mails. Se você usar mais de dois estilos, os e-mails ficarão um pouco bagunçados. Normalmente, um estilo de fonte é o suficiente. Se você quiser destacar coisas, você pode aplicar o estilo de fonte em negrito.
Entretanto, nunca sublinhe o seu texto e nunca aplique o tipo de letra em itálico por razões de acessibilidade ao e-mail.
3. Preste muita atenção à legibilidade da fonte escolhida
A principal característica da fonte do seu conteúdo é a legibilidade. Legibilidade é a capacidade de distinguir uma letra da outra. Obviamente, o texto legível é melhor e mais rápido de ler, portanto verifique se todos os caracteres estão visíveis, claros e distintos o suficiente.
Qual é a fonte mais legível? O experimento sobre a legibilidade da fonte foi conduzido por Norbert Schwarz e Hyunjin Song em 2010. Os resultados foram impressionantes. Você gasta quase o dobro de tempo lendo o estilo de fonte itálico e fontes decorativas em comparação com as fontes normais:
Por falar em legibilidade... Existem dois tipos principais de fontes: Serif e Sans Serif. Vamos ver qual a fonte correta para boletins informativos por e-mail.
Qual escolher: uma fonte Serif ou Sans Serif?
As fontes também afetam a legibilidade do envio de fontes por e-mail. 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 serifadas 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 sem serifa mais populares são Arial, Trebuchet MS e Helvetica.
Durante a investigação, eu encontrei diversas fontes de pesquisa que afirmam que as fontes serif são mais adequadas para e-mails, mas eu discordo totalmente. Partindo do pressuposto de que os e-mails estão sendo observados apenas on-line, utilizando as telas do desktop ou do celular, as melhores são as fontes sem serifa. É mais fácil ler caracteres sem serifa na tela.
Fontes seguras para e-mail
Aqui está a lista das 10 principais fontes que você pode usar com 100% de garantia de que serão renderizadas nas caixas de entrada dos usuários exatamente da forma como você planejou:
1. Arial
Projetada em 1982, é fornecida com todas as versões da Microsoft, a partir do Windows 3 e Apple Mac OS X. Exibida para todos os clientes de e-mail. Devido aos cortes diagonais terminais, parece menos mecânica quando comparada com outras fontes da família sans-serif.
2. Helvetica
Uma fonte sem serifa, uma das fontes mais utilizadas de um tipo, possui letras arredondadas e maiúsculas largas. Projetada em 1957.
3. Times New Roman
Possui letras minúsculas altas, ligeiramente condensadas, descendentes curtos e ascendentes. Encomendada pelo “The Times” em 1931.
4. Verdana
Ela foi projetada para ser legível em telas de baixa resolução, sua principal característica são caracteres minúsculos altos e largos.
5. Courier / Courier New
Ela foi projetada em 1955, semelhante à Times New Roman, mas ajustada para ser uma fonte monoespaçada. A Courier New tem pontos e vírgulas mais pesados do que a Courier original. Courier é a fonte padrão usada para roteiros na indústria cinematográfica.
6. Tahoma
É semelhante à Verdana, mas ainda assim tem letras mais estreitas, contadores pequenos e espaçamento entre letras apertado. Usada como fonte de tela padrão para versões do Windows 95, 2000 e XP.
7. Georgia
Possui letras minúsculas altas, os strokers são mais grossos do que os regulares, seus numerais combinam perfeitamente com o texto devido ao seu tamanho semelhante.
8. Palatino
Ela originalmente foi projetada para títulos, anúncios e impressão. Mais larga do que outras fontes serif de estilo antigo.
9. Trebuchet MS
Possui caudas encurtadas para algumas letras; em negrito, as letras são pontudas em vez de arredondadas e os pontos são arredondados em minúsculas. Lançada em 1996.
10. Geneva
Uma versão redesenhada da Helvetica, sua principal distinção é que possui um conjunto básico de ligaduras.
Essas fontes são consideradas as fontes de e-mail mais legíveis.
Fontes personalizadas em e-mails
Existem casos em que você deseja, ou precisa, usar uma fonte personalizada para seus e-mails, seja para manter a consistência da marca ou para fazer seus e-mails parecerem mais festivos para uma ocasião especial.
Queremos lembrá-lo de que você pode realizar o upload de fontes personalizadas para sua conta Stripo e usá-las em suas campanhas de e-mail.

Nós recomendamos fortemente que você visualize esses e-mails em vários ambientes. Você pode fazer isso com nossa ferramenta de teste incorporada ferramenta de teste incorporada.
Importante observar:
Se o cliente de e-mail não suportar uma determinada fonte, esta será substituída por uma 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 possui a Times New Roman como fonte substituta.
Tamanho da fonte do e-mail
Não existe o melhor tamanho de fonte para e-mail, pois muitas vezes diferentes fontes possuem diferentes alturas de símbolo. Como resultado, a mesma fonte, digamos, 16px será diferente devido à família de fontes escolhida.
Eu fiz um template de e-mail com a Stripo que permite comparar diferentes fontes do mesmo tamanho. Por favor, veja os resultados:
Você escolhe a que mais gosta e a usa em todos os e-mails para que seus boletins de informação sejam sempre legíveis e consistentes com a marca.
Nós recomendamos que você defina fontes e tamanhos de fonte apenas quando começar a projetar seu modelo de e-mail — as configurações serão aplicadas a todo o e-mail. Isso irá lhe economizar muito tempo, uma vez que irá evitar a necessidade de definir fontes para todas as partes de seus e-mails.
Você sabia que a Stripo permite definir diferentes tamanhos de fonte para dispositivos móveis e desktop? Por exemplo, você usa 14px para e-mails abertos em desktops e 16 pixels para e-mails abertos em dispositivos móveis.
Configurando o tamanho da fonte para desktops
-
entre na guia Aparência;
-
vá para a seção Configurações Gerais;
-
escolha uma fonte necessária no menu suspenso. As fontes personalizadas, que você adicionou anteriormente ao seu perfil Stripo, também aparecerão nesta lista;
-
defina o espaçamento entre linhas;
-
na seção Stripes, você define um tamanho de fonte diferente para cada parte do seu e-mail (exceto banners) e a cor da fonte;
-
na seção Títulos, você precisa escolher uma fonte mais uma vez — pode ser uma nova. Aqui você também define o tamanho da fonte para os Títulos 1, 2 e 3;
-
na seção Botão, por favor defina a cor da fonte do botão e seu tamanho.
Configurando o tamanho da fonte para celulares
-
entre na guia Aparência;
-
vá para a seção Formatação para Celulares;
-
defina o tamanho da fonte para títulos, rodapés, áreas de conteúdo, guias de menu e botões.
Espaçamento entre linhas para e-mails
O espaçamento entre linhas é a distância vertical entre as linhas. É medido como a porcentagem do tamanho da fonte.
Você consegue definir o espaçamento desejado para seus e-mails somente nas guias e seções onde acabou de definir os seus tamanhos de fonte.
Algumas fontes afirmam que 150% é o melhor tamanho de espaçamento de linha.
Entretanto, de acordo com as Diretrizes de acessibilidade de e-mail, isso varia entre 150% e 200%.
(cópia de e-mail com espaçamento único entre linhas)
(cópia de e-mail com espaçamento de 1,6 entre linhas)
Links em e-mails
Não utilize uma fonte diferente para chamar a atenção dos leitores para os links. Nunca coloque links sem texto. O texto deve explicar aonde esse link leva e ser uma parte orgânica do texto. Não use as palavras "aqui" ou "link" como texto. Elas são muita curtas e gerais para serem clicáveis.
Uma das melhores práticas aqui é criar links da mesma cor de um logotipo. Parece ótimo, dê uma olhada:
(Fonte: E-mail da Epilepsy Foundation)
Você também pode sublinhar os links dos seus e-mails caso ache necessário ou se corresponder ao design do seu e-mail.
Entretanto, nós recomendamos fortemente que você nunca sublinhe links por uma questão de acessibilidade de acessibilidade de e-mail — isso distrai os disléxicos.
Fontes para botões em e-mails
Os botões são os mesmos links, mas eles possuem uma forma mais interativa para os usuários. É melhor utilizar ambos no seu e-mail. Se você fornecer um link que levará os leitores a uma postagem do blog, poderá torná-lo um link de texto, mas se fornecer um link para experimentar o produto que possui, apenas use os botões.
Não há uma regra certa sobre a cor dos botões que deve ser usada, mas é melhor confiar na psicologia das cores e tentar não arruinar o conceito de design com a reprodução de cores muito abertas.
O mesmo se aplica às fontes dos botões: Não há regras específicas. Você só precisa garantir que os textos dos botões sejam legíveis o suficiente.
A cor do texto deve corresponder à cor do botão e garantir que seja visível o suficiente para leitura. Verifique também se o texto está posicionado corretamente dentro do botão, ele não deve ultrapassar as bordas do botão.
Aqui está um exemplo em que o botão parece legal:
(Fonte: Modelo de e-mail da Stripo)
Importante observar:
Você pode adicionar espaçamento branco nos botões com a Stripo para que haja algum espaço entre o texto e as bordas do botão. Isso faz com que eles sejam mais legíveis.
Então como você faz isso? Trabalhe no "preenchimento interno" na guia Botão.
Você também pode definir um tamanho de fonte diferente para os botões de e-mail para a visualização em celulares.
Para fazer isso, você precisa:
-
ir para a guia Aparência;
-
ir para a guia Formatação para Celular;
-
definir tamanho do texto do botão — para tornar o texto do botão legível em dispositivos móveis 16px ou superior é o melhor tamanho aqui;
-
alternar o botão “Botões de largura total” para aumentar a largura dos botões em dispositivos móveis. As chances de os clientes notarem os botões de largura total são muito altas.
Texto por cima de banners
Aqui está a chance de usar fontes festivas ou decorativas que você não deveria usar como fonte principal do texto. Visto que o texto sobre um banner é parte de uma imagem, ele permanecerá o mesmo em todos os clientes de e-mail. E espera-se que seja festivo o suficiente. Sendo assim, você pode escolher qualquer um.
Esteja ciente que é melhor escolher uma fonte legível, e que você não precisa escrever muito texto em um banner. Mantenha-o curto.
Qual usar depende de sua inspiração e design de e-mail.
Usando fontes decorativas em banners de e-mail com a Stripo
-
quando sua imagem de banner é carregada e editada, você clica no ícone "Texto" acima do modelo para começar a trabalhar na cópia do botão;
-
insira sua cópia na seção "Legenda" de seus banners;
-
em seguida, destaque o texto do banner e escolha a fonte de banner desejada na lista suspensa.
Cor da fonte do e-mail
Existem apenas 2 regras que você deve seguir aqui:
1. Mantenha o número de cores no mínimo
Você deve usar apenas as cores que estão presentes na identidade da sua marca. Se você tem a ideia de usar mais de 3 cores em seu e-mail, esqueça essa ideia, pois isso tornará o texto ilegível e seu e-mail bagunçado.
Se você deseja destacar uma sentença ou frase, basta usar uma fonte em negrito, pois usar uma cor diferente é ambíguo.
Exemplo de uma boa combinação de cores em e-mails.
(Fonte: E-mail da Victoria's Secret)
2. Use cores de contraste
Se você pretende usar cores brilhantes — muitos de nós fazemos isso quando se trata de feriados — certifique-se de usar cores contrastantes. Não posicione texto vermelho sobre botões verdes, não use branco sobre cinza. Pode parecer festivo o suficiente para pessoas com boa visão. Entretanto, pessoas daltônicas podem não achar nosso texto legível.
Normalmente, para conteúdo de e-mail, os designers utilizam cores preto ou cinza escuro. É melhor para facilitar a leitura. A única exceção é quando você tem um fundo preto. Nesse caso, use uma fonte branca. Não use uma fonte cinza claro em um fundo branco, pois isso torna difícil a leitura de seus e-mails.
Tags HTML para formatação de texto
Os profissionais de marketing por e-mail que preferem construtores de e-mail podem formatar textos diretamente no construtor.
Aqueles que preferem codificar e-mails do zero podem precisar do seguinte:
-
deixar seu texto em negrito:
<strong> text here </strong> or <b> text here </b>
-
para listas com marcadores:
<ul>
<li> point 1 </li>
<li> point 2 </li>
<li> point 3 </li>
</ul>
-
deixar seu texto em itálico:
<i> text here </i> or <em> text here <em>
-
usar a mesma fonte em tamanho menor:
<small> text here </small>
-
destacar o texto com preenchimento amarelo (por padrão):
<mark> text here </mark>
-
e este lhe permite definir um parágrafo:
<p> text here </p>
Textos da Direita para a Esquerda em e-mails
Mais de 550 milhões de pessoas falam línguas que usam a inscrição da direita para a esquerda. Texto RTL é muito mais do que apenas inverter palavras.
Por exemplo, você não deve inverter números, palavras estrangeiras, etc. Todos os sinais de pontuação que você normalmente colocaria no final da linha, na verdade a iniciarão. Não entraremos em detalhes aqui, mas você pode se familiarizar com todas as diretrizes de texto RTL em nossa postagem do blog "Texto da Direita para Esquerda".
Lá também mostramos como ativar a opção RTL com a Stripo, para que você possa usar scripts RTL em seus e-mails sem possuir habilidades de codificação.
Diretrizes de acessibilidade de e-mail
Em resumo, devemos considerar essas diretrizes por vários motivos:
-
para permitir que pessoas daltônicas leiam nossos e-mails;
-
para permitir que pessoas com deficiência visual ouçam nossos e-mails por meio de leitores de tela;
-
para permitir que nossos usuários que estão extremamente ocupados verifiquem seus e-mails enquanto dirigem ou cozinham e peça a Siri para “ler” suas mensagens recebidas, para ouvir nossos e-mails;
-
para permitir que os disléxicos leiam nossos e-mails — já que muitas das pessoas que sofrem de dislexia não sabem disso, mas ler textos não adaptados é bastante insuportável para eles.
Portanto, as diretrizes para tornar o texto do seu e-mail acessível:
-
Considere o contraste de cores.
-
Coloque seus textos alinhados à esquerda para uma percepção mais fácil da cópia do e-mail por disléxicos — evite textos alinhados ao centro.
-
Sempre adicione sinais de pontuação ao final de cada marcador. Sim, pode ser contra as regras gramaticais, mas ao fazer isso tornamos nossos e-mails mais legíveis e deixamos pelo menos um destinatário mais feliz.
-
Mantenha o tamanho da fonte em 14 pixels ou mais.
-
Não sublinhe textos.
-
Evite itálico. Se você precisar destacar qualquer parte do seu texto, use somente negrito!
-
Não use letras maiúsculas!
Para mais informações, consulte nossa postagem no blog "Acessibilidade de e-mail".
Qual é a melhor fonte a ser usada para boletins informativos por e-mail?
Não existe coisa como a melhor fonte para o Gmail, a melhor fonte para o Outlook e qualquer outro cliente de e-mail. Depende do idioma que você está falando. Como resultado, ousamos dizer que as preferências variam de país para país devido aos recursos de idioma.
Devido a muitos experimentos feitos pela equipe de marketing do eSputnik, as melhores fontes para e-mails para países de língua russa são Arial e Tahoma. Arial é a fonte mais atraente entre aqueles que criam campanhas de marketing por e-mail em russo. Tahoma fica ótima tanto em e-mails com muito conteúdo quanto em pequenos textos.
Helvetica é a fonte mais popular entre os países de língua inglesa. Arial fica em 2º lugar.
Para escolher a mais legível em sua opinião, de acordo com os recursos do seu alfabeto, você pode testar todas as fontes seguras para e-mail como fizemos. Você também pode pedir ajuda aos seus amigos e colegas com este teste.
Eu criei um template de e-mail com o editor Stripo com o mesmo texto e o mesmo tamanho de 18px para cada fonte.
Então, aqui estão os resultados, basta comparar essas fontes e escolher aquela que mais se adapta às suas necessidades:
Considerações finais
Considerando tudo o que foi dito acima, podemos dizer que não há fontes de e-mail com aparência profissional que sejam legíveis e tenham uma boa aparência em todos os tipos de dispositivos. Você sempre tem que escolher:
-
Georgia e Times New Roman são muito estreitas;
-
Courier New é larga, mas talvez até muito larga para e-mail;
-
Arial é mais leve que Helvetica;
-
é impossível diferenciar as fontes Verdana e Tahoma.
Além de escolher a fonte correta do e-mail, precisamos tornar nossos e-mails acessíveis seguindo as diretrizes mencionadas acima.
32 comentários
Alex O'Cardy há 7 meses
Legibility is indeed really important when it comes to email fonts, I've seen some newsletters where you had to take some time to figure out what's written there.
Anton Diduh comentou com Alex O'Cardy há 5 meses
Hi! We fully agree with you. Readability is a critical aspect of any email design and a vital ingredient for improving the accessibility of email newsletters.
Woland Petrov há 7 meses
I can't choose between Helvetica and Arial, and now that I've learned that they're both the most popular email fonts, it makes it even harder to decide
Anton Diduh comentou com Woland Petrov há 5 meses
Hi! Yes, the design process is a bit tricky thing. We hope you made the right choice)
Andron Silver há 7 meses
Do you think it's a good idea to use the most popular email fonts? Futura and Helvetica are the most attractive to me, but choosing one is hard.
Anton Diduh comentou com Andron Silver há 5 meses
Hello) Using popular fonts is a great way to make your email beautiful without mistakes. However, nothing prevents you from standing out from the crowd and using less popular fonts. If in your design they will look chic, then why not?)
John Smith há 7 meses
I'm so glad I discovered this article! Fonts for Email are hard to choose, and before reading your post, I thought about using four fonts in one newsletter.
Anton Diduh comentou com John Smith há 5 meses
Hello! We are glad that you liked this blog post.)
Errico Malatesta há 7 meses
So italic fonts are not the best? I thought about using them in my newsletters, but now I understand that it's better to choose the regular email fonts.
Galileo Cardinale há 7 meses
I've never thought that choosing the email fonts would be so hard. I was planning to use italic font styles, but now I know it's not a good idea.
Scott Piligrimm há 7 meses
I'm planning to use Helvetica Now, it's indeed pretty modern. Fonts for Email are quite hard to choose, and I can tell you I even thought about making custom one.
Woland Petrov há 7 meses
It's actually convenient that you can set the different email fonts sizes for mobile and desktop devices, don't remember if it was possible with my previous email template builder.
John Morrow há 7 meses
I didn't even know that underlining links was not preferable, noted. I'll definitely use these tips for the email fonts, thanks!
Anton Diduh comentou com John Morrow há 5 meses
Hi! We're glad we could help)
Bill Shiphr há 7 meses
Thanks for the post and the ability to copy HTML tags, that's actually convenient! I'll definitely use these email fonts in my next project.
Anton Diduh comentou com Bill Shiphr há 5 meses
Hi! Always happy to help.)
Paulo Marreiros há 2 anos
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 anos
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á 2 anos
nice blog theme you use in your blog can you share which theme you are using
Hanna Kuznietsova comentou com pirates há 2 anos
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á 2 anos
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á 2 anos
Igor, Muito obrigado )) Estamos muito satisfeitos que nosso artigo seja útil. Desejo-lhe sucesso em email marketing
Khairom Munawwar Baharom há 3 anos
Hi Hannah. Do Montserrat font can go multi-platform on email? (Gmail, Outlook, etc..)
Hanna Kuznietsova comentou com Khairom Munawwar Baharom há 3 anos
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á 3 anos
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á 3 anos
Vielen Dank für Ihren wertvollen Kommentar. Wir haben die notwendigen Änderungen an unserem Artikel vorgenommen. Viel glück
rohit dubey há 3 anos
Thanks for sharing this amazing content. This is really helpful for us.
Hanna Kuznietsova comentou com rohit dubey há 3 anos
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á 3 anos
What font are you using for this post? I like it!
Hanna Kuznietsova comentou com Marcia Bosscher há 3 anos
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á 3 anos
I found this article to be a very helpful refresher. Thank you!
Hanna Kuznietsova comentou com Myron Gould há 3 anos
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!