# Texto em maiúsculas: quando ajuda e quando prejudica

[Canonical HTML page](https://gradiently.design/pt-pt/guide/all-caps-typography)

As maiúsculas dão autoridade a uma etiqueta e peso a um título, e transformam um parágrafo num muro. Eis onde merecem o seu lugar, quanto as espaçar e como compô-las bem na web.

## The short version

- O texto em maiúsculas funciona melhor em etiquetas curtas, sobretítulos, botões e títulos de poucas palavras.
- As letras maiúsculas têm todas a mesma altura, por isso as palavras em maiúsculas perdem o contorno variado que ajuda as pessoas a reconhecê-las depressa.
- As maiúsculas precisam de espaçamento extra entre letras: cerca de 0,08em a 0,12em para etiquetas pequenas e 0,01em a 0,03em para títulos grandes.
- Na web, escreve o texto em maiúsculas e minúsculas normais e aplica as maiúsculas com o CSS text-transform, para a cópia, a tradução e os leitores de ecrã receberem as palavras naturais.
- Passagens longas, texto corrido e tudo o que já seja forte devem ficar em maiúsculas e minúsculas normais.

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.

Um post vertical em que o título, a data e os detalhes estão todos compostos em maiúsculas e competem pela atenção

Tudo em maiúsculas: nada se destaca porque tudo está a gritar.

O mesmo post com apenas a data em versaletes e o título e os detalhes em maiúsculas e minúsculas normais

As maiúsculas ficam só para o pequeno sobretítulo. O título e os detalhes leem-se mais depressa em minúsculas normais.

## 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

### Fora das maiúsculas

- Texto corrido e parágrafos
- Títulos com mais de quatro palavras
- Todos os títulos de uma página ao mesmo tempo
- Letras cursivas e decorativas
- Mensagens que têm de parecer calmas ou amáveis
- Texto legal e condições

### Bom em maiúsculas

- Sobretítulos e etiquetas
- Botões e navegação
- Títulos de uma a três palavras
- Letras robustas sem serifa e com serifa em placa
- Saldos, aberturas e sinais urgentes
- Cabeçalhos de tabelas e gráficos

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](https://gradiently.design/pt-pt/guide/title-case-vs-sentence-case) 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](https://gradiently.design/pt-pt/guide/letter-spacing) explica o tracking em geral; para as maiúsculas em particular, usa estes pontos de partida.

| Uso | Tamanho | Espaçamento entre letras |
| --- | --- | --- |
| Etiqueta minúscula ou sobretítulo | 11 a 13 px no ecrã, 28 a 32 px num post de 1080 px | 0,08em a 0,12em |
| Botão ou navegação | 14 a 16 px | 0,04em a 0,08em |
| Subtítulo em maiúsculas | 18 a 24 px | 0,04em a 0,06em |
| Título grande em maiúsculas | 48 px ou mais | 0,01em a 0,03em |
| Palavra de destaque enorme | 120 px ou mais | 0 a 0,02em, verifica os pares à vista |

Valores iniciais em em, para o espaçamento acompanhar o tamanho. Ajusta à vista para o teu tipo de letra.

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](https://gradiently.design/pt-pt/guide/tracking-vs-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.

```css
.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;
}
```

A funcionalidade `case` sobe a pontuação para ficar centrada nas maiúsculas. O `all-small-caps` dá uma alternativa mais discreta às maiúsculas completas.

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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 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](https://gradiently.design/pt-pt/guide/headline-fonts) robusto ajuda nos dois casos. [Composição de texto em posts de redes sociais](https://gradiently.design/pt-pt/guide/text-hierarchy-social) mostra como os níveis se encaixam.

Um story vertical com JÁ ABERTO em maiúsculas grandes, um pequeno sobretítulo em maiúsculas e uma linha de detalhe em minúsculas normais

Duas palavras que funcionam em maiúsculas, com os detalhes mais longos em minúsculas normais por baixo.

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.

## FAQ

### O texto em maiúsculas é mais difícil de ler?

Em mais do que poucas palavras, sim. As maiúsculas têm todas a mesma altura, por isso as palavras perdem o contorno reconhecível e demoram mais a ler.

### Quanto espaçamento entre letras devem ter as maiúsculas?

Cerca de 0,08em a 0,12em para etiquetas pequenas, 0,04em a 0,06em para subtítulos e 0,01em a 0,03em para títulos grandes.

### Devo escrever em maiúsculas ou usar text-transform uppercase?

Usa `text-transform: uppercase` em texto normal. A cópia, a tradução e os leitores de ecrã recebem então as palavras naturais.

### Os títulos em maiúsculas parecem um grito?

Os longos, sim. Uma a três palavras em maiúsculas soam confiantes; uma frase inteira soa a grito.