Por que a tipografia da sua UI parece júnior: 6 correções com valores exatos
Seis erros de tipografia que fazem uma interface parecer júnior, e a correção sênior para cada um com os números exatos: escala tipográfica, uma família, cinza legível, caixa alta, entrelinha e hierarquia.
Tipografia júnior raramente é um grande erro. São seis pequenos, cada um decidido no feeling: um tamanho que pareceu certo, uma fonte que parecia divertida, um cinza que parecia elegante. A tipografia sênior parece calma porque cada uma dessas escolhas segue uma regra. Aqui estão as seis, com os números.
1. Use uma escala tipográfica
✕ Júnior: tamanhos escolhidos no feeling
✓ Sênior: uma proporção, 1.25 a partir de 16
À esquerda, cada tamanho foi escolhido isoladamente: 31, 27, 22, 17, 15, 13. Os intervalos entre eles são irregulares, então alguns níveis parecem quase idênticos e outros dão um salto. À direita, cada tamanho é o anterior vezes 1.25: 16, 20, 25, 31, 39. Os passos são uniformes, então cada nível é claramente diferente do próximo.
Uma proporção entre 1.2 e 1.333 serve para a maioria das interfaces. Escolha uma, anote, e nunca digite um tamanho que não esteja na lista. Em CSS isso vira um pequeno conjunto de variáveis, e no Figma um conjunto de estilos de texto. Nosso guia da escala tipográfica modular explica como escolher a proporção.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. Uma família, dois pesos
Fim de semana em Lisboa
um pequeno diário de viagemTrês dias, dois bairros e um passeio de bonde bem longo.
LEIA MAIS✕ Júnior: quatro fontes em um card
Fim de semana em Lisboa
Um pequeno diário de viagemTrês dias, dois bairros e um passeio de bonde bem longo.
Leia mais✓ Sênior: uma família, regular e negrito
Toda fonte nova traz sua própria personalidade, e quatro personalidades em um card brigam entre si. O leitor não sabe qual delas é a marca. Uma família em dois pesos, regular para leitura e negrito para títulos, basta para construir todos os níveis que uma tela precisa.
Se quiser uma segunda família, dê a ela uma única função, como só títulos, e mantenha assim em todo lugar. Nunca adicione uma fonte para deixar um elemento "especial".
3. Cinza que dá para ler
Seu pedido está a caminho
Chegada entre 14:20 e 14:40.Avisaremos por SMS quando o entregador estiver perto.
✕ #B0B0B0 no branco: difícil de ler
Seu pedido está a caminho
Chegada entre 14:20 e 14:40.Avisaremos por SMS quando o entregador estiver perto.
✓ #6B6B6B no branco: fácil de ler
Cinza claro parece refinado em um arquivo de design num monitor brilhante. Num celular ao ar livre, ele some. O horário de chegada à esquerda é a linha mais útil do card e a mais difícil de ler.
#6B6B6B ainda parece discreto ao lado do título preto, e continua legível. Como regra, o texto secundário no branco não deve ser mais claro que cerca de #767676, o cinza mais claro que passa no mínimo de acessibilidade para texto de corpo.
4. Caixa alta só para rótulos
Atualizamos nossos termos. Revise as mudanças antes do seu próximo pedido.
✕ Júnior: uma frase em maiúsculas
NOVIDADE
Atualizamos nossos termos
Revise as mudanças antes do seu próximo pedido.
✓ Sênior: rótulo em maiúsculas, texto em caixa de frase
Maiúsculas eliminam o formato das palavras. Em minúsculas, as letras altas e baixas dão a cada palavra um contorno que o olho reconhece; em maiúsculas toda palavra é um retângulo, então a frase precisa ser lida letra por letra. Por isso um parágrafo em caixa alta parece grito e demora mais para ler.
Maiúsculas funcionam para o que foram feitas: rótulos curtos de uma a três palavras, como uma tag de seção, um status ou um botão. Tudo que for mais longo vai em caixa de frase.
5. Títulos justos, corpo arejado
O espaçamento é parte da tipografia
Entrelinha apertada transforma um parágrafo em uma parede. Dê espaço para o texto respirar e mantenha os títulos compactos.
✕ Júnior: título solto, corpo apertado
O espaçamento é parte da tipografia
Entrelinha apertada transforma um parágrafo em uma parede. Dê espaço para o texto respirar e mantenha os títulos compactos.
✓ Sênior: título em 1.1, corpo em 1.5
A entrelinha tem funções opostas em tamanhos diferentes. Títulos grandes já têm bastante espaço dentro das letras, então um título em 1.1 se sustenta como uma única forma. Texto pequeno de corpo precisa de espaço entre as linhas para o olho achar o começo da próxima, por isso recebe 1.5.
A versão júnior faz o contrário, muitas vezes porque uma única entrelinha foi aplicada a tudo. Defina dois valores e use-os em todo lugar: de 1.1 a 1.2 para títulos, de 1.4 a 1.6 para texto de corpo.
6. Tamanho, peso, cor, espaço
Pedido #2841
EntregueHoje, 14:203 itensTotal R$ 42,80
✕ Júnior: tudo em negrito, um só tamanho
● Entregue
Pedido #2841
Hoje, 14:20 · 3 itensTotal R$ 42,80
✓ Sênior: quatro ferramentas, uma ordem clara
Quando tudo é negrito, nada é. O card júnior tem cinco linhas com o mesmo tamanho e peso, então o leitor precisa ler todas para achar a que importa.
O card sênior usa quatro ferramentas, cada uma um pouco: o número do pedido é maior, o status ganha cor e um ponto, os detalhes passam para cinza, e o espaço separa o total. Nenhuma ferramenta é forçada demais, e é por isso que parece calmo. Mais sobre isso em hierarquia tipográfica.
As seis correções em uma tabela
| Júnior | Sênior | O valor |
|---|---|---|
| Tamanhos escolhidos no feeling | Uma escala tipográfica | 1.25 a partir de 16: 20, 25, 31, 39 |
| Várias fontes | Uma família, dois pesos | Regular e negrito |
| Texto em cinza claro | Cinza legível | #6B6B6B no branco, nunca mais claro que #767676 |
| Frases em maiúsculas | Maiúsculas para rótulos curtos | De uma a três palavras |
| Uma entrelinha para tudo | Duas entrelinhas | Títulos 1.1, corpo 1.5 |
| Tudo em negrito | Quatro ferramentas de hierarquia | Tamanho, peso, cor, espaço |
FAQ
Qual é uma boa escala tipográfica para UI?
Uma proporção entre 1.2 e 1.333 a partir de uma base de 16 px. Uma proporção de 1.25 dá 16, 20, 25, 31 e 39 px, níveis suficientes para a maioria das telas.
Quantas fontes uma UI deve usar?
Uma família basta, usada em dois pesos. Adicione uma segunda família apenas com uma função fixa, como títulos, e use-a do mesmo jeito em todo lugar.
Qual entrelinha o texto de corpo deve ter?
Por volta de 1.5 para texto de corpo e de 1.1 a 1.2 para títulos grandes.
Que cinza é legível no branco?
#767676 é o cinza mais claro que passa no mínimo da WCAG para texto de corpo no branco. #6B6B6B dá um pouco mais de margem e ainda se lê como secundário.
O texto da UI deve ficar todo em maiúsculas?
Só em rótulos curtos de uma a três palavras. Textos mais longos em maiúsculas são mais lentos de ler porque as palavras perdem o formato.
Fontes
- Escala tipográfica: 16 × 1.25ⁿ = 20, 25, 31,25 e 39,06, mostrados arredondados.
- Contraste no branco, calculado com a fórmula do WCAG 2: #B0B0B0 2,2 para 1, #767676 4,5 para 1, #6B6B6B 5,3 para 1. A WCAG exige 4,5 para 1 para texto de corpo (1.4.3 Contrast (Minimum)).
- Publicado originalmente como carrossel no UX Brainy.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
