Espaço em branco (whitespace): o que é, tipos e como usá-lo em sites e emails
O espaço vazio que deixa seu design mais fácil de ler
O espaço em branco (em inglês, whitespace ou white space) é a área vazia entre os elementos de um design: ao redor de textos, imagens, botões e margens. Ele não precisa ser branco. É qualquer espaço sem conteúdo, seja qual for a cor do fundo.
Longe de ser espaço desperdiçado, é o que permite que um design seja lido com facilidade. Ele separa os elementos uns dos outros, indica o que é importante e dá descanso à vista.
Para que serve o espaço em branco?
Melhora a leitura. As margens e o entrelinhamento evitam que o texto fique amontoado. Um parágrafo com respiro é lido mais rápido do que um bloco compacto.
Organiza a informação. O espaço agrupa o que vai junto e separa o que é diferente. O leitor entende a estrutura sem precisar de linhas nem caixas.
Direciona a atenção. Um botão ou um título cercado de espaço se destaca mais do que um espremido entre outros elementos. É uma forma de dizer “olhe aqui”.
Transmite qualidade. Um design limpo parece mais caprichado e mais fácil de usar. Por isso as marcas de alto padrão costumam deixar muito espaço vazio.
Crie emails que respiram
Crie sua conta grátis no Mailrelay: ajuste margens, espaçadores e preenchimentos no editor de arrastar e soltar, sem mexer em código.
Tipos de espaço em branco
| Tipo | O que é | Exemplo |
|---|---|---|
| Micro | O espaço pequeno entre letras, linhas e parágrafos | O entrelinhamento de um texto |
| Macro | O espaço grande entre blocos e ao redor do design | A margem ao redor de um título ou de uma imagem |
| Ativo | O que é deixado de propósito para destacar ou separar algo | O espaço ao redor de um botão de compra |
| Passivo | O que surge naturalmente ao diagramar | O espaço que sobra no final de um parágrafo curto |
Os quatro trabalham juntos. O microespaço faz o texto ser lido com facilidade. O macroespaço organiza a página. O ativo é o que você usa para guiar o leitor.
Espaço em branco em um site
Em um site, o espaço em branco ajuda o visitante a encontrar em segundos o que procura. Um bom exemplo é a página inicial de um buscador: quase tudo é espaço vazio, e a caixa de pesquisa fica no centro.
Em uma landing page, deixar espaço ao redor do formulário e do call to action evita distrações. No celular, isso é ainda mais importante: com pouca tela, é fácil tocar sem querer nos elementos amontoados. Saiba mais em responsive design.
Espaço em branco no email
Em um email o espaço é mais limitado, e cada cliente de email exibe o design do seu jeito. Estas são as dicas principais:
- Uma ideia por bloco. Separe cada seção (notícia, produto, oferta) com um espaço bem visível.
- Margens generosas ao redor do botão. O botão principal deve ser visto logo de cara, sem nada colado nele.
- Parágrafos curtos com entrelinhamento. De duas a quatro linhas e com espaço entre eles.
- Menos elementos. Se tudo disputa a atenção, nada se destaca. Tire o que não ajuda o objetivo do email.
- Teste no celular. O que no computador parece espaço de sobra pode ficar apertado no celular.
Um layout em blocos, como o do design de email modular, facilita manter o mesmo espaçamento em todos os seus envios.
Espaços em branco em HTML e CSS
Se você procura o termo técnico: em HTML, o navegador junta vários espaços seguidos em um só. Para forçar um espaço que não seja juntado nem quebre a linha, usa-se a entidade . Em CSS, o espaço entre os elementos é controlado com margin (fora do elemento) e padding (dentro), e a propriedade white-space define como são tratados os espaços e as quebras de linha do texto.
No design de sites e emails, é melhor criar o espaço com margens e preenchimentos, e não com linhas vazias ou vários seguidos: o resultado é mais limpo e se adapta melhor a cada tela.
Erros comuns
Preencher cada espaço vazio. Achar que espaço vazio é espaço perdido leva a designs saturados.
Espaço sem critério. Se as margens mudam de um bloco para outro, o design parece desleixado. Use sempre as mesmas medidas.
Deixar espaço demais. Se o leitor precisa rolar muito para encontrar o conteúdo, o espaço deixa de ajudar.
Esquecer o celular. Um design que respira no computador pode ficar apertado em uma tela pequena.
Como o Mailrelay ajuda você
No editor de newsletters do Mailrelay, você controla o espaço sem mexer em código:
- O bloco Espaçador adiciona espaço entre blocos e permite escolher a altura em pixels.
- O Divisor desenha uma linha para separar seções.
- Nos textos e botões, você ajusta o preenchimento (opção Dimensão) e a altura da linha (opção Tipografia).
Você também pode partir de um template de email já diagramado e enviar um teste para si mesmo para ver como fica no celular. Tudo isso está incluído na conta gratuita, com a qual você pode enviar até 80.000 emails por mês.
Comece grátis com o Mailrelay
Até 80.000 emails por mês, editor de arrastar e soltar e suporte humano.
Perguntas frequentes
O que é o espaço em branco no design?
É a área vazia entre os elementos de um design (textos, imagens, botões e margens). Serve para que o conteúdo seja lido com mais facilidade e para destacar o que é importante.
O que significa whitespace?
É o termo em inglês para espaço em branco. Também se escreve white space e, em português, às vezes é chamado de espaço negativo.
O espaço em branco precisa ser branco?
Não. É qualquer área sem conteúdo, seja qual for a cor do fundo: pode ser cinza, preto ou uma cor da marca.
Qual é a diferença entre microespaço e macroespaço em branco?
O microespaço é o pequeno, entre letras, linhas e parágrafos. O macro é o grande, entre blocos e ao redor do design.
Como adicionar um espaço em branco em HTML?
Com a entidade para um espaço fixo, e com margin e padding em CSS para separar os elementos.