Tipografia para UI/UX: legibilidade e escala de texto no app

Por que tipografia é um “componente” de UX

Em interfaces, tipografia não é só estética: ela determina velocidade de leitura, compreensão, acessibilidade e previsibilidade. Uma boa escolha tipográfica reduz esforço cognitivo (o usuário “bate o olho” e entende), melhora a escaneabilidade (encontrar informações rapidamente) e evita erros (especialmente em formulários e mensagens críticas).

Escolhendo famílias tipográficas adequadas para apps

1) Priorize legibilidade em telas pequenas

• Sans-serif costuma funcionar melhor em UI por manter formas limpas em tamanhos pequenos.
• Evite fontes muito decorativas, com alto contraste de traço ou detalhes finos (tendem a “quebrar” em telas e em condições de baixa qualidade).
• Prefira famílias com múltiplos pesos (Regular, Medium, Semibold, Bold) e boa cobertura de caracteres (acentos, símbolos, moeda, etc.).

2) Use poucas famílias

• Regra prática: 1 família para quase tudo. Se precisar de contraste, use variação de peso e tamanho antes de adicionar outra família.
• Se usar 2 famílias, defina papéis claros: por exemplo, uma para textos e outra para números/dados (tabelas, métricas) — mas só se houver ganho real.

3) Verifique “características de UI” da fonte

• Altura-x (x-height) maior tende a melhorar leitura em tamanhos pequenos.
• Diferenciação entre caracteres parecidos (I, l, 1; O, 0) é importante em senhas, códigos e valores.
• Espaçamento consistente (tracking/kerning) evita “buracos” visuais em rótulos e botões.

Tamanhos mínimos, altura de linha e comprimento de linha

Tamanho mínimo (mobile)

• Para texto de leitura (corpo): comece em 16px como base segura.
• Para legendas/auxiliares: evite cair abaixo de 12–13px (use com cautela e contraste adequado).
• Para botões e rótulos importantes: geralmente 14–16px ou mais, dependendo do layout.

Dica prática: se você precisa reduzir muito o tamanho para “caber”, o problema costuma ser de layout/quantidade de informação, não de tipografia.

Altura de linha (line-height)

• Para corpo de texto: use cerca de 1.4 a 1.6 do tamanho da fonte (ex.: 16px com line-height 24px).
• Para títulos curtos: pode ser menor, como 1.1 a 1.3, para manter bloco compacto.
• Para textos pequenos (12–13px): aumente um pouco a altura de linha para evitar “empastamento”.

Comprimento de linha (line length)

• Para textos longos, busque algo em torno de 35–70 caracteres por linha (incluindo espaços). Em mobile, isso varia com largura e margens.
• Linhas muito longas cansam; linhas muito curtas quebram o ritmo e aumentam rolagem.

Como aplicar no app: em telas com texto longo, aumente margens laterais e evite blocos “full width” sem respiro.

Pesos, contraste tipográfico e uso de caixa alta/baixa

Pesos (font-weight) com intenção

• Use Regular para corpo.
• Use Medium/Semibold para dar ênfase em rótulos, títulos curtos e botões.
• Evite usar Bold como padrão em muitos elementos: perde hierarquia e pode “gritar”.

Regra prática: se tudo está em negrito, nada está em negrito.

Caixa alta (ALL CAPS) vs. caixa baixa

• Caixa baixa (ou Título Capitalizado com moderação) é mais rápida de ler em frases.
• ALL CAPS pode funcionar em rótulos muito curtos (ex.: “NOVO”), mas reduz legibilidade em textos maiores e pode parecer agressivo.
• Se usar ALL CAPS, aumente levemente o espaçamento entre letras (letter-spacing) para melhorar leitura.

Montando uma escala tipográfica simples (passo a passo)

Uma escala tipográfica define um conjunto pequeno de estilos reutilizáveis. O objetivo é evitar “tamanhos aleatórios” por tela e manter consistência.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

Passo 1: Defina o tamanho base (Body)

• Escolha o corpo: 16px (recomendado como ponto de partida).
• Defina line-height do corpo: 24px (1.5x).

Passo 2: Defina estilos acima (títulos)

