O que é Testador de tipografia?

O Testador de Tipografia permite ajustar propriedades de fonte e ver os resultados em tempo real. Escolha uma família tipográfica, ajuste tamanho, peso, altura de linha e espaçamento, e copie o CSS direto para o seu projeto.

O tester permite ajustar família de fonte, tamanho, peso (100 a 900), altura de linha, espaçamento entre letras, espaçamento entre palavras, alinhamento, transformação de texto e cor. O texto-modelo é editável, então você previsualiza seus próprios títulos e parágrafos, e o painel de CSS sai com um clique para colar em uma folha de estilos ou componente estilizado.

Como usar

1. Introduza ou cole o seu texto de exemplo na área de pré-visualização.
2. Ajuste os controlos de tipografia: família tipográfica, tamanho, peso, altura de linha, espaçamento entre letras e entre palavras.
3. Copie o código CSS gerado para usar as definições tipográficas diretamente no seu projeto.

Quando usar

• Acertar o corpo do blog até Inter 18 px com altura 1,6 ficar gostoso de ler no celular.
• Testar um artigo longo em 16, 17 e 18 px e ver qual tamanho mantém o leitor por mais tempo.
• Conferir se aumentar o letter-spacing resolve a aparência apertada de um botão em caixa alta.

Resultado

Um web designer testa o tipo "Inter" a 18px com altura de linha 1,6 e espaçamento de letras 0,02em, depois copia o CSS para a folha de estilo do seu blog.

Perguntas frequentes

Qual altura de linha cai bem para texto corrido?

Em parágrafos longos com 16-18 px, altura de linha entre 1,5 e 1,7 lê confortável na tela. Já títulos respiram melhor com valores mais fechados, em torno de 1,1 a 1,3. Digite título e parágrafo na caixa de exemplo para comparar.

Por que o letter-spacing usa em em vez de px?

Em escala junto com o tamanho da fonte, então 0,02em fica proporcionalmente igual em 14 px e em 48 px. Um valor em pixels pode parecer correto num tamanho e estranho em outro.

Quais pesos de fonte dá para usar na web sem medo?

Google Fonts modernas e fontes variáveis cobrem 100 a 900, mas várias fontes auto-hospedadas só vêm com 400 e 700. Se a prévia não muda ao trocar o peso, a fonte não tem aquele estilo e o navegador improvisa uma versão sintética.

Posso testar fontes que a página não pré-carregou?

Escolha no menu de fontes embutido: ele tem campo de busca e filtros de Sans / Serif / Monoespaçada / Sistema, e qualquer Google Font que você escolher carrega sozinha. Mude para a visão Galeria para ver seu texto de amostra em todas as fontes de uma vez, ou ligue o Comparar para pôr duas fontes lado a lado. Enviar um arquivo de fonte próprio não é suportado aqui; nesse caso, faça @font-face no seu site.

Como levo o CSS para um projeto React ou Tailwind?

Clique em Copiar CSS para puxar cada propriedade como declaração padrão. Em React, cole dentro de um template literal de styled-components ou converta cada linha em chave camelCase. Em Tailwind, mapeie tamanho e peso para utilitárias e use valores arbitrários para spacing e altura customizados.

Ferramentas relacionadas