Medidas de uma newsletter: tamanho, largura e 10 dicas para diagramá-la bem
A tabela de medidas, como o email aparece em cada programa de email e um checklist para não errar
Quais medidas uma newsletter deve ter? Entre 600 e 640 pixels de largura, imagens com o dobro da resolução e menos de 102 KB de HTML para que o Gmail não a corte.
A altura não tem limite, mas o que importa precisa aparecer na primeira tela.
Com essas três medidas, você já pode começar a diagramar. Mas uma newsletter que fica bem no seu computador pode quebrar no celular, no Outlook ou no modo escuro.
Neste guia, você encontra a tabela completa de medidas, como o seu email aparece em cada programa de email e as 10 dicas para diagramá-lo sem surpresas.
Estas são as medidas de email marketing que recomendo em 2026. Elas servem tanto se você diagrama à mão em HTML quanto se usa um editor visual.
| Elemento | Medida recomendada | Por quê |
|---|---|---|
| Largura do email | 600-640 px | Aparece inteiro no painel de leitura dos programas de desktop e se adapta bem ao celular |
| Altura do email | Sem limite fixo | O que decide se a pessoa continua lendo é a primeira tela: uns 300-500 px |
| Imagem de cabeçalho | 600 × 200-300 px (enviada com 1.200 px de largura) | Com o dobro da resolução, fica nítida em telas retina |
| Imagens do corpo | A largura da sua coluna, enviadas com o dobro | Uma imagem de 300 px é enviada com 600 px |
| Peso de cada imagem | Menos de 200 KB, como referência | Carrega rápido mesmo com dados móveis |
| Peso do HTML | Menos de 102 KB | Acima disso, o Gmail corta a mensagem e mostra “[Mensagem cortada]” |
| Tamanho da fonte do texto | 16 px (mínimo de 14 px) | Abaixo de 13 px, o iPhone amplia a fonte e desconfigura o layout |
| Tamanho dos títulos | 22-28 px | Hierarquia clara sem ocupar metade da tela |
| Botões | Pelo menos 44 × 44 px | É a área mínima de toque que a Apple recomenda para tocar com o dedo |
| Pré-cabeçalho (preheader) | 40-100 caracteres | É o que aparece junto ao assunto na caixa de entrada |
Se você guardar só uma ideia, que seja esta: 600 px de largura e menos de 102 KB de HTML.
Com isso, você evita a maioria dos problemas. As demais medidas refinam o resultado.
Por que é preciso diagramar um email com tanto cuidado se um site aparece bem em qualquer navegador? Porque cada programa de email interpreta o código do seu jeito. E nem sempre da forma que você espera.
Segundo o relatório de participação de mercado da Litmus de setembro de 2026, o Apple Mail registra 76,56% das aberturas.
Em seguida vêm o Gmail, com 16,10%, e o Outlook para desktop, com 3,48%.
Atenção ao número da Apple: a proteção de privacidade do Apple Mail abre os emails automaticamente e o infla. Mesmo assim, ele dá uma ideia de onde você precisa testar.
| Programa de email | O que levar em conta ao diagramar |
|---|---|
| Apple Mail (iPhone e Mac) | Bom suporte a HTML e CSS. Aplica o modo escuro e amplia fontes pequenas |
| Gmail (web e app) | Corta as mensagens com mais de 102 KB de HTML e pode inverter as cores no modo escuro |
| Outlook clássico para Windows | Usa o motor do Word: ignora muitas propriedades CSS e precisa de tabelas |
| Novo Outlook e Outlook.com | Motor web, muito mais parecido com um navegador |
| Yahoo Mail | Suporte correto, mas é bom testar os botões e o modo escuro |
O caso mais delicado continua sendo o Outlook clássico.
A Microsoft está migrando seus usuários para o novo Outlook, mas não definiu uma data de fim para o clássico.
Enquanto ele continuar presente em tantas empresas, diagramar com tabelas é o mais prudente.
O que levar em conta antes de criar o design de um email
As medidas do email marketing são a base técnica. Mas, antes de abrir o editor, é bom ter claras três decisões de design.
Fique de olho no peso das imagens
Imagens pesam. Uma newsletter com cinco fotos sem compressão pode levar vários segundos para carregar com dados móveis.
E, se demorar, o leitor vai embora.
Comprima cada imagem antes de enviá-la e não use uma foto de 3.000 px onde ela será exibida com 600.
Você encontra mais detalhes na dica 8.
Use imagens que acompanhem a mensagem
Uma imagem precisa dizer o mesmo que o texto. Se você vende uma viagem para a montanha, a foto de um vale faz parte do trabalho.
Se você promove roupas, mostre as peças.
O que não funciona são as imagens de enfeite. Elas ocupam espaço, pesam e não acrescentam nada ao leitor.
O design simples também funciona
Nem todos os emails precisam de imagens. Em um envio promocional, o email deve ser visual, porque você busca uma compra, um cadastro ou uma reserva.
Mas, se você quer proximidade ou compartilhar uma opinião, um email quase só de texto funciona igualmente bem.
Na hora de criar o design de um email, seja em HTML ou com um editor visual, minha recomendação é sempre a mesma: quanto mais simples, melhor. Não estamos criando uma obra de arte, e sim um email com um objetivo claro e concreto: vender, levar tráfego para o site ou obter respostas. Sim, ele precisa ficar bonito, mas não está ali para distrair o leitor com a sua beleza, e sim para que ele faça o que você busca. Mesmo em um email promocional, uma boa foto do produto e um botão claro valem mais do que dez enfeites. Simples e claro: quase sempre é o melhor conselho.
Jose Argudo, CMO da Mailrelay
A estrutura decide se o leitor entende a sua mensagem nos primeiros segundos. Esta é a que eu recomendo, de cima para baixo:
| Área | O que colocar | Medida aproximada |
|---|---|---|
| Pré-cabeçalho | Uma frase que complemente o assunto | 40-100 caracteres |
| Cabeçalho | Logo e, se necessário, uma imagem principal | 600 × 200-300 px |
| Primeira tela | Título, uma frase de contexto e o botão principal | Os primeiros 300-500 px |
| Corpo | Blocos curtos de texto e imagem, um de cada vez | Colunas de 600 px ou duas de 300 px |
| Chamada para ação | Um botão claro com um verbo | Mínimo de 44 × 44 px |
| Rodapé | Dados da empresa, link de descadastro e aviso legal | Fonte de 12-14 px |
Uma regra que sempre funciona: um email, um objetivo. Se você tem três coisas para contar, priorize uma e deixe as outras para o próximo envio.
E de nada adianta uma boa estrutura se depois você envia o mesmo para toda a sua lista: segmente os seus assinantes para que cada um receba o que lhe interessa.
Diagrame suas newsletters sem programar
Com o editor visual do Mailrelay, você cria newsletters que ficam bem no celular sem escrever uma linha de HTML.
Estas são as 10 dicas que eu reviso em cada newsletter antes de enviá-la.
Algumas são de design e outras são técnicas, mas todas evitam problemas reais.
1. Escolha um design simples e adaptável ao celular
Um design simples fica bem em mais lugares. Use fontes padrão (Arial, Helvetica, Georgia ou Verdana), fundos de cor sólida e uma única coluna no celular.
A maioria dos seus assinantes vai abrir o email no celular.
Por isso o design precisa ser responsivo: que se adapte sozinho à largura da tela.
Se duas colunas não couberem, que passem a ser uma. E, se um botão ficar pequeno, que cresça.
2. Use um HTML simples e adicione uma versão em texto
Quanto mais simples o código, menos surpresas. Nada de JavaScript, formulários nem efeitos que dependam de scripts: os programas de email os bloqueiam por segurança.
Envie sempre uma versão em HTML e outra em texto simples. Se alguém não puder ver o HTML, vai ler o texto.
No Mailrelay, a versão em texto é gerada automaticamente a partir do HTML.
Assim as duas dizem o mesmo, e os filtros não desconfiam de uma mensagem com dois conteúdos diferentes.
3. Diagrame com tabelas
As tabelas continuam sendo a forma mais confiável de diagramar um email. Em um site, você usaria camadas (div) e CSS moderno.
No email, não, porque o Outlook clássico para Windows usa o motor do Word e não entende boa parte desse CSS.
Com tabelas, você controla a largura, as colunas e os espaços em todos os programas. Uma dica: não aninhe mais de três níveis de tabelas.
A partir daí, o código fica difícil de manter e pesa mais.
4. Não passe de 600-640 px de largura
É a medida de email marketing que funciona melhor no desktop e no celular. Os programas de desktop mostram o email em um painel de leitura mais estreito do que a tela.
Com 600-640 px, o email cabe inteiro, sem barra de rolagem lateral.
No celular, um design responsivo reduz essa largura à da tela.
O que não convém é o contrário: criar o design com 800 ou 1.000 px e esperar que ele se adapte.
Os textos ficariam minúsculos no celular.
5. Aplique os estilos inline
Alguns programas de email ignoram os estilos do cabeçalho do email. Por isso, os estilos importantes (cor, tamanho da fonte, margens) vão dentro de cada tag com o atributo “style”.
Assim você garante que o texto apareça igual no Gmail, no Outlook e no Apple Mail.
Os editores visuais, como o do Mailrelay, fazem isso por você ao salvar o design.
6. Prepare bem as suas imagens
As imagens são o que mais quebra em um email. Revise sempre estes quatro pontos:
| O que revisar | Por quê |
|---|---|
| Estilo “display:block” em cada imagem | O Gmail adiciona um espaço em branco entre imagens que ficam juntas |
| Largura e altura definidas no código | Você evita que elas se deformem enquanto carregam |
| Texto alternativo (alt) | Se as imagens estiverem bloqueadas, o leitor sabe o que há ali |
| Formato JPG, PNG ou GIF | São os que todos os programas entendem. WebP ainda não |
E não coloque texto importante dentro de uma imagem. Se ela não carregar, a mensagem desaparece.
Os GIFs animados funcionam, com uma ressalva: o Outlook clássico só mostra o primeiro quadro.
7. Não anexe arquivos
Os anexos complicam a entrega. Os filtros antispam examinam com lupa os arquivos doc, exe ou zip, que além disso aumentam muito o tamanho da mensagem.
Envie o arquivo para o seu site, para o Google Drive ou para o Dropbox e coloque um botão com o link para ele.
Assim o email pesa menos e, além disso, você sabe quantas pessoas fazem o download graças às estatísticas de cliques.
8. Otimize o peso das imagens
Comprimir uma imagem pode reduzir o peso dela pela metade sem que se perceba. Você pode usar ferramentas gratuitas como TinyPNG ou Squoosh, ou exportar do seu programa de edição com qualidade de 70-80%.
Use JPG para fotos e PNG para logotipos ou imagens com fundo transparente.
E envie as imagens com o dobro do tamanho em que serão exibidas: uma imagem de 600 px de largura é enviada com 1.200 px.
Ela ficará nítida em telas retina e, bem comprimida, continuará pesando pouco.
9. Inclua sempre o rodapé legal
O rodapé não é opcional. Na Espanha, a LSSI obriga a identificar o remetente e a oferecer uma forma simples e gratuita de cancelar a inscrição em cada comunicação comercial.
O RGPD exige, além disso, informar como você trata os dados.
Inclua no rodapé o nome e o endereço da sua empresa, o link de descadastro e um link para a sua política de privacidade.
Desde 2024 o Gmail e o Yahoo, e desde 2025 o Outlook, também exigem o descadastro com um único clique de quem envia em volume.
Você encontra os detalhes no glossário sobre o cabeçalho List-Unsubscribe.
10. Teste antes de enviar
Nunca envie uma newsletter sem testá-la. Mande um email de teste para você mesmo e abra-o no celular e no computador, no Gmail e no Outlook, se puder.
Confira se as imagens carregam, se os links levam aonde devem e se o texto pode ser lido sem dar zoom.
Se você envia para listas grandes, ferramentas como Litmus ou Email on Acid mostram como o email aparece em dezenas de programas ao mesmo tempo.
Teste sua newsletter antes de enviá-la
Envie um email de teste para você mesmo pelo Mailrelay e confira como ele fica antes de mandá-lo para a sua lista.
Modo escuro: como diagramar para que o seu design não quebre
Cada vez mais gente lê os emails no modo escuro.
E cada programa o aplica do seu jeito: alguns só mudam o fundo, outros invertem todas as cores.
Um logo preto sobre fundo transparente pode desaparecer.
Para que a sua newsletter resista à mudança:
- Use logotipos em PNG transparente com um contorno claro, ou com um fundo próprio.
- Evite o preto puro e o branco puro: um cinza muito escuro e um branco quebrado se invertem melhor.
- Não escreva textos importantes dentro de imagens.
- Teste o email com o modo escuro ativado no iPhone e no Gmail.
Outra opção é partir de um design que já seja escuro.
No editor do Mailrelay, você tem templates escuros prontos para usar, inclusive na conta gratuita.
Antes de clicar em “Enviar”, revise esta lista. Vai levar dois minutos.
- A largura é de 600-640 px e o HTML pesa menos de 102 KB.
- O assunto e o pré-cabeçalho se complementam e não são cortados no celular.
- O que importa (título e botão) aparece na primeira tela.
- Todas as imagens têm texto alternativo e estão comprimidas.
- Os botões medem pelo menos 44 × 44 px e os links funcionam.
- O texto tem 14-16 px e pode ser lido sem dar zoom.
- Fica bem no modo escuro.
- O rodapé inclui os seus dados, o link de descadastro e a política de privacidade.
- Você enviou um teste para si mesmo e o revisou no celular e no computador.
E se você não quiser mexer em código? Com o editor visual do Mailrelay, você diagrama a sua newsletter arrastando blocos, e o email se adapta sozinho ao celular.
Você não precisa se preocupar com as tabelas nem com os estilos inline: o editor os gera por você.
Você pode partir de centenas de templates de email, entre eles os de modo escuro, e o editor com IA ajuda você a criar designs e melhorar os seus textos.
A versão em texto simples é gerada automaticamente e você pode enviar testes para si mesmo antes de mandar a campanha.
Tudo isso também está na conta gratuita, com até 80.000 emails por mês e 20.000 contatos, e com suporte humano em todos os planos.
Envie suas campanhas grátis com o Mailrelay
Até 80.000 emails por mês e 20.000 contatos, com suporte humano em todos os planos.
Estas são as dúvidas sobre o tamanho de um email marketing que mais recebemos.
Entre 600 e 640 px de largura, sem uma altura fixa.
O importante é que o título e o botão principal apareçam nos primeiros 300-500 px e que o HTML pese menos de 102 KB.
Quais medidas a imagem de cabeçalho de um email marketing deve ter?
O habitual é 600 × 200-300 px na exibição.
Envie-a com o dobro da resolução (1.200 px de largura) para que fique nítida em telas retina, e comprima-a para que pese menos de 200 KB.
Quanto um email deve pesar?
O código HTML, menos de 102 KB, porque o Gmail corta as mensagens mais pesadas.
As imagens não contam nesse limite, mas é bom que cada uma pese menos de 200 KB para que o email carregue rápido.
Qual tamanho de fonte se usa em um email?
16 px para o texto, com um mínimo de 14 px, e entre 22 e 28 px para os títulos.
Abaixo de 13 px, o iPhone amplia a fonte por conta própria e pode desconfigurar o layout.
Porque o HTML pesa mais de 102 KB. O Gmail mostra só a primeira parte e um link para ver a mensagem completa.
O que fica oculto, como o link de descadastro, muita gente nem chega a ver.
Para evitar isso, limpe o código e tire os blocos que não acrescentam nada.
Sugestões de leitura
Como criar uma newsletter passo a passo
Guia com template e exemplos para criar a sua própria newsletter.
Exemplos de newsletters para se inspirar
13 casos reais e modelos para copiar na sua próxima newsletter.
Emojis em emails e newsletters: como adicioná-los
Como usar emojis no assunto e no texto sem que fiquem estranhos em nenhum programa de email.
Qual é o melhor horário e dia para enviar newsletters
O que dizem os estudos e como encontrar o momento em que a sua lista mais abre os emails.
Jose Argudo
CMO da Mailrelay. Escreve sobre email marketing, copywriting e conversão para PMEs e empreendedores.