• Título (H1): 24px / line-height 32px / Semibold
• Subtítulo (H2): 20px / line-height 28px / Semibold ou Medium

Passo 3: Defina estilos abaixo (auxiliares)

• Legenda/auxiliar: 12–13px / line-height 16–18px / Regular
• Rótulo (label) de campo: 14px / line-height 20px / Medium

Passo 4: Nomeie e documente os estilos

Crie nomes que descrevam função, não tamanho. Exemplo:

• text/title
• text/subtitle
• text/body
• text/caption
• text/label
• text/button

Passo 5: Aplique a escala em uma tela real

Escolha uma tela típica (ex.: lista + detalhes) e aplique somente esses estilos. Se surgir a vontade de criar “mais um tamanho”, tente primeiro resolver com:

• peso (Regular → Medium)
• cor/contraste
• espaçamento (margens/padding)
• quebra de linha e largura do container

Exemplo de escala pronta (tabela)

Consistência entre telas: como evitar “tipografia improvisada”

Use tokens/estilos reutilizáveis

Em vez de configurar tamanho/peso manualmente em cada tela, padronize estilos (tokens). Isso evita divergências como “15px aqui, 16px ali” e facilita ajustes globais.

Mapeie cada componente a um estilo

• Título de tela → text/title
• Título de card → text/subtitle
• Texto de item de lista → text/body
• Metadados (data, status) → text/label ou text/caption
• Texto de botão → text/button

Defina regras de exceção

Exceções devem ser raras e justificadas (ex.: tela de onboarding com headline maior). Documente a exceção e limite o uso.

Recomendações práticas por tipo de texto

Rótulos (labels) de campos e itens

• Use 14px Medium (ou 16px se a interface for mais “arejada”).
• Mantenha rótulos curtos e consistentes (mesma capitalização e estilo).
• Evite ALL CAPS em rótulos de formulário; dificulta leitura rápida.

Botões

• Prefira 16px Semibold para ações principais.
• Evite textos longos em botões; se passar de 2–3 palavras, reavalie o rótulo.
• Não dependa apenas de negrito para indicar primário; o estilo do componente deve comunicar prioridade.

Textos longos (descrições, termos, artigos)

• Use 16px Regular com line-height 24px.
• Quebre em parágrafos curtos; use subtítulos quando houver seções.
• Evite centralizar texto longo; alinhamento à esquerda costuma ser mais legível.

Mensagens de erro e validação

• Seja específico: diga o que aconteceu e como resolver.
• Use tamanho legível (geralmente 12–14px), mas não pequeno demais.
• Posicione próximo ao campo relacionado e mantenha consistência de tom e formato.

Exemplos melhores de erro:
- "Informe um e-mail válido (ex.: nome@dominio.com)."
- "A senha precisa ter pelo menos 8 caracteres."

Números, preços e dados

• Garanta diferenciação de caracteres (0/O, 1/l/I).
• Considere alinhar números por casa decimal em listas/tabelas.
• Use pesos com parcimônia: destaque apenas o valor principal, não toda a linha.

Checklist de legibilidade (para revisar telas)

• Tamanho mínimo: corpo em ~16px; textos auxiliares raramente abaixo de 12–13px.
• Line-height: corpo entre 1.4–1.6; títulos com line-height menor, mas sem “colar” linhas.
• Comprimento de linha: texto longo sem linhas excessivamente largas; margens adequadas.
• Contraste: texto não depende apenas de cor clara/cinza fraco; verifique em brilho baixo.
• Hierarquia: diferença clara entre título, subtítulo, corpo e legenda (tamanho/peso/espaçamento).
• Consistência: mesmos estilos para mesmos papéis em todas as telas (tokens).
• Caixa alta: ALL CAPS apenas em rótulos curtos e com espaçamento ajustado.
• Erros: mensagens específicas, próximas ao problema e com tamanho legível.
• Escaneabilidade: listas e cards com títulos curtos, metadados em estilo auxiliar, e espaçamento coerente.
• Teste rápido: leia a tela a 50% de brilho e a uma distância maior; se “some”, ajuste tamanho/contraste.