Ir para o conteúdo
QualFonte
Identificar fonte

Guia

Como identificar uma fonte a partir de uma captura de tela

6 min de leitura

Capturas de tela são onde a maioria da caça moderna a fontes acontece. Um colega publica um painel, um mockup do Figma chega como PNG, uma landing page chama sua atenção — e o tipo que você quer copiar está preso nos pixels. Identificá-lo é geralmente uma tarefa de dois minutos, mas capturas de tela têm alguns hábitos que atrapalham. Aqui está como fazer certo.

Por que capturas de tela são diferentes de fotos

Capturas de tela já são planas e frontais, o que as torna excelente entrada para comparação de formas — sem necessidade de correção de perspectiva. Sua fraqueza é o problema oposto: são frequentemente pequenas. Um parágrafo de 11px em 100% de zoom tem bordas suavizadas que borram os traços que o comparador lê. A solução é escala, não resolução. Amplie a página até que a linha alvo seja grande na tela e então capture — ou simplesmente recorte tight e deixe o motor normalizar o tamanho.

Isole o tipo que você quer

Interfaces quase nunca usam uma fonte. Um título geralmente é uma face diferente do corpo de texto, que por sua vez difere dos rótulos de botão e do texto de entrada. Identifique cada um separadamente: recorte uma única linha do título, execute, depois volte e recorte uma linha do corpo de texto. Misturar duas fontes em um recorte media suas formas e produz uma classificação confusa.

Modo escuro e cor não importam

O comparador trabalha com formas de tinta, não cor. Capturas de tela com tema escuro e texto claro são tratadas automaticamente — o passo de binarização descobre qual lado é a tinta e aplica o limiar de acordo. Fundos com gradientes ou fotografia são o verdadeiro obstáculo; recorte o mais tight possível ao redor do texto para que a estimativa da cor de fundo permaneça correta.

Casos comuns de capturas de tela, resolvidos

Título de site

Recorte apenas o título. A maioria dos títulos web são definidos em Google Fonts — Inter, Roboto, Montserrat, Playfair Display — então uma correspondência geralmente cai diretamente na biblioteca gratuita com o CSS exato que você precisa para replicá-lo.

UI de aplicativo

Faces de sistema como SF Pro e Segoe UI não estão na biblioteca de código aberto, mas o localizador apresentará o equivalente gratuito mais próximo (geralmente Inter) em vez de desistir. Se você está entregando uma versão web da UI, essa é a fonte que você usaria de qualquer forma.

Gráficos de redes sociais

Cards de citação e infográficos frequentemente usam fontes display ou manuscritas. Recorte a linha citada e — se for script conectado — deixe o comparador de palavra inteira fazer seu trabalho. Esses gráficos geralmente são renderizados em alta resolução, então as correspondências tendem a ser confiantes.

Exportações de PDF e documentos

PDFs achatados são efetivamente capturas de tela. Um passo extra: certifique-se de que a camada de texto não esteja selecionada — você quer os pixels, não dados de glifos embutidos. Uma exportação simples é a entrada mais limpa.

O que fazer quando a correspondência é uma face comercial

Capturas de tela de sites de marketing frequentemente usam fontes licenciadas — um título de marca definido em Gotham ou um pôster em Proxima Nova. Quando isso acontece, não recrie com um clone que você encontrou em um site de fontes gratuitas (o risco de licença é real). Em vez disso, use a alternativa gratuita apresentada nos resultados, ou consulte o localizador de alternativas gratuitas para um gêmeo correspondido por forma e com licença segura.

A receita rápida

  1. Amplie para tornar o texto grande e então capture a tela.
  2. Recorte uma linha de uma única fonte.
  3. Revise as letras detectadas e corrija quaisquer erros.
  4. Leia as correspondências classificadas e copie o CSS.

Pronto para experimentar? O localizador de fonte por captura de tela tem o fluxo de trabalho integrado — ou vá direto para o localizador de fontes principal.

Pronto para experimentar?

Identifique uma fonte a partir de uma imagem, grátis

Envie ou cole uma captura de tela e obtenha a fonte gratuita correspondente — com CSS copiar e colar — em segundos. Tudo acontece no seu navegador.

Abrir o localizador de fontes