O que é Testador de tamanho de fonte?

Digite qualquer texto e veja em todos os tamanhos de 8px a 96px. Alterne entre px, rem e pt, e ajuste altura de linha e espaçamento de letras para acertar a tipografia.

Cole qualquer frase e ela aparece simultaneamente em 14 tamanhos, do minúsculo 8 px ao gigante 96 px. Alterne a unidade entre px, rem e pt, ajuste entrelinha e espaçamento de letras em tempo real. Útil para enxergar exatamente onde a leitura começa a incomodar, ou como vai ficar um botão a 14 px contra 16 px antes de mexer no CSS.

Como usar

1. Passo 1 — Digite ou cole o texto que deseja testar.
2. Passo 2 — Ajuste a faixa de tamanhos e a unidade (px, rem ou pt) para visualizar.
3. Passo 3 — Compare todos os tamanhos lado a lado para escolher a melhor opção para o seu design.

Quando usar

• Definir o tamanho dos rótulos de navegação: legíveis sem entupir a barra.
• Comparar corpo a 14 px e 16 px para encerrar um debate no time de design.
• Converter o valor em px do designer para rem e respeitar a preferência de fonte do usuário.

Resultado

Testando um rótulo de navegação: digite "Painel" e compare em 12px, 14px e 16px para encontrar o tamanho mais legível sem desperdiçar espaço.

Perguntas frequentes

Devo usar px, rem ou pt para fontes web?

Use rem para texto e componentes: ele escala com o tamanho raiz do usuário, o que importa para acessibilidade. Reserve px para bordas ou ícones muito pequenos que precisam ser exatos. Pt é unidade da era da impressão; evite na tela.

Qual é um tamanho de corpo razoável?

16 px (1 rem) é o padrão de fato para parágrafos na web. Caia para 14 px só em texto secundário como legendas e rótulos. Sites com texto principal abaixo de 14 px costumam falhar em auditorias de acessibilidade e frustram quem lê em telas pequenas.

Quanto a altura de linha influencia na leitura?

Aponte para 1.4 a 1.6 no corpo. Mais apertado fica claustrofóbico; mais solto quebra o ritmo entre os parágrafos. Títulos podem ir mais fechados (1.1 a 1.2) porque as linhas já costumam ser curtas.

Quando ajustar o espaçamento entre letras (tracking)?

Abra um pouco o tracking (em torno de 0.05 em) em rótulos em caixa alta, cujo kerning padrão parece apertado. Feche levemente (–0.01 a –0.02 em) em manchetes muito grandes. Corpo do texto deixe como está — o desenhista da fonte já cuidou disso.

A WCAG exige mesmo um mínimo de 16 px?

A WCAG não define um mínimo rígido, mas exige que o texto possa ser ampliado para 200% sem quebrar o layout. Na prática, começar o corpo em 16 px e usar unidades relativas resolve. Tamanhos padrão menores obrigam o usuário a dar zoom, coisa que quase ninguém faz.

Ferramentas relacionadas