Texto em caixa alta: quando as maiúsculas ajudam e quando atrapalham

O texto em caixa alta ajuda quando é curto: um sobretítulo acima de um título, um rótulo, um botão, uma data ou um título de duas ou três palavras. Atrapalha quando se alonga. As maiúsculas têm todas a mesma altura, então uma palavra em caixa alta vira um retângulo liso em vez de uma forma reconhecível, e uma frase inteira assim é mais lenta de ler e soa como grito. Usadas com moderação e com um pouco de espaçamento extra, as maiúsculas trazem ordem e autoridade; usadas para tudo, achatam a hierarquia.

Por que a caixa alta é mais difícil de ler

As letras minúsculas têm ascendentes (b, d, h, k) e descendentes (g, p, y). Juntas, elas dão a cada palavra um contorno característico, e leitores experientes usam esse contorno para reconhecer palavras conhecidas sem soletrá-las. Em maiúsculas, todas as letras ficam entre as mesmas duas linhas. O contorno vira uma caixa, e o leitor precisa olhar com mais atenção para cada letra. Em duas ou três palavras, tudo bem. Num parágrafo, cansa.

Quando a caixa alta funciona

• Sobretítulos e chapéus: uma categoria ou data pequena acima do título, como NOVIDADE ou EPISÓDIO 12. As maiúsculas dizem ao leitor que aquilo é um rótulo, não conteúdo.
• Navegação e botões: palavras curtas e fáceis de percorrer, em que todos os itens são do mesmo tipo.
• Títulos curtos de uma a três palavras: PROMOÇÃO, ABERTO, ESGOTADO. A forma do bloco passa a fazer parte do design.
• Logotipos e logos: muitos logos fortes são compostos em maiúsculas, em que a palavra é vista como uma imagem fixa em vez de lida.
• Rótulos de dados e cabeçalhos de tabela: cabeçalhos curtos em maiúsculas acima das colunas os separam dos valores abaixo.

Quando a caixa alta atrapalha

As fontes cursivas merecem um aviso especial: as maiúsculas delas são desenhadas para começar palavras, não para ficarem juntas, e uma palavra em maiúsculas cursivas muitas vezes fica quase ilegível. O tom também importa. As maiúsculas soam altas, o que combina com uma promoção e prejudica um pedido de desculpas. Se você está decidindo entre estilos de maiúsculas para títulos de forma geral, caixa de frase ou de título trata das opções mais discretas.

Quanto espaçamento entre letras a caixa alta precisa

As fontes são espaçadas para minúsculas. Maiúsculas lado a lado, com seus lados retos e formas largas, parecem apertadas no espaçamento padrão. Abrir o tracking dá espaço a cada letra e torna a palavra mais fácil de percorrer. Quanto menor o texto, mais espaço ele precisa. Espaçamento entre letras explica o tracking em geral; para maiúsculas especificamente, use estes pontos de partida.

Maiúsculas grandes também podem precisar de kerning manual em pares difíceis como AV, LT e TY, em que o espaço padrão parece largo demais. Tracking e kerning explica a diferença entre os dois ajustes.

Como usar text-transform uppercase no CSS

Escreva as palavras em caixa normal no HTML e aplique as maiúsculas com CSS. Assim a cópia, os resultados de busca e as ferramentas de tradução recebem texto natural, e você evita o risco de um leitor de tela tratar uma palavra digitada em maiúsculas como sigla e soletrá-la. Também permite mudar de ideia depois sem redigitar nada.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
  /* Raise hyphens, brackets and colons to suit capitals, if the font has it */
  font-feature-settings: "case" 1;
}

/* Small capitals: lowercase letters drawn as smaller capitals */
.label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

Defina também o atributo lang da página. O text-transform segue regras de idioma, o que importa em palavras como o i com ponto do turco, e a referência do MDN explica como cada idioma é tratado. Rótulos traduzidos costumam ser mais longos que em inglês, e as maiúsculas os deixam ainda mais largos, então deixe folga em botões e abas.

Caixa alta em posts para redes sociais

No celular, maiúsculas em tamanhos pequenos podem resistir melhor que minúsculas pequenas, porque as formas são mais simples. Isso faz da caixa alta uma boa escolha para os detalhes miúdos de um post: uma data, um perfil, o número da página num carrossel. Para o título, use maiúsculas só se ele for muito curto; caso contrário, a caixa de frase é lida mais rápido no instante que alguém dedica a um post. Uma fonte para títulos robusta ajuda de qualquer jeito. Hierarquia de texto em posts mostra como os níveis se encaixam.

No Gradiently, o Designer escreve títulos e detalhes para você e os monta no seu Mark, e cada palavra continua editável no Studio depois. A Tinta automática mantém rótulos pequenos em maiúsculas tão legíveis quanto o título, escolhendo letra clara ou escura para cada linha a partir da paleta do Mark.