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.

Desenhe e-mails elegantes com Stripo em pouco tempo com nossos modelos pré-construídos

Navegue

 

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.

Experimente o Stripo Out

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.

Junte-se à Stripo

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:

1. Considere o contraste de cores.

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

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

4. Mantenha o tamanho da fonte em 14 pixels ou mais.

5. Não sublinhe textos.

6. Evite itálico. Se você precisar destacar qualquer parte do seu texto, use somente negrito!

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