Comparador de tamanho de fonte
Uma ferramenta de teste de tipografia na web. Compare instantaneamente a aparência de diferentes tamanhos de fonte, alturas de linha e espessuras lado a lado para otimizar sua experiência de leitura.
Comparador de tamanho de fonte
Teste a legibilidade e escalas tipográficas
Estilo A
A rápida raposa marrom salta sobre o cachorro preguiçoso. Esfinge de quartzo negro, julgue meu voto.
Estilo B
A rápida raposa marrom salta sobre o cachorro preguiçoso. Esfinge de quartzo negro, julgue meu voto.
Visão geral
O Comparador de tamanho de fonte é um utilitário essencial para qualquer pessoa que trabalhe com web design, editoração eletrônica ou marketing digital.
Escolher a tipografia perfeita não envolve apenas escolher uma fonte bonita; requer equilíbrio entre tamanho da fonte, espessura da fonte (espessura) e altura da linha (espaçamento) para maximizar a legibilidade em diferentes dispositivos.
Características
- Testes lado a lado: não adivinhe a aparência de 14px em comparação com 16px. Coloque-os um ao lado do outro em blocos de texto idênticos.
- Escalas tipográficas: teste seus cabeçalhos H1 (por exemplo, 48px, negrito, altura de linha estreita) diretamente em relação ao texto do parágrafo (por exemplo, 16px, regular, altura de linha solta) para garantir que sua hierarquia visual faça sentido.
- Renderização do sistema ao vivo: as caixas de visualização são renderizadas usando propriedades CSS verdadeiras em tempo real, exatamente como seriam se você as codificasse em um site ativo.
Como usar
- Na parte superior da ferramenta, digite a frase de exemplo que deseja testar e selecione uma família de fontes principal.
- Em Estilo A, ajuste os controles deslizantes para definir sua linha de base ou estilo “atual”.
- Em Estilo B, ajuste os controles deslizantes para testar um estilo alternativo.
- Compare visualmente as duas
caixas de visualizaçãoabaixo dos controles deslizantes para ver qual configuração é mais fácil de ler!
Perguntas Frequentes (FAQs)
Para quem é esta ferramenta?
O comparador de tamanho de fonte foi projetado para desenvolvedores da Web, designers de UI/UX e artistas gráficos. Ao projetar um site, escolher o tamanho de fonte correto (por exemplo, 16px vs 18px) altera completamente a legibilidade. Esta ferramenta permite compará-los lado a lado sem escrever nenhum código CSS.
O que significa 'Altura da Linha'?
A altura da linha determina o espaço vertical entre as linhas do texto. Em CSS, uma altura de linha '1,5' significa que o espaço é 150% do tamanho da fonte. Alturas de linha mais estreitas (como 1,1) são boas para cabeçalhos grandes, enquanto alturas de linha mais soltas (1,5 - 1,8) são necessárias para uma leitura confortável de parágrafos.
Por que as fontes parecem diferentes no meu telefone?
Usamos 'Fontes do Sistema' por padrão. Isso significa que a ferramenta extrai automaticamente a fonte nativa e mais otimizada do seu dispositivo. Se você estiver em um iPhone, verá a fonte San Francisco da Apple. Se você estiver no Windows, verá a IU do Segoe.