Tipografia de Email: 8 Melhores Fontes para Email (E Ideias de Fontes de Email Personalizadas)

A maioria das empresas com seguimentos sólidos abraçaram completamente tudo o que o email marketing tem para oferecer até este ponto. Email newsletters, autoresponders, você escolhe o seu nome. O e-mail marketing tem sido uma forma consistente de manter o seu dedo no pulso das necessidades dos seus clientes enquanto simultaneamente promove todos os últimos produtos ou serviços que você tem em oferta.

O fato de que você pode alcançar os clientes muito depois de eles terem deixado o seu site é tão poderoso. No entanto, qualquer e-mail antigo simplesmente não serve. A forma como apresenta o seu conteúdo de e-mail é uma parte essencial para captar a atenção e encorajar os clientes a lerem realmente os seus e-mails em vez de os eliminar à vista.

Design desempenha um papel crucial aqui. Mas provavelmente um dos aspectos mais importantes a atender é sua escolha de fonte. Fontes seguras para e-mail tornam mais fácil para os clientes ler o que você tem a dizer, o que significa que você terá mais probabilidade de obter essa conversão.

É isso que estaremos discutindo aqui hoje.

O que são fontes seguras para e-mail?

É tentador usar fontes extravagantes para seus e-mails. Afinal de contas, você quer causar uma impressão positiva. E você quer fazer o seu conteúdo se destacar. No entanto, fontes especiais nem sempre serão exibidas corretamente em todos os clientes de e-mail. Na verdade, se uma fonte não for suportada, um cliente de e-mail pode acabar usando uma fonte fallback que, na melhor das hipóteses, pode estragar o tom pretendido ou obscurecer a legibilidade do seu conteúdo na pior das hipóteses.

É por isso que é altamente recomendável que você se limite a fontes seguras para e-mail somente quando estiver criando conteúdo de marketing por e-mail. Chegaremos aos detalhes em um momento. Mas primeiro, vamos discutir brevemente como boas escolhas de fontes podem realmente causar um grande impacto na sua taxa de conversão.

Como você apresenta seus e-mails pode fazer a diferença entre o seu público lendo-os… e enviando-os diretamente para o lixo. 😬 🗑 Saiba mais sobre fontes seguras para e-mail e porque você precisa delas ⬇️Click to Tweet

How Good Fonts Boost Conversions

A maioria das pessoas passa apenas 11 segundos no e-mail. Isso significa que as fontes que você escolher precisam ser legíveis e escaneáveis. Elas precisam oferecer essa comodidade “at-a-glance”. Muitas vezes isso significa confiar em fontes padrão que todos já estão familiarizados. Parece aborrecido? A alternativa é pior. Na verdade, as pessoas levam o dobro do tempo para ler fontes extravagantes. E se as pessoas estão gastando apenas 11 segundos em um e-mail, isso é uma tonelada de tempo perdido.

tempo de leitura

Script vs. Sans serif tempo de leitura

Não é apenas a fonte escolhida que tem impacto nas conversões, no entanto. O tamanho da fonte que você escolher também importa. Na verdade, de acordo com pesquisas conduzidas pelo Click Laboratory, aumentar ligeiramente o tamanho da fonte pode ter um impacto enorme na sua taxa de conversão.

A pesquisa envolveu aumentar um bloco de texto definido para a fonte Arial de 10pt para 13pt. Mais espaço foi adicionado entre as linhas de texto também. A versão 13pt da fonte teve um desempenho muito melhor porque o conteúdo agora era mais fácil aos olhos e mais legível.

Esta pequena alteração reduziu a taxa de bounce em 10% e aumentou a taxa de conversão em 133%! Tudo por causa do aumento do tamanho da fonte em dois pontos!

Existe também uma psicologia para as suas escolhas de fonte. Isso se aplica principalmente a logotipos, mas compensa ter essa informação em mente, já que você está selecionando fontes de e-mail também. Certos tipos de fontes têm certos “sentimentos” associados a elas. According to Crazy Egg, the five main font types elicit different emotions or associations:

Serif Fonts

