Blog de Email Marketing

Templates

Tipografia no Email Marketing

Juliana Padron Por Juliana Padron em 03.05.2011

Uma questão importante no design de templates de email marketing, mas muito pouco considerada, é a tipografia a ser utilizada na comunicação.

A grande maioria dos templates é composta apenas por imagens, e os designers utilizam sua criatividade para criarem o que bem entenderem, com a tipografia que mais lhes agrada ou que faz parte de uma identidade visual previamente definida.

Porém, sempre dizemos que o ideal é que um template de email marketing seja composto por quantidades equilibradas de imagens e de texto, para não serem “barrados” nos testes antispam dos servidores de email e facilitarem a leitura da mensagem pelos destinatários, que não precisam fazer o download das imagens para compreender o conteúdo do email.

Para usar texto no HTML do template de email marketing, muitos acham que basta limitar-se às opções Arial-Verdana-Tahoma-Times, que são as tais “fontes de sistema”, para formatar o texto no HTML. Mas você sabia que a família Arial de tipografia não é padrão de sistemas? É uma fonte muito comum em Windows e MacOS, mas não em Linux. O mesmo vale para a Tahoma, Verdana e Trebuchet MS (aliás, o MS da Trebuchet indica “Microsoft”).

Nenhuma dessas fontes, na verdade, é padrão em todos os sistemas operacionais, mas convencionou-se seu uso pela popularidade do Windows, que vem com todas elas instaladas. A cada nova versão do sistema operacional da Microsoft, novas fontes são incluídas, como a Cambria, Calibri e Corbel, disponíveis a partir do Windows Vista.

Calibri, família tipográfica criada pela Microsoft


Se você está se perguntando se pode usar essas novas fontes em seus próximos templates de email marketing, a resposta é sim, mas lembre-se que só os destinatários que tiverem Windows a partir da versão Vista ou a versão 2007 do pacote MS Office (ou acima) visualizarão os textos renderizados com essas fontes. Usuários de outros sistemas operacionais terão os textos renderizados com fontes equivalentes – com serifa, sem serifa, monospace – o que pode provocar quebra de layout ou simplesmente não causar o efeito esperado.

É justamente devido a essa questão de compatibilidade de fontes e sistemas operacionais, que a formatação de textos no HTML do template inclui mais de uma família tipográfica, como nesse exemplo:

Aqui, a fonte principal na qual o texto “Título” deve ser renderizado é a Helvetica, mas há uma sugestão de dois outros tipos para serem usados caso a Helvetica não esteja presente no sistema operacional. Você pode entender essa instrução assim:

Se não houver Helvetica, use Arial. Se não houver Arial, use a fonte sem serifa padrão do seu sistema”.

Windows e MacOS

As famílias tipográficas comuns aos sistemas Windows e MacOS são:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Palatino
  • Symbol
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings

Isso significa que, se você criar um template de email marketing que use textos em HTML com qualquer destas fontes, ela será renderizada corretamente no Windows e no MacOS.

Linux

As fontes relacionadas acima, conhecidas também como web safe, não se aplicam aos sistemas baseados em Linux. Cada distribuição de Linux tem suas próprias bilbiotecas de fontes, mas existem pacotes que os usuários destes sistemas podem instalar que trazem algumas das fontes web safe. O pacote mais conhecido é o msttcorefonts, que inclui as seguintes famílias tipográficas:

  • Andale Mono
  • Arial Black
  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings

Jonathan Christopher escreveu um excelente post sobre a tipografia em sistemas baseados em Linux, e criou algumas tabelas de equivalência de fontes de um sistema para outro.

Visto que nem todos os usuários de Linux possuem os mesmos pacotes de fontes, o seu email marketing que especifica uma lista de fontes que devem ser renderizadas para o usuário pode não ficar muito bonito quando o sistema não possui nenhuma das fontes relacionadas em seu font-family ou font face.

Supondo que você tenha utilizado a seguinte declaração de fonte em um texto de seu email marketing:

E, supondo que um usuário de Linux que não possui o pacote msttcorefonts tenha recebido seu email marketing, ele não poderá visualizar o texto na fonte Arial e muito menos na fonte Helvetica, mas visualizará o texto na fonte sem serifa padrão de seu sistema. Você pode, no entanto, prever essa incompatibilidade no momento de criação do HTML de seu email marketing, e oferecer uma alternativa de fonte do Linux nas formatações de fonte do template.

Veja algumas famílias tipográficas presentes em sistemas baseados em Linux:

  • Norasi
  • Rekha
  • Dejavu Serif
  • Nimbus Sans L
  • Mukti Narrow
  • Century Schoolbook
  • Garuda
  • Ubuntu (só vem na distribuição do Ubuntu)
Família tipográfica Ubuntu, que acompanha o sistema de mesmo nome.

As exceções

Existem situações em que a ação de email marketing não precisa levar em consideração a compatibilidade com todos os sistemas operacionais. Ações de endomarketing, por exemplo, que são realizadas dentro de um ambiente controlado – onde é possível saber qual o sistema operacional e os clientes de email usados pelos destinatários – podem ser realizadas usando uma tipografia comum a todas essas pessoas.

O mesmo vale para os remetentes que conhecem bem sua base de contatos e conseguem identificar o sistema operacional utilizado pela maioria. Se você notar que 95% sua lista de contatos usa Windows Vista ou 7, pode criar seus templates de email marketing usando as fontes Cambria, Calibri, Lucida Console e outras presentes nestes sistemas operacionais.

Relatório da plataforma de envios Campaign Monitor, que mostra quais programas de email foram utilizados pelos contatos para abrir um email marketing.

Então…

Ao criar seus templates de email marketing, não esqueça de:

  • Prever espaços para textos escritos no HTML
  • Equilibrar a quantidade de imagens com a de textos no HTML
  • Formatar os textos no HTML oferecendo alternativas à família tipográfica principal
  • Levar em conta as diferenças de pacotes tipográficos entre os sistemas operacionais

Consulte também:

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações