As cinco decisões de espaçamento que consertam a maioria das interfaces

Quando uma interface parece errada e você não sabe dizer por quê, a resposta costuma ser o espaçamento. Não a paleta, não a tipografia – os intervalos. O espaçamento é o sistema invisível que diz ao olho o que pertence ao mesmo conjunto, o que está separado e o que mais importa, e ele falha em silêncio: nenhum linter padrão aponta um intervalo de 13px, nenhum revisor escreve “o ritmo está quebrado”. Depois de anos auditando minhas próprias interfaces e as dos outros, quase toda correção de espaçamento que faço é uma das mesmas cinco decisões. {.answer-block}

TL;DR

• Adote uma escala e recuse tudo o que estiver fora dela. 4, 8, 16, 24, 32, 48, 64. Um intervalo de 13px não é uma decisão de design; é deriva.
• O espaço entre grupos precisa superar o espaço dentro dos grupos. Essa única regra da Gestalt substitui a maior parte das bordas e caixas.
• Dê a cada contêiner um único valor de padding, derivado do seu papel (componente 16, card 24, seção 32-48) em vez de acertar cada borda no olho.
• Deixe o espaço em branco criar a hierarquia antes de recorrer aos separadores. Bordas são a aparência que o espaçamento assume quando desiste.
• Conserte o ritmo vertical no nível do texto – line-height 1.5 no mínimo, espaço depois dos títulos menor que o espaço antes deles – ou nada acima disso salva a página.

1. Adote uma escala e recuse tudo o que estiver fora dela

Quais valores você escolhe é a metade menor da primeira decisão; a metade maior é concordar que existe um conjunto de valores. O meu parte de uma base de 4px: 4, 8, 16, 24, 32, 48, 64 – sete valores, um token para cada. (Superfícies densas, como tabelas de dados e barras de ferramentas, às vezes justificam um 12; se a sua justifica, transforme em token. O crime é o valor sem nome, não o oitavo token.)

Os números específicos importam menos que a recusa. Valores arbitrários (13px, 7px, 22px) quebram o ritmo de um jeito que o olho registra como desleixo sem conseguir nomear. A regra que sigo: todo valor de espaçamento vem da escala ou carrega um motivo documentado. Na prática, as exceções documentadas quase nunca sobrevivem à revisão, porque “na hora parecia certo” é exatamente a deriva que a escala existe para evitar.

Uma escala também reduz decisões. Sem ela, cada intervalo é um julgamento novo feito na velocidade da implementação; com ela, quase todo intervalo tem exatamente um token plausível, e a revisão de design discute os casos interessantes em vez da aritmética.

2. Espaço entre grupos > espaço dentro dos grupos

Se você levar uma única frase deste texto: o intervalo entre grupos precisa ser visivelmente maior que o intervalo dentro deles. É a proximidade da Gestalt fazendo trabalho estrutural – o olho lê distância relativa como relação, de forma automática e anterior às palavras.

Um formulário em que o rótulo fica a 8px do seu campo, e os campos ficam a 24px uns dos outros, não precisa de caixas, nem de separadores, nem de fundos coloridos: o agrupamento é evidente por si só. Achate essas distâncias para 16px uniformes e o mesmo formulário vira uma névoa de linhas equidistantes que o usuário precisa interpretar conscientemente. Os mesmos três campos, duas vezes:

grouped (8 within / 24 between)     flattened (16 everywhere)

Name                                Name
[______________]
                                    [______________]

Email                               Email
[______________]
                                    [______________]

Phone                               Phone
[______________]
                                    [______________]

À esquerda, cada rótulo é sem ambiguidade o rótulo do seu campo. À direita, cada rótulo interno flutua à mesma distância de dois campos – a proximidade parou de votar, e quem lê descobre a quem ele pertence pela ordem de leitura, e não pela visão.

O modo de falha é quase sempre compressão no nível errado: alguém aperta o intervalo entre grupos para caber mais acima da dobra, a proporção desaba e então – sentindo o agrupamento se dissolver – acrescenta bordas para restaurá-lo. O que nos leva à quarta decisão. Mas antes:

3. Um padding por contêiner, derivado do papel

Contêineres acumulam padding assimétrico do mesmo jeito que cozinhas acumulam gavetas de bagunça – um empurrãozinho aqui para caber um botão, um ajuste ali por causa de um ícone, até que um card fique com 18px no topo, 14px à esquerda, e ninguém lembre por quê. A solução é uma derivação permanente: o padding de um contêiner vem do seu papel, não do seu conteúdo.

• Componentes (botões, campos, chips): 16px
• Cards e conteúdo agrupado: 24px
• Seções: 32-48px
• Regiões no nível da página e hero: 48-64px

Quando o conteúdo não cabe no padding do papel, é o conteúdo que está errado para o contêiner – divida, encurte ou promova o contêiner um nível. Ajustar o padding para salvar um filho problemático quebra o ritmo de todos os irmãos, e a assimetria se lê como bug mesmo para usuários que jamais vão comentá-la.

4. Espaço em branco antes das bordas

A maioria dos separadores é um pedido de desculpas. A borda embaixo de cada linha de lista, a caixa em volta de cada seção de formulário, o fio entre cada card – cada um deles é espaçamento que desistiu. Fronteiras realmente criam grupos (o princípio de região comum da Gestalt é real), mas são o remédio forte: visualmente barulhento, aditivo e cumulativo. Cada borda é mais uma linha que o olho precisa processar.