Examples include Times New Roman, Baskerville, and Georgia. Serif fonts exude a sense of respectability, reliability, and tradition. Older brands (or those that want to appear as though they’ve been around for decades) make solid use of these sorts of fonts to instill confidence. The Tiffany & Co logo serves as a solid example.

Tiffany and co

Tiffany & Co

Vogue, too:

vogue

Vogue

Sans Serif Fonts

Examples include Helvetica, Calibri, and Franklin Gothic. Sans serif fonts give off a modern look that’s clean, simple, and straightforward. These fonts give off the impression of reliability and stability. Sans serif fonts are very corporate-looking. Netflix features a sans serif font:

netflix

Netflix

Modern Fonts

Examples include Futura and Century Gothic. Modern fonts can appear stylish, chic, or give an overall sense of strength. Hulu’s logo is a popular example of one using a modern font:

Hulu

Hulu

Script Fonts

Examples include Edwardian Script and Bickham Script. Script fonts will likely not be a wise choice for use in your emails. However, they do make an impact when used in logos and that could work for graphical elements. Coca-Cola is a timeless example of a script font used well:

Coca-Cola

Coca-Cola

Display Fonts

Examples include Cooper and Valencia. Words and feelings commonly associated with display fonts include a sense of individuality or uniqueness, friendliness, or expressiveness. Para logotipos (e possivelmente cabeçalhos), as fontes de exibição podem causar um impacto real e se destacar. A Disney oferece um dos logotipos mais conhecidos do mundo, e apresenta uma fonte de exibição:

Disney

Disney

Com esta informação em mente, podemos agora passar para a forma como você pode selecionar a melhor fonte para e-mails.

Email Typography: Como Escolher as Melhores Fontes

Você agora conhece os cinco tipos básicos de fontes que estão disponíveis (além de símbolos, suponho). E você sabe que tipos de fontes diferentes criam emoções diferentes em seus clientes. Mas como saber o tipo de fonte que a Coca-Cola usa se traduz na escolha da fonte certa para os seus e-mails?

Vamos mergulhar em.

Qualquer fonte que você escolha para usar nos e-mails da sua empresa precisa incluir as seguintes 4 qualidades:

Qualidade #1: Legibilidade

Já mencionamos essa qualidade, mas é preciso repetir porque é de longe a mais importante. Se a sua fonte não for legível, ninguém poderá ler os seus e-mails. E se eles não podem ser lidos, você certamente não pode esperar conversões, agora você pode?

Qualidade #2: Clareza

Fontes limpas e nítidas com linhas precisas são o que vai funcionar melhor na sua cópia de e-mail. Nada com flores ou rabiscos. E certamente nada com linhas super finas ou leves. Fontes de tamanho maior também funcionam melhor. Faça sua fonte um pt ou dois maiores do que você normalmente faria, garanta que o peso da fonte seja decente (mas não em negrito), e aponte para um espaçamento de 1,15 linhas.

Qualidade #3: Psicologicamente Apropriado

Como mencionado acima, certos tipos de fonte têm sentimentos específicos associados a eles. Certifique-se de que a(s) fonte(s) selecionada(s) se encaixa(m) no humor geral que você está tentando transmitir com o seu conteúdo, bem como o propósito do seu conteúdo. Parecer confiável ou como uma figura de autoridade pode ser benéfico se você estiver tentando vender algo, por exemplo.

Qualidade #4: Adequada à Marca

Simplesmente, qualquer fonte que você escolher deve fazer sentido lógico para uso em sua indústria ou nicho. Se a sua empresa tem um toque antiquado, usar uma fonte super moderna ou de estilo de exibição não seria adequado. Da mesma forma, se você administra uma empresa baseada em tecnologia, algo rústico ou formal provavelmente também não faria o melhor ajuste. Tudo se resume ao que parece certo.

8 Melhores fontes para e-mail

Definimos fontes seguras para e-mail. Também falamos sobre como você pode restringir sua seleção de fontes. Mas agora é hora de chegar às especificidades de quais fontes são realmente seguras para e-mail e como pensar fora da caixa sem sacrificar a legibilidade ou prejudicar sua taxa de conversão.

As fontes básicas seguras para e-mail

