Uso de Fontes no Editor de Email do Connectif

Ao criar e-mails alinhados com os objetivos de marketing, é importante entender como funcionam as fontes, para escolher aquelas que melhor se alinham com a marca e seu design, mas também conhecer suas limitações ao enviar e-mails consistentes nos diferentes clientes de e-mail.

Neste artigo, explicamos as propriedades das fontes disponíveis no Editor de E-mail do Connectif e seu comportamento nos clientes de e-mail, para que você escolha aquelas que mais lhe convêm ao desenhar seus e-mails com o Connectif.

 

1. Propriedades

Muitos clientes de e-mail bloqueiam algumas fontes e utilizam as fontes de fallback (fallback fonts), por isso, mesmo que o Editor de E-mail do Connectif ofereça várias opções de fontes, quando os contatos receberem os e-mails, é provável que eles não apareçam exatamente como no design, pois nem todos os dispositivos e provedores de e-mail têm acesso às mesmas fontes.

1.1. Como funcionam as fontes

• Existem duas formas principais de um dispositivo acessar e usar uma fonte: fontes do sistema (ou seja, fontes instaladas no próprio dispositivo) e fontes web (carregadas de um servidor externo).
• Existem algumas fontes do sistema básicas instaladas na maioria dos dispositivos (como Georgia e Verdana), mas elas podem variar entre dispositivos. Por isso, as fontes usadas na maioria dos dispositivos são chamadas de fontes seguras para a web (web-safe fonts).
• Ao criar e-mails, é importante considerar as fontes disponíveis, pois existem fontes seguras para a web e fontes personalizadas (custom fonts). As fontes personalizadas geralmente são fontes web (mas não fontes seguras) e geralmente têm uma ou mais fontes de fallback atribuídas.
  
  

1.1.1. Como funcionam as fontes seguras para a web

• As fontes seguras para a web são aquelas amplamente instaladas na maioria dos dispositivos e sistemas operacionais.
• Elas são exibidas corretamente na maioria dos clientes de e-mail, independentemente da plataforma ou dispositivo.
• Exemplos: Arial, Times New Roman, Georgia e Verdana.

1.1.2. Como funcionam as fontes personalizadas

• As fontes personalizadas não são garantidas em todos os dispositivos e sistemas operacionais.
• São fontes que exigem código CSS com fontes de fallback para garantir que, se a fonte principal não estiver disponível, uma semelhante seja usada no lugar.
• É comum adicionar várias fontes de fallback para garantir que o conteúdo seja exibido corretamente.

1.2. Como funcionam as fontes nos diferentes clientes de e-mail

• Os clientes de e-mail (como Gmail, Outlook ou Apple Mail) interpretam as fontes de maneira diferente.
• Alguns clientes, especialmente em dispositivos móveis ou versões mais antigas de aplicativos desktop, podem não suportar certas fontes personalizadas.

• Se o cliente de e-mail suportar o uso de <link>, @import ou @font-face, as fontes web podem ser exibidas corretamente usando HTML e CSS padrão.

• Apenas estes clientes de e-mail suportam fontes web através de serviços como Google Web Fonts:

  • Outlook para Mac.

  • iOS Mail (aplicativo de e-mail padrão no iOS).

  • Apple Mail.

  • Android (cliente padrão, não o Gmail)

  • Samsung Mail (Android 8.0).

  • Thunderbird.

• O Gmail geralmente não suporta fontes web, exceto a Roboto.

 

2. Como as fontes são usadas no Connectif

2.1. Fontes disponíveis no Editor de E-mail do Connectif

No Editor de E-mail do Connectif, está disponível uma combinação de fontes seguras para a web e fontes personalizadas.

Atualmente, estas são as fontes seguras para a web disponíveis no Editor de E-mail:

• Sans-serif:
  • Arial
  • Arial Black
  • Arial Narrow
  • Arial Rounded MT Bold
  • Avant Garde
  • Calibri
  • Candara
  • Century Gothic
  • Franklin Gothic Medium
  • Futura
  • Geneva
  • Gill Sans
  • Helvetica
  • Impact
  • Lucida Grande
  • OptimaSegoe UI
  • Tahoma
  • Trebuchet MS
  • Verdana
• Serif:
  • Big Caslon
  • Bodoni MT
  • Book Antiqua
  • Calisto MT
  • Cambria
  • Didot
  • Garamond
  • Georgia
  • Goudy Old Style
  • Hoefler Text
  • Lucida Bright
  • Palatino
  • Perpetua
  • Rockwell
  • Rockwell Extra Bold
  • Baskerville
  • Times New Roman
• Monoespaçadas:
  • Consolas
  • Courier New
  • Lucida Console
  • Lucida Sans Typewriter
  • Monaco
  • Andale Mono
• Fantasy:
  • Copperplate
  • Papyrus
• Script:
  
  • Brush Script MT

A essas fontes, somam-se estas fontes personalizadas, com suas respectivas fontes de fallback:

/* Bitter */
font-family: 'Bitter', Georgia, Times, 'Times New Roman', serif;

/* Comic Sans MS */
font-family: 'Comic Sans MS', 'Comic Neue', cursive;

/* Droid Serif */
font-family: 'Droid Serif', Georgia, Times, 'Times New Roman', serif;

/* Inter */
font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Montserrat */
font-family: 'Montserrat', 'Trebuchet MS', Tahoma, sans-serif;

/* MS Serif */
font-family: 'Microsoft Sans Serif', Georgia, serif;

/* New York */
font-family: 'New York Line', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Open Sans */
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Palatino Linotype */
font-family: 'Palatino Linotype', Palatino, 'Palatino LT STD', 'Book Antiqua', Georgia, serif;

/* Poppins */
font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Roboto */
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans

 

2.2. Como as fontes personalizadas são servidas no Connectif

Se você optar por exibir um texto com uma fonte personalizada em um e-mail do Connectif, apenas os contatos que usam clientes de e-mail que tenham essas fontes instaladas poderão visualizá-las. Os demais verão a fonte de fallback.

2.3. Recomendações e boas práticas para o uso das fontes em e-mails

A seguir, um resumo das recomendações ao criar e-mails e usar as diferentes fontes disponíveis no Connectif:

• Use fontes seguras para a web sempre que possível: Para garantir a maior compatibilidade com todos os dispositivos e clientes de e-mail, priorize o uso de fontes seguras para a web.

• Teste em diferentes clientes: Antes de enviar uma campanha de e-mail, faça testes em vários clientes de e-mail e dispositivos para garantir que as fontes sejam exibidas corretamente.
• Otimize para dispositivos móveis: Muitos e-mails são abertos em dispositivos móveis, por isso é fundamental que as fontes sejam legíveis em telas pequenas. Fontes sans-serif como Arial e Helvetica funcionam bem nesse caso.
• Contraste e legibilidade: Certifique-se de que as fontes escolhidas contrastem bem com o fundo do e-mail para garantir a legibilidade.

 

---

Continue aprendendo!

Para aproveitar ao máximo sua conta no Connectif, recomendamos continuar com os seguintes artigos:

• Editor de E-mail, para aprender a compor seus e-mails com o Connectif.

• Criar bloco de produtos personalizados em um e-mail, para enviar aos seus clientes produtos de interesse.

• Links em e-mails: ver no navegador, cancelar inscrição e botões, para configurar links predefinidos.
• Campanha semanal de produtos recomendados, para programar envios automáticos com produtos recomendados aos clientes.