Fontes seguras para e-mail: pilhas que funcionam em toda caixa de entrada | We.Inc
Pilhas de fontes para e-mail HTML que funcionam no Gmail, Outlook e Apple Mail, quais caixas de entrada carregam web fonts e um preview para testar cada pilha no seu próprio aparelho.
Fontes seguras para e-mail são fontes que já vêm instaladas no Windows e no macOS, como Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman e Courier New. Como o Gmail e o Yahoo Mail ignoram web fonts personalizadas, escreva todo font-family como uma pilha que termina em uma delas e em uma família genérica.
Fontes instaladas no Windows 11 e no macOS Sequoia
Fonte
Tipo
Boa para
Arial
Sem serifa
Corpo de texto, o padrão mais seguro
Verdana
Sem serifa
Texto pequeno; as letras largas continuam legíveis
Tahoma
Sem serifa
Rótulos e rodapés compactos
Trebuchet MS
Sem serifa
Títulos com um pouco de personalidade
Georgia
Serifada
Newsletters editoriais e textos longos
Times New Roman
Serifada
Comunicados formais
Courier New
Monoespaçada
Códigos, números de pedido, recibos
Um e-mail não pode baixar fontes como uma página web faz em todas as caixas de entrada. O que o leitor vê depende do app de e-mail e das fontes do aparelho dele, então o segredo é uma pilha de fontes que se degrada com elegância. Escolha uma pilha abaixo para ver o preview com o seu próprio texto e copiar o CSS.
Escolha uma pilha. O preview usa a fonte da pilha que o seu aparelho tiver, exatamente como um app de e-mail faria.
Digite a linha de assunto ou o título no texto de exemplo e ajuste o tamanho.
Copie a linha font-family e coloque-a em um estilo inline em cada célula de texto, não só em um bloco style.
Envie um teste para as caixas de entrada que a sua lista realmente usa, já que a renderização muda de app para app.
Coloque o font-family inline em todo td ou p que tenha texto, para que cada bloco de texto leve a própria pilha em vez de depender de um bloco style.
Use aspas em nomes de fonte com espaços, como "Trebuchet MS", e termine toda pilha com uma família genérica como sans-serif ou serif.
Se carregar uma fonte da marca com @font-face, escolha uma alternativa segura com largura parecida para que as quebras de linha não mudem muito.
Segoe UI vem com o Windows mas não com o macOS, e Helvetica vem com o macOS mas não está na lista do Windows 11. Combine as duas com Arial em uma pilha.
Perguntas frequentes
Quais fontes são seguras para e-mail HTML?
Fontes presentes nos dois grandes sistemas de desktop: Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman e Courier New aparecem na lista de fontes do Windows 11 da Microsoft e na lista de fontes do macOS Sequoia da Apple.
O Gmail aceita web fonts personalizadas?
Não. O caniemail.com lista @font-face como não suportado no Gmail, que usa as próprias fontes no lugar. A alternativa da sua pilha é o que os leitores do Gmail veem, então escolha com cuidado.
Quais apps de e-mail mostram web fonts?
Segundo o caniemail.com, Apple Mail no macOS e no iOS, Thunderbird e ProtonMail suportam @font-face. Gmail, Yahoo Mail e AOL não suportam, e o suporte do Outlook.com aparece como parcial.
Por que o Outlook no Windows mostra Times New Roman?
O Outlook clássico para Windows aceita a regra @font-face mas ignora fontes remotas, e o caniemail.com observa que o texto pode então cair para Times New Roman. Uma fonte segura mais cedo na pilha evita isso.
Qual deve ser o tamanho do texto no corpo do e-mail?
Não existe regra oficial. Muitos designers usam de 14 a 16 pixels no corpo do texto e mais nos títulos; teste no celular, onde texto pequeno é mais difícil de ler.
Como uma fonte da pilha é escolhida
font-family é uma lista de prioridade. O app de e-mail a percorre da esquerda para a direita e usa a primeira fonte que encontrar, caractere por caractere, então uma pilha atende todos os leitores desde que termine em uma fonte que todos têm.
O MDN recomenda sempre fechar a lista com uma família genérica como sans-serif. Se nada mais corresponder, o app ainda escolhe uma fonte sensata em vez da própria serifada padrão.
Usando uma fonte da marca mesmo assim
Você pode declarar uma web font em um bloco style para os apps que a suportam e listar fontes seguras depois dela. Os leitores no Apple Mail veem a fonte da marca e os leitores no Gmail veem a alternativa.
Mantenha textos importantes, como preços e botões, como texto real e não como imagens de texto. Eles continuam legíveis com as imagens desligadas e funcionam com leitores de tela.
Quais caixas de entrada carregam web fonts
Suporte a @font-face segundo o caniemail.com, atualizado pela última vez em 19 de dezembro de 2023. Confira a página atual antes de confiar nisso, porque os apps de e-mail mudam.
Suporte a @font-face por cliente de e-mail
Cliente de e-mail
@font-face
Apple Mail (macOS 12.2 e posteriores, iOS 10.3 e posteriores)
Suportado
Thunderbird
Suportado
ProtonMail
Suportado
Outlook para Windows (2003 a 2019)
Regra aceita, fontes remotas ignoradas
Outlook.com
Parcial
Gmail
Não suportado
Yahoo Mail
Não suportado
AOL
Não suportado
Código de fontes para e-mail para copiar
Pilha de fontes inline em uma célula de tabela
A pilha fica no estilo inline da própria célula, então não depende de um bloco style no head.
Fonte da marca com alternativa segura
Apps que suportam @font-face mostram a fonte da marca; os demais caem para Trebuchet MS, Arial e, por fim, qualquer sans-serif.
Preview de pilhas de fontes para e-mail
Escolha uma pilha e digite o seu próprio texto. O preview usa as fontes instaladas neste aparelho, do mesmo jeito que um app de e-mail escolhe na pilha.
Pilha de fontes
Texto de exemplo
Tamanho: {n}px
CSS para colocar inline
Seu pedido está a caminho. Acompanhe quando quiser pela sua conta.