Existe um conjunto básico de fontes seguras para e-mail legíveis (embora chatas) que a maioria dos clientes de e-mail pode reconhecer. Let’s take a look at each of those now.

Arial

arial

Arial

Arial is a very commonly used typeface. It was originally created in 1982 by Patricia Saunders and Robin Nicholas of Monotype Imaging. Though originally designed for use in an IBM laser printer, it has since become a web content favorite.

Verdana

verdana

Verdana

Verdana is a font that was designed with screen displays in mind. It was developed by Matthew Carter and features wide characters and large spacing between each character to improve on-screen legibility. It’s another staple choice supported by most email clients.

Helvetica

Helvetica

Helvetica

And then there’s Helvetica, one of the most popular fonts currently in existence. É legível, fácil de usar, e é suportada pela maioria dos programas de processamento de texto, clientes de e-mail e navegadores web.

Georgia

georgia

Georgia

Georgia é outra fonte comum para encontrar suporte em clientes de e-mail. É inerentemente legível, apresenta letras em grande espaço e usa desenhos de caracteres que tornam cada letra distinta para evitar confusão. Há também uma boa variação entre pesos regulares e negritos que a tornam útil para dar mais ênfase.

Tahoma

tahomap>Tahoma

Tahoma é outra opção que é suportada pela maioria dos clientes de e-mail. É uma das mais populares famílias de fontes sans serif nos sistemas operacionais Windows. Foi criada com a exibição na tela em mente, com clareza e legibilidade alcançável em fontes de tamanho ainda menor. It was originally created by Matthew Carter.

Lucida

lucida

Lucida

Or, you could use Lucida, another sans font family that prioritizes clean lines, a clear style, and distinct letterforms. Letter spacing is wider than standard and each character is a bit taller as well, adding more elements of legibility.

Trebuchet

trebuchet

Trebuchet

Trebuchet is another option available that you could easily use in your email designs. It was created by Vincent Connare in 1996 and is a sans serif font. It was designed for screen reading and features larger line-heights, rounded edges, and wider character spacing.

Times New Roman

times new roman

Times new roman

Lastly, there’s Times New Roman, a font that really doesn’t need much of an introduction. Tem uma aparência tradicional e é muitas vezes usada como fonte padrão em programas de processamento de texto. É legível na tela e na impressão.

Seu cliente de e-mail pode ter acesso a outras fontes, mas as acima são as mais legíveis e as mais comumente reconhecidas.

Assine para a Newsletter

Agregamos nosso tráfego 1.187% com o WordPress. Vamos mostrar-lhe como.

Junte mais de 20.000 pessoas que recebem a nossa newsletter semanal com dicas internas do WordPress!

Inscreva-se Agora

Fontes de Email Personalizadas

Se as opções básicas de fontes não são atraentes para si, há outra opção. Você pode usar fontes HTML para criar um visual mais personalizado. Entretanto, é importante notar que nem todo serviço de e-mail marketing pode ou irá exibir fontes web corretamente.

Mas primeiro, vamos pausar para discutir como as fontes web funcionam.

Como as fontes web funcionam

Fontes web, como seu nome sugere, existem apenas na web. Elas não estão incluídas nos sistemas operacionais, dispositivos, aplicativos ou software. Elas existem online e podem então ser adicionadas aos seus projetos através de snippets de código, plugins e outros meios. Na maioria das vezes, você encontrará fontes da web sendo usadas em websites. Vários clientes de e-mail atualmente suportam o uso de fontes web, incluindo:

  • Android Mail
  • Apple Mail
  • iOS Mail
  • Outlook 2000
  • Outlook.com App
  • Thunderbird

Fontes web não são suportadas por todos esses clientes de e-mail das mesmas maneiras, no entanto. Alguns requerem apenas um link, enquanto outros requerem um snippet de código que importa a fonte web. Mais sobre isso em um momento. É primeiro importante reconhecer que mesmo que um cliente de e-mail não suporte sua fonte web de escolha (ou seu método de inclusão), seu conteúdo não necessariamente parecerá terrível.