Minha ordem de trabalho: tentar primeiro a proporção de proximidade (decisão dois). Se os grupos ainda não se separarem, tentar uma mudança de fundo antes de um traço – um tom de fundo cria uma região sem acrescentar linha, é o agrupamento por região comum na versão mais silenciosa, e ganha de uma borda sempre que um grupo precisa de coesão, mas não de aresta; o zebrado das tabelas é essa regra na forma mais conhecida. Recorra às bordas quando as regiões realmente precisarem de arestas duras – tabelas, regiões editáveis, cards aninhados – e então mantenha a decisão. Uma interface que alterna agrupamento por espaço em branco aqui e agrupamento por borda ali se lê como dois design systems brigando.

O teste que aplico na revisão: apagar toda borda que não esteja marcando uma aresta dura autorizada – tabelas, campos editáveis – e olhar o que sobra. Todo agrupamento que sobreviver era real; tudo o que se dissolver era dívida de espaçamento que as bordas estavam pagando.

5. Conserte o ritmo vertical no nível do texto

Sistemas de espaçamento morrem de baixo para cima. Se o texto corrido roda com line-height 1.2, nenhuma quantidade de espaçamento entre seções salva a página – os próprios parágrafos se leem apertados, e tudo construído sobre eles herda a tensão. O piso: corpo de 16px, line-height 1.5 (até 1.75 em formato longo) e uma medida em torno de 65ch. A parte do line-height é a parte empírica: as diretrizes de acessibilidade citam 1.5 por um motivo, e entrelinha apertada é a assassina de ritmo mais comum na web. O teto de 65ch é prática, não lei: linhas longas podem passar bem em teste isolado, mas o retorno para a linha seguinte fica mais difícil de acertar, e quem lê encontra a parede de texto muito antes de encontrar o argumento.

Acima do parágrafo, a regra que organiza todo o resto: um título fica mais perto do conteúdo que introduz do que do conteúdo que o antecede. Espaço antes maior que espaço depois – normalmente o dobro. Um título flutuando à mesma distância entre seções não pertence a nenhuma; é a assimetria que o prende ao próprio conteúdo. O mesmo título, duas vezes:

bound (before wide / after tight)   floating (equal both sides)

...end of previous section.         ...end of previous section.


Shipping address                    Shipping address
[Street___________]
[City_____________]
                                    [Street___________]
                                    [City_____________]

À esquerda, o título visivelmente possui seus campos. À direita, ele paira entre seções, e quem lê o atribui por convenção em vez de por visão. Esta é a decisão dois de novo, operando dentro da coluna de texto, e é justamente esse o ponto: ritmo vertical não é uma disciplina separada, é a regra de proximidade aplicada na menor escala.

A auditoria

As cinco decisões se comprimem em um checklist de revisão que eu rodo em qualquer tela:

1. Todo intervalo está na escala? (Inspecione os estranhos – são sempre acidentes.)
2. Todo intervalo entre grupos é maior que os intervalos dentro desses grupos?
3. Cada contêiner carrega um único padding derivado do papel?
4. Alguma borda poderia ser apagada depois de corrigir o espaçamento por trás dela?
5. A coluna de texto sustenta o próprio ritmo – line-height 1.5 ou mais, títulos presos ao seu conteúdo?

A maioria das telas falha em duas ou três dessas perguntas, e corrigi-las muda a sensação mais do que qualquer troca de paleta ou de tipografia. Nos meus próprios apps de iOS a primeira pergunta é verificada mecanicamente: antes de um commit sair, o gate de revisão faz grep no diff atrás de números de padding crus, e tudo que não for um token do kit precisa de um motivo nomeado para sobreviver. O espaçamento é onde o ofício se esconde, justamente porque ninguém consegue apontar para ele.

Perguntas frequentes

Qual escala de espaçamento um design system deve usar?

Uma escala com base de 4px – 4, 8, 16, 24, 32, 48, 64 – cobre quase toda necessidade de interface. Os valores exatos importam menos que a exclusividade: todo intervalo vem da escala ou carrega uma justificativa documentada. Valores arbitrários (7px, 13px, 22px) quebram o ritmo visual de um jeito que os usuários sentem, mas não sabem nomear.

Como agrupar elementos de interface sem bordas?

Com a proporção de proximidade: o espaço entre grupos precisa superar visivelmente o espaço dentro deles. Um intervalo de 8px entre rótulo e campo, com 24px antes do próximo rótulo, agrupa um formulário sem nenhuma caixa. Reserve as bordas para regiões que precisam de arestas duras – tabelas, áreas editáveis – e prefira uma mudança de fundo como passo intermediário.

Quanto padding cards e botões devem ter?

Derive do papel do contêiner: ~16px para componentes (botões, campos), 24px para cards, 32-48px para seções, mais para regiões hero. Um valor por contêiner – se o conteúdo não couber no padding do papel, mude o conteúdo ou promova o contêiner em vez de calibrar bordas na mão.

O que é ritmo vertical na tipografia?

O padrão de espaçamento constante ao longo de uma coluna de texto: corpo com no mínimo 16px e line-height de 1.5-1.75, cerca de 65 caracteres por linha e títulos posicionados mais perto do conteúdo que introduzem do que daquele que os antecede. Tudo o que é maior herda desse nível – se os parágrafos estão apertados, nenhum espaçamento entre seções conserta a página.