Tamanho de fonte (font size)

A altura dos caracteres, medida em pontos ou pixels, que define legibilidade e hierarquia.

Hard

O que é

Tamanho de fonte é o quão grande ou pequeno o texto aparece. Em tela, costuma-se usar pixel pra decisões pontuais e unidade relativa, como em e rem, no código, justamente pra que o texto escale com a configuração de quem usa.

O número sozinho diz pouco. O que realmente importa é a relação entre os tamanhos. Um título de 32px só funciona como título se o corpo logo abaixo for bem menor, porque é esse contraste que cria a hierarquia. Sem ele, a leitura desmorona.

A função principal aqui é a legibilidade. No desktop, o corpo de texto costuma ler bem entre 15 e 18px, e a Apple recomenda um mínimo de 17pt no corpo em mobile. Vale lembrar ainda que o tamanho conversa com a altura de linha: algo entre 1,4 e 1,6 vez o corpo costuma respirar bem.

Em uma frase

Vamos travar a escala de fonte em token, 12, 16, 20, 24 e 32, pra cada tela parar de inventar.

A pergunta que ele responde

Que tamanho de texto deixa a leitura confortável e ainda cria hierarquia na tela?

Quando usar

Ajuda quando você monta a escala tipográfica e precisa definir a hierarquia de leitura de uma interface.

Como não usar

O cuidado é não fixar o tamanho em pixel de um jeito que quebre o zoom do navegador, porque isso reprova em acessibilidade.

Na prática

Pense num time que define uma escala tipográfica, como 12, 16, 20, 24 e 32, e a transforma em token. A partir daí, todo componente puxa dessa escala, em vez de cada tela inventar um valor próprio.

Não confunda com

Vale separar tamanho de fonte de peso de fonte. O tamanho é a altura do caractere, o quão alto ele é. O peso é a espessura do traço, o quão grosso ele é. São duas dimensões diferentes da mesma letra, e você pode mexer numa sem tocar na outra.

Design

Em inglês

Font Size

Pronúncia

fânt sáiz

Também chamado de

tamanho de fonte, corpo do texto, font size

Origem

n/a

Fonte

Saiba mais

Apple Human Interface Guidelines, seção sobre tipografia