Texto em maiúsculas: quando ajuda e quando prejudica

O texto em maiúsculas ajuda quando é curto: um sobretítulo acima de um título, uma etiqueta, um botão, uma data ou um título de duas ou três palavras. Prejudica quando se alonga. As maiúsculas têm todas a mesma altura, por isso uma palavra em maiúsculas passa a ser um retângulo simples em vez de uma forma reconhecível, e uma frase delas lê-se mais devagar e soa a grito. Usadas com brevidade e com um pouco de espaçamento extra, as maiúsculas dão ordem e autoridade; usadas para tudo, achatam a hierarquia.

Porque é que as maiúsculas são mais difíceis de ler

As letras minúsculas têm hastes ascendentes (b, d, h, k) e descendentes (g, p, y). Juntas dão a cada palavra um contorno distintivo, e os leitores treinados usam esse contorno para reconhecer palavras familiares sem as soletrar. Em maiúsculas, todas as letras ficam entre as mesmas duas linhas. O contorno passa a ser uma caixa e o leitor tem de olhar com mais atenção para cada letra. Em duas ou três palavras, não faz mal. Num parágrafo, cansa.

Quando as maiúsculas funcionam

• Sobretítulos e antetítulos: uma pequena categoria ou data acima do título, como NOVO ou EPISÓDIO 12. As maiúsculas dizem ao leitor que é uma etiqueta, não conteúdo.
• Navegação e botões: palavras curtas e fáceis de percorrer em que cada item é do mesmo tipo.
• Títulos curtos de uma a três palavras: SALDOS, JÁ ABERTO, ESGOTADO. A forma do bloco passa a fazer parte do design.
• Logótipos e nomes de marca: muitos logótipos fortes são compostos em maiúsculas, onde a palavra se vê como uma imagem fixa em vez de se ler.
• Etiquetas de dados e cabeçalhos de tabelas: cabeçalhos curtos em maiúsculas acima das colunas mantêm-nas distintas dos valores por baixo.

Quando as maiúsculas prejudicam

As letras cursivas merecem um aviso especial: as suas maiúsculas foram desenhadas para começar palavras, não para ficarem juntas, e uma palavra em maiúsculas cursivas é muitas vezes quase ilegível. O tom também conta. As maiúsculas soam alto, o que serve para saldos e prejudica um pedido de desculpa. Se estás a decidir mais em geral entre estilos de maiúsculas para títulos, maiúsculas de frase ou de título trata das opções mais discretas.

Quanto espaçamento entre letras precisam as maiúsculas

Os tipos de letra são espaçados para minúsculas. As maiúsculas lado a lado, com os seus lados retos e formas largas, parecem apertadas no espaçamento predefinido. Abrir o espaçamento dá espaço a cada letra e torna a palavra mais fácil de percorrer. Quanto mais pequeno o texto, mais espaço precisa. Espaçamento entre letras explica o tracking em geral; para as maiúsculas em particular, usa estes pontos de partida.

As maiúsculas grandes podem também precisar de kerning manual em pares difíceis como AV, LT e TY, onde o intervalo predefinido parece demasiado largo. Tracking e kerning explica a diferença entre os dois ajustes.

Usar text-transform uppercase em CSS

Escreve as palavras em maiúsculas e minúsculas normais no HTML e aplica as maiúsculas com CSS. A cópia, os resultados de pesquisa e as ferramentas de tradução recebem então texto natural, e evitas o risco de um leitor de ecrã tratar uma palavra escrita em maiúsculas como sigla e soletrá-la. Também te deixa mudar de ideias mais tarde sem reescrever 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;
}

Define também o atributo lang da página. O text-transform segue as regras de cada língua, o que importa em palavras como o i com ponto do turco, e a referência da MDN indica como cada língua é tratada. As etiquetas traduzidas são muitas vezes mais longas do que em inglês e as maiúsculas alargam-nas ainda mais, por isso deixa espaço nos botões e separadores.

Maiúsculas nos posts de redes sociais

Num telemóvel, as maiúsculas em tamanhos pequenos podem aguentar-se melhor do que minúsculas pequenas, porque as formas são mais simples. Isso faz das maiúsculas uma boa escolha para os pequenos pormenores de um post: uma data, um nome de utilizador, o número de página de um carrossel. Para o título, usa maiúsculas só se for muito curto; caso contrário, as minúsculas normais leem-se mais depressa no instante em que alguém dá atenção a um post. Um tipo de letra para títulos robusto ajuda nos dois casos. Composição de texto em posts de redes sociais mostra como os níveis se encaixam.

No Gradiently, o Designer escreve os títulos e os detalhes por ti e compõe-nos no teu Mark, e todas as palavras continuam editáveis no Studio depois. A Tinta automática mantém as pequenas etiquetas em maiúsculas tão legíveis como o título, escolhendo letra clara ou escura para cada linha a partir da paleta do Mark.