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

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

As maiúsculas dão autoridade a um rótulo e peso a um título, e transformam um parágrafo num muro. Veja onde a caixa alta merece o seu lugar, quanto espaçá-la e como aplicá-la direito na web.

## The short version

- O texto em caixa alta funciona melhor em rótulos curtos, sobretítulos, botões e títulos de poucas palavras.
- As letras maiúsculas têm todas a mesma altura, então palavras em caixa alta perdem o contorno variado que ajuda as pessoas a reconhecê-las rapidamente.
- A caixa alta precisa de espaçamento extra entre letras: cerca de 0,08em a 0,12em em rótulos pequenos e 0,01em a 0,03em em títulos grandes.
- Na web, digite o texto em caixa normal e aplique as maiúsculas com text-transform no CSS, para que cópia, tradução e leitores de tela recebam as palavras naturais.
- Trechos longos, texto corrido e qualquer coisa que já seja chamativa devem ficar em caixa de frase.

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.

Um post retrato em que o título, a data e os detalhes estão todos em letras maiúsculas e disputam a atenção

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

O mesmo post com só a data em maiúsculas pequenas e o título e os detalhes em caixa de frase

Maiúsculas só no sobretítulo pequeno. O título e os detalhes são lidos mais rápido em caixa de frase.

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

### Deixe fora da caixa alta

- Texto corrido e parágrafos
- Títulos com mais de umas quatro palavras
- Todos os títulos de uma página ao mesmo tempo
- Fontes cursivas e decorativas
- Mensagens que precisam soar calmas ou gentis
- Textos jurídicos e termos

### Bom em caixa alta

- Sobretítulos e rótulos
- Botões e navegação
- Títulos de uma a três palavras
- Fontes sem serifa e egípcias robustas
- Promoções, inaugurações e avisos urgentes
- Cabeçalhos de tabelas e gráficos

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

| Uso | Tamanho | Espaçamento entre letras |
| --- | --- | --- |
| Rótulo ou sobretítulo minúsculo | 11 a 13 px na tela, 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 caixa alta | 18 a 24 px | 0,04em a 0,06em |
| Título grande em caixa alta | 48 px ou mais | 0,01em a 0,03em |
| Palavra de display enorme | 120 px ou mais | 0 a 0,02em, confira os pares a olho |

Valores iniciais em em, para que o espaçamento acompanhe o tamanho. Ajuste a olho para a sua fonte.

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

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

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

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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 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](https://gradiently.design/pt-br/guide/headline-fonts) robusta ajuda de qualquer jeito. [Hierarquia de texto em posts](https://gradiently.design/pt-br/guide/text-hierarchy-social) mostra como os níveis se encaixam.

Um story vertical com ABERTO em maiúsculas grandes, um sobretítulo pequeno em maiúsculas e uma linha de detalhe em caixa de frase

Uma palavra que funciona em maiúsculas, com os detalhes mais longos em caixa de frase embaixo.

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.

## FAQ

### Texto em caixa alta é mais difícil de ler?

Com mais de algumas palavras, sim. As maiúsculas têm uma única altura, então as palavras perdem o contorno reconhecível e levam mais tempo para serem lidas.

### Quanto espaçamento entre letras a caixa alta deve ter?

Cerca de 0,08em a 0,12em em rótulos pequenos, 0,04em a 0,06em em subtítulos e 0,01em a 0,03em em títulos grandes.

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

Use `text-transform: uppercase` sobre texto em caixa normal. Assim a cópia, a tradução e os leitores de tela recebem as palavras naturais.

### Títulos em caixa alta parecem um grito?

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