Tamanho de fonte no mobile: por que o texto do corpo não é 12px e quais tamanhos usar
O texto do corpo no celular é 17 pt no iOS e 16 sp no Android. Doze é legenda e 11 é o piso. Coloque os inputs em 16 px para o Safari não dar zoom e deixe o texto crescer. Os 11 tamanhos do iOS incluídos.
O texto do corpo no celular não é 12 px. O tamanho padrão de corpo da Apple é 17 pontos e o do Material é 16. Doze é legenda, e uma tela inteira em legendas é uma tela que as pessoas leem de olhos apertados. Abaixo estão as quatro regras e o conjunto completo de tamanhos do iOS para você se basear.
Por que o 12 px não para de aparecer
Mockups são desenhados em um monitor grande, com o design ampliado para caber. Nessa distância, 12 parece arrumadinho e 17 parece gritante. Então os tamanhos são escolhidos pelo quanto ficam bonitos no quadro, e o quadro não é o celular.
Aí o celular é segurado à distância do braço, sob o sol, por alguém andando. O mesmo 12 px agora é pequeno, ofuscado e em movimento. Arrumadinho no arquivo, cansativo na mão.
A solução é parar de escolher tamanhos no olhômetro. As duas plataformas publicam uma escala tipográfica, e os tamanhos dela foram testados em dispositivos reais, em distâncias de leitura reais. Pegue seus números de lá.
Correção 1: corpo em 17
Corpo em 12 pt
17 pt, Body do iOS
No iPhone, o estilo Body padrão é 17 pt com 22 pt de altura de linha. No Android, o Body Large do Material é 16 sp com 24 sp de altura de linha. Na web, o padrão do navegador é 16 px. Três plataformas, três unidades diferentes e uma só resposta: o texto de corpo vive entre 16 e 17.
Textos mais longos são os que mais exigem essa regra. Um rótulo de uma linha pode ser pequeno e sobreviver. Um parágrafo que alguém precisa ler até o fim, não. Se a tela tem um parágrafo, ele deve estar no tamanho de corpo, e a linha extra que isso cria é o preço de ser lido.
Correção 2: nada abaixo de 11
Doze não é proibido. Ele tem nome: Caption 1. Serve para a letra miúda embaixo de uma foto ou um horário, texto que pode passar despercebido. Texto de corpo não é isso.
Onze é o piso. O Caption 2 do iOS é 11 pt, e é o menor estilo de texto que a Apple oferece. O menor estilo do Material, Label Small, também é 11 sp. Quando as duas plataformas param no mesmo número, um design que vai abaixo dele está escrevendo um texto que nenhum dos dois sistemas escreveria.
Use os estilos pequenos só para informação secundária: horários, unidades, linhas legais, o rótulo minúsculo embaixo do ícone de uma aba. Se é uma informação que alguém precisa para agir, não é legenda.
Correção 3: inputs em 16
Input em 15 px
Input em 16 px
Esta é uma regra da web, e surpreende as pessoas porque nada no campo parece errado. O Safari do iOS dá zoom em um input de texto quando o tamanho da fonte é menor que 16 px. Com 16 px ou mais, não dá. O zoom não se desfaz sozinho, então a pessoa precisa fazer o gesto de pinça para voltar antes de ver o resto do formulário.
A correção é uma linha de CSS, e não deve ser "desligar o zoom" na tag viewport. Bloquear o zoom tira uma ferramenta de quem precisa dela. Defina o tamanho da fonte do input.
Correção 4: deixe crescer
Altura fixa
Linhas quebram
Seu 17 é um ponto de partida, não uma promessa. As pessoas aumentam o tamanho do texto nos Ajustes, e o iOS permite ir bem além do padrão, até os tamanhos de acessibilidade, onde o Body chega a 28 pt no primeiro passo e 53 pt no maior. Usuários de Android fazem o mesmo com a escala de fonte.
Teste suas telas nos maiores tamanhos antes de publicar. Procure três coisas: texto cortado com reticências, texto que se sobrepõe ao vizinho e rótulo de botão que não cabe mais. A cura é sempre a mesma. Deixe a linha quebrar, deixe a linha crescer e pare de fixar alturas.
Na web, a mesma ideia significa dimensionar o texto em rem em vez de px, para que ele siga a configuração de tamanho de texto do próprio navegador. A WCAG pede que o texto possa ser redimensionado até 200 por cento sem perder conteúdo ou função.
Os 11 tamanhos de texto do iOS
| Estilo | Tamanho / altura de linha (pt) | Use para |
|---|---|---|
| Large Title | 34 / 41 | O topo de uma tela principal |
| Title 1 | 28 / 34 | Telas de seção |
| Title 2 | 22 / 28 | Subseções |
| Title 3 | 20 / 25 | Títulos de cards e grupos |
| Headline | 17 / 22 | Títulos de linhas, em semibold |
| Body | 17 / 22 | Parágrafos e texto de leitura |
| Callout | 16 / 21 | Texto de apoio |
| Subhead | 15 / 20 | Linhas secundárias sob um título |
| Footnote | 13 / 18 | Notas e metadados |
| Caption 1 | 12 / 16 | Letra miúda |
| Caption 2 | 11 / 13 | O piso |
Esses são os tamanhos na configuração padrão Large do iOS. Existem só onze por um motivo: uma escala curta é fácil de guardar na cabeça e fácil de manter consistente em todas as telas.
Os equivalentes no Android são Body Large em 16 / 24 e Label Small em 11 / 16 no Material 3.
Passe isto para o seu dev
:root {
--text-body: 1.0625rem; /* 17 px, iOS Body */
--text-callout: 1rem;
--text-footnote: 0.8125rem;
--text-floor: 0.6875rem; /* 11 px, never lower */
}
body { font-size: var(--text-body); line-height: 1.3; }
/* 16 px or more stops iPhone Safari zooming into the field */
input, select, textarea { font-size: 1rem; }
No iOS, use os estilos de texto do sistema (.body, .footnote) para que o Dynamic Type funcione de graça. No Android, defina o texto em sp, não em dp, para que ele siga a configuração de escala de fonte.
FAQ
Qual é o tamanho mínimo de fonte em um app mobile?
11, nas duas plataformas. O Caption 2 do iOS é 11 pt e o Label Small do Material 3 é 11 sp. Qualquer coisa que as pessoas precisem ler para agir deve ser bem maior.
Qual deve ser o tamanho da fonte do texto do corpo no iPhone?
17 pt. Esse é o padrão do estilo Body do iOS, com altura de linha de 22 pt, e ele aumenta quando a pessoa eleva o tamanho do texto.
Qual deve ser o tamanho da fonte do texto do corpo no Android?
16 sp. Esse é o Body Large do Material 3, com altura de linha de 24 sp.
12px é pequeno demais para texto de corpo?
Para texto de corpo, sim. Ele está no estilo Caption 1 do iOS, feito para letra miúda. Texto de leitura deve ter de 16 a 17.
Por que minha página dá zoom quando toco em um input no iPhone?
O Safari do iOS dá zoom em inputs de texto cujo tamanho de fonte é menor que 16 px. Defina o input em 16 px ou mais e isso para.
Devo deixar o texto escalar com a configuração do sistema?
Sim. As pessoas aumentam o tamanho do texto nos Ajustes por bons motivos, então desenhe linhas e botões que quebram e crescem em vez de cortar o texto.
Fontes
- Apple Human Interface Guidelines, Typography: os estilos de texto do iOS no tamanho Large padrão, em pontos. Body 17/22, Callout 16/21, Subhead 15/20, Footnote 13/18, Caption 1 12/16, Caption 2 11/13, Large Title 34/41, Title 1 28/34, Title 2 22/28, Title 3 20/25, Headline 17/22. O Body é 28/34 no primeiro tamanho de acessibilidade e 53/62 no maior.
- Material Design 3, Typography: Body Large 16/24 sp, e Label Small 11/16 sp como o menor estilo.
- CSS-Tricks, 16px or Larger Text Prevents iOS Form Zoom (Chris Coyier, 2021): o Safari do iOS dá zoom em inputs de 15 px ou menos, não em 16 px ou mais.
- WCAG 2, 1.4.4 Resize Text: o texto pode ser redimensionado até 200 por cento sem perda de conteúdo ou função.
- Os espécimes desta página estão em Inter nos tamanhos da Apple, não no SF Pro da própria Apple. O texto do card e da linha de exemplo foi inventado para esta página.
- Publicado primeiro como carrossel no UX Brainy.
Want type that stays readable on every phone and every text size setting? Our team designs and builds mobile UI with the type scale decided once.
Get Started
