Hierarquia visual e espaço em branco

Antes de ler uma única palavra, o olho já decidiu por onde vai começar. Isso não é intuição da pessoa — é o resultado de decisões visuais que você toma (ou deixa de tomar): tamanho, peso, cor e espaço. Quando nenhuma dessas decisões existe, tudo na tela parece ter a mesma importância, e "tudo importante" na prática significa nada se destaca.

O que cria hierarquia

Quatro sinais fazem o olho notar um elemento antes dos outros, numa fração de segundo:

• Tamanho — maior chama mais atenção que menor.
• Peso — font-weight: 700 pesa mais visualmente que 400.
• Contraste — cor ou luminância bem diferente do que está ao redor.
• Posição — o topo e o início de uma leitura recebem atenção primeiro.

Combinar dois ou três desses sinais no mesmo elemento (por exemplo, um título grande, e pesado, e com cor de destaque) cria uma hierarquia clara sem exigir nada explícito — a pessoa não "decide" ler o título primeiro, ela simplesmente olha pra lá primeiro.

.titulo    { font-size: 1.5rem; font-weight: 700; color: var(--text-forte); }
.subtitulo { font-size: 1rem;   font-weight: 500; color: var(--text-medio); }
.corpo     { font-size: 0.9rem; font-weight: 400; color: var(--text-fraco); }

Espaço em branco não é espaço desperdiçado

Um erro comum de quem começa: olhar pra um espaço vazio na tela e sentir que "precisa preencher com algo". Mas o espaço em branco (whitespace) faz um trabalho ativo — ele separa visualmente o que pertence junto do que não pertence, e dá "respiro" pro elemento que precisa de atenção. Um título cercado de espaço se destaca mais do que o mesmo título espremido entre outros três elementos, mesmo sem mudar uma única propriedade de fonte.

Isso é especialmente verdade em telas densas de informação (dashboards, tabelas): reduzir a quantidade de elementos visíveis ao mesmo tempo, ou aumentar o espaço entre grupos, costuma comunicar mais clareza do que adicionar mais bordas, linhas ou cores pra "organizar visualmente".

Ordem de leitura

Em culturas de leitura ocidental, o olho tende a percorrer uma tela em um padrão parecido com um Z ou um F (mais comum em telas com bastante texto): começa no topo esquerdo, varre pra direita, desce. Isso não é uma regra rígida — é uma tendência que você pode usar a seu favor, posicionando o elemento mais importante (título, ação principal) nos pontos que esse padrão naturalmente visita primeiro.