Fundo branco em design: quando o espaço vazio é a melhor escolha

O fundo branco é a melhor escolha quando o que está por cima merece toda a atenção: um produto, uma fotografia, um parágrafo longo, uma frase que tem de acertar em cheio. Falha quando o branco é escolhido por defeito, porque então parece uma página que ninguém terminou. A diferença resume-se a três decisões: que branco, quanto espaço e um pequeno detalhe que mostra a quem vê que o vazio foi propositado.

Quando um fundo branco é a escolha certa

O branco não tem disposição própria, e é essa a sua força. Sai do caminho. Por isso é o fundo natural para tudo o que tem cor ou textura próprias, e o pior fundo para o que precisa de atmosfera para se sustentar.

Se o teu design está do lado direito da tabela, um fundo de cor suave ou um gradiente delicado costuma servi-lo melhor. Os fundos minimalistas apresentam opções discretas além do branco, e o design em modo escuro trata do extremo oposto.

Escolhe um branco sujo, não branco puro

O #ffffff puro é a coisa mais brilhante que um ecrã consegue mostrar. Para o fundo de uma fotografia, serve; para uma página que alguém lê durante dois minutos, encandeia. Um branco sujo baixa um pouco o brilho e dá à página uma temperatura. Os brancos quentes parecem impressos, calmos e humanos. Os frios parecem clínicos, técnicos e precisos. Escolhe o que combina com aquilo que vendes.

Dá espaço às palavras

O espaço em branco não é o que sobra. É uma decisão de layout, e só parece intencional quando é generoso. Uma regra prática: margens de pelo menos 8 por cento do lado mais curto, ou seja, 86 px numa publicação de 1080×1350, e mais espaço entre grupos do que dentro deles. Um título, uma linha curta por baixo e um pequeno detalhe no fundo bastam para uma publicação.

A hierarquia importa mais no branco do que em qualquer outro fundo, porque não há cor a guiar o olhar. Usa o tamanho e o peso para ordenar as palavras, como se descreve em hierarquia visual, e mantém-te numa só família tipográfica se puderes.

Cor do texto sobre fundo branco

O preto puro sobre branco puro tem o contraste mais alto que um ecrã consegue mostrar, mais do que a leitura precisa, e pode parecer severo. Um quase preto com um toque da temperatura do fundo, como #1c1917 sobre um branco quente ou #0f172a sobre um frio, ainda ultrapassa folgadamente todos os limiares de acessibilidade. Para texto corrido, mantém uma razão de contraste de pelo menos 4,5:1; o artigo sobre contraste de cor e acessibilidade explica como a verificar.

Como evitar que um fundo branco pareça inacabado

O risco do branco é parecer uma tela vazia em vez de uma tela escolhida. Um só detalhe discreto chega para o resolver. Escolhe um, não todos.

• Um grão ténue com intensidade muito baixa, para que o branco se leia como uma superfície. Vê a textura de grão.
• Uma luz suave num canto, um branco quente a esbater para um creme ligeiramente mais profundo num canto.
• Um filete fino ou uma borda delgada na cor da tua tinta, com poucos píxeis de largura.
• Uma cor de destaque usada uma só vez, num preço, numa data ou num botão.
• Um toque de papel para marcas impressas ou artesanais; a textura de papel mostra como.

Um fundo branco em CSS

Na web, define o branco sujo uma só vez como variável para que todas as secções o partilhem, e dá às imagens um fundo equivalente para que as fotografias de produto em branco puro não apareçam como caixas sobre a cor do teu papel.

:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

Se queres um aspeto branco com um pouco mais de carácter, os Marks claros do Gradiently são um bom ponto de partida: fundos suaves e pálidos com material e luz reais, em que a zona mais calma se desloca para trás das tuas palavras e a Tinta automática mantém cada linha suficientemente escura para se ler. Podes criar designs com qualquer Mark livre sem custo; reserva o que mais gostares quando estiveres pronto para exportar.