A maioria dos clientes de e-mail inclui uma opção de retorno. Ou seja, se a fonte web incluída no seu e-mail não carregar corretamente, o cliente de e-mail irá servir uma fonte fallback em seu lugar. É normalmente uma das opções genéricas que listamos acima, mas o bom aqui é a) seu conteúdo ainda será legível, b) seu conteúdo não ficará meio mal porque as fontes padrão se tornaram o padrão pela razão (elas são simples e fáceis de ler), e c) você pode frequentemente selecionar qual fonte você gostaria de usar como seu fallback.

Para lhe dar uma idéia do que queremos dizer, a fonte padrão do Gmail é Arial enquanto o Apple Mail usa Helvetica. O Outlook usa Calibri enquanto o iOS usa São Francisco (uma fonte Apple criada especificamente para seus dispositivos que foi fortemente inspirada pelo Helvetica Neue.

Se você decidir usar fontes web, você deve testá-la em várias plataformas antes de lançar.

alguns serviços de e-mail marketing já incluem suporte a fontes web. O Campaign Monitor, por exemplo, inclui várias opções de fontes web no seu construtor de e-mail de arrastar e soltar e as opções de fallback são automaticamente definidas para você com o mínimo de confusão.

campaign monitor

Campaign Monitor Web Fonts

Se a sua plataforma de e-mail marketing não inclui suporte a fontes web nativamente, é provável que você possa adicioná-lo via código.

Existem vários trechos de código que você pode usar para incorporar fontes da Web em e-mails HTML.

<link>

Using <link> para adicionar fontes web aos seus e-mails é uma escolha popular. Qualquer fonte da web que você selecionar irá definir a URL para você. Portanto, se você mesmo está hospedando a fonte, mude-a para a URL da sua fonte no seu site. Se a fonte estiver hospedada com o vendedor de fontes web, use a URL que eles fornecem.

Você colocará o código snippet na seção <head> do código do seu e-mail. Ele deve aparecer logo no início. Este método é suportado pela maioria dos clientes de e-mail e carrega bastante rapidamente. Você pode encontrar alguns problemas, no entanto, se o arquivo da fonte web estiver no lado maior.

Então, se você obtiver sua fonte web do Google Fonts, você verá o seguinte depois de selecionar o estilo da sua fonte e o link como seu método embutido preferido:

link

Roboto no Google Fonts

@importar

Outra forma de adicionar fontes web aos e-mails é usar @importar. Esta é super simples e funciona bem na maioria dos clientes de e-mail também. O único soluço é com algumas versões mais antigas do Android.

Apenas como com o <link> code snippet, você vai inserir @import na seção <head> do seu e-mail também. Novamente, no Google Fonts, isto é o que você vê depois de selecionar uma fonte, seus estilos e clicar na bolha ao lado de @import:

Estilos de fonte Robotop>@importar para a fonte Roboto

Se você estiver usando um serviço de fonte web diferente, você pode não obter um código embutido como este e, em vez disso, precisará digitar o código snippet você mesmo. Use a URL que seu serviço de fonte web lhe fornece, ou se você mesmo escolher hospedar a fonte, use o link apropriado em seu servidor.

@font-face

Esta regra faz com que você possa baixar uma fonte de um servidor ou hospedá-las para que possam ser usadas em um site, ou, neste caso, em seus e-mails. Funciona de forma semelhante aos dois métodos anteriores, na medida em que faz o download de fontes em tempo real para que possam ser utilizadas no seu website ou nas suas mensagens de e-mail. Como com todos os outros métodos aqui discutidos, você cola este trecho de código no arquivo <head> seção HTML.

Cansado de problemas com o WordPress e um host lento? Nós fornecemos suporte de classe mundial de especialistas em WordPress disponíveis 24 horas por dia, 7 dias por semana e servidores rápidos em chamas. Confira nossos planos

Então, de acordo com Mozilla, se você fosse adicionar a fonte Open Sans aos seus e-mails, você usaria o seguinte código snippet:

@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),url("/fonts/OpenSans-Regular-webfont.woff")format("woff");}

Specifying Web Font Alternatives

Embora você sempre queira que a fonte web que você selecionou cuidadosamente para trabalhar, esse não será sempre o caso. Seja devido a erro do servidor ou compatibilidade do sistema, é uma boa idéia não deixar a opção de recurso selecionada ao acaso. Então, usando @font-face novamente, você pode realmente especificar qual fonte local você quer que seja usada caso sua fonte web preferida não possa ser baixada.

Podemos usar o mesmo trecho de código referenciado acima e apenas modificá-lo para incluir uma opção de fonte fallback:

@font-face{font-family:"Open Sans";src:url("/fonts/OpenSans-Regular-webfont.woff2")format("woff2"),url("/fonts/OpenSans-Regular-webfont.woff")format("woff");local("Helvetica")}

Onde encontrar fontes da web a serem usadas em seus e-mails

Existem vários lugares online onde você pode usar fontes da web. Basta estar atento a quaisquer requisitos de licenciamento que eles tenham. Cada site pode ter especificações diferentes que você precisa seguir, então tenha isso em mente.

  • Fontes do Google: Este é um dos lugares mais populares para encontrar fontes web atualmente, oferecendo uma biblioteca de fontes de código aberto para usar em qualquer lugar e a qualquer momento. Atualmente possui 1.020 famílias de fontes.
  • Fonts.com: Este é outro recurso fantástico para fontes de todos os tipos, desde fontes desktop até fontes web. Na verdade é a loja Monotype e possui mais de 150.000 fontes para navegar e talvez comprar.
  • Typography.com: Esta é a loja para H&Co, uma fundição que inclui 1.500 fontes que podem ser usadas na web e para impressão.
  • Font Squirrel: Se você está procurando por uma seleção livre, Font Squirrel pode caber na conta. Este site apresenta apenas fontes gratuitas que podem ser utilizadas para fins comerciais.
  • Adobe Fonts: Anteriormente conhecido como Typekit, Adobe Fonts inclui milhares de fontes para escolher, todas disponíveis com uma assinatura Creative Cloud.
  • Fontspring: Embora você tenha que comprar as fontes web listadas no Fontspring, elas estão disponíveis sem uma assinatura e normalmente incluem licenças ilimitadas para maior conveniência.
  • MyFonts: Este é outro empreendimento de propriedade da Monotype, com listagens de toneladas de fontes para impressão e web.
  • Village: Este é na verdade um coletivo de várias fundições que se uniram para vender suas fontes de forma independente.
  • Fundição Tipo Processo: Esta é uma pequena empresa que foi fundada em 2002 por dois designers de fontes e eles vendem as fontes que fazem para o público em geral.
  • FontShop: Finalmente, há a FontShop, outra Monotype storefront e local para navegar e comprar fontes web.

Highh-Quality, Readable Web Fonts

Se você precisar de alguma inspiração, a seguir estão todos os exemplos de fontes web que são fáceis de ler e podem ser adicionadas aos seus e-mails usando os métodos descritos acima.

Sans aberto

Sans abertoSans aberto é uma fonte sans serif altamente legível que é ideal para leitura na tela. Foi concebida por Steve Matteson e apresenta formas abertas. Todas as letras são fáceis de ler e ficam bem em todos os tamanhos também.

Roboto

RobotoRoboto é outra fonte web de alta qualidade que fica muito bem nas telas. Tem um desenho geométrico com curvas abertas, criando uma dicotomia apelativa que só funciona com simplicidade. Each letter maintains a natural width, resisting the typical rigidity of grotesk fonts.

Raleway

Raleway

Or, you could opt for Raleway, another sans serif font that offers thinner lines and a more elegant appeal. The typeface family was originally designed by Matt McInerney, then expanded later by Pablo Impallari and Rodrigo Fuenzalida.

Century Gothic

century gothic

Century Gothic

Century Gothic is a web font that offers a classic look. And it makes sense that this is the case since it’s actually a modernized version of older fonts from the 1920s and 30s. It has broad support across browsers and is readable on screens.

Proxima Nova

proxima nova

Proxima Nova

Proxima Nova is another web font option that is actually a re-envisioned version of the Proxima Sans font, which was first created in 1994. The font is slightly geometric but natural as well and would make for an excellent selection for your email copy.

Quasimoda

quasimoda

Quasimoda

Quasimoda is a stylish web font that’s easy on the eyes and universal in its appeal. It was created by Lettersoup, a type foundry based in Berlin, Germany that was started by Botio Nikoltchev in 2014.

PT Sans Pro

pt sans pro

PT Sans Pro

PT Sans Pro might be just what you’re looking for in a web font. It offers rounded letterforms and a natural look. It was designed by Paratype, a digital font company that got its start in the 1980s.

Brandon Grotesque

brandon grotesque

Brandon Grotesque

The Brandon Grotesque web font was created by HVD Fonts. A HVD foi fundada por Hannes von Döhren e a empresa foca-se na criação de fontes de fácil leitura, profissionais mas elegantes que funcionam para qualquer número de aplicações.

Sofia Pro

sofia pro

Sofia Pro

Sofia Pro é uma fonte sem serif que foi desenhada pela Mostardesign em 2008. Mantém uma sensação de modernidade ao mesmo tempo que inclui também formas arredondadas. Ela atinge um equilíbrio sólido entre desenhos harmoniosos e geométricos.

Museo Sans

museo sans

Museo Sans

P>P>Por último, há o Museo Sans, que é um novo take sobre a popular fonte Museo. Ele apresenta um design geométrico sem serif que pode ser usado tanto em manchetes como em textos copiados. É legível e multiuso, tornando-o um cavalo de batalha para e-mails. Foi projetado pelo Exljbris em 2008.

A Note About Using Images in Email vs. Text

Se você incorporar uma imagem como um pôster ou até mesmo uma captura de tela de texto escrito em uma fonte bonita, isso pode ser uma forma de contornar a questão das fontes seguras para email. Isto vem com seus próprios problemas, no entanto, como as imagens nos e-mails nem sempre são exibidas, ou podem não ser exibidas corretamente em algumas telas. Há também o problema dos leitores de tela, que, a menos que você inclua texto alt, não saberão o que a imagem diz.

Tenha cuidado ao usar imagens em e-mails e use-as apenas para melhorar o conteúdo da sua mensagem, não para entregar informações importantes. Portanto, se você quiser anunciar uma venda especial no seu site, não inclua apenas uma imagem do seu poster de venda com os detalhes do produto listados nele e chame-o de um dia.

Você, no mínimo, precisa incluir o texto da imagem como texto simples, também. Melhor ainda, evite essa redundância e use apenas texto seguro por e-mail e salve as imagens para um interesse visual ocasional.

A única exceção baseada em texto que eu posso pensar que faria o uso de texto como imagem apropriada é um logotipo, onde o nome da empresa ou marca já é um dado.

Fun fact: a maioria das pessoas gasta apenas 11 segundos lendo um e-mail.⏱ Não perca esse tempo precioso com fontes difíceis de ler. 🙅♀️ Confira este guia de opções de fontes seguras para e-mail e capture mais leads! Clique em Tweet

Sumário

Nada uma fonte qualquer serve ao enviar mensagens de e-mail para clientes em potencial e clientes. Na verdade, não escolher uma boa fonte pode prejudicar significativamente a sua taxa de conversão. Portanto, as fontes que você escolher precisam ser seguras, causar uma boa impressão e oferecer uma excelente legibilidade.

Neste artigo, revisamos os principais tipos de fontes existentes e o impacto psicológico que elas podem ter. Apresentamos exemplos de fontes que a maioria dos clientes de e-mail suportam. Também falamos sobre fontes web, como você pode adicioná-las ao seu site, bem como oferecemos recursos e exemplos de fontes web que você pode usar para começar.

Esperançosamente, você agora tem uma idéia melhor sobre o impacto das fontes seguras para e-mail. E com este guia em mãos, você pode fazer escolhas informadas ao se aproximar da sua próxima campanha de e-mail.

Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbochar o seu site e obter suporte 24 horas por dia, 7 dias por semana da nossa veterana equipe WordPress. A nossa infra-estrutura alimentada pelo Google Cloud foca em escalonamento automático, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira os nossos planos

Deixe uma resposta

O seu endereço de email não será publicado.