Alguém compartilha um cartaz. Um mockup de design chega na sua caixa de entrada. Você está reconstruindo a landing page de um concorrente e quer a mesma sensação. A fonte é a maior pista estilística nos três casos — e geralmente é a única coisa que ninguém te conta. Aqui está como identificar uma fonte a partir de uma imagem, grátis, sem enviar nada.
O que você precisa antes de começar
O localizador de fontes funciona com pixels, não metadados. Uma captura de tela, uma foto de uma placa, uma exportação de PDF achatada — qualquer imagem onde o lettering esteja visível — é suficiente. Não há tamanho mínimo, mas há uma regra prática: quantas mais letras você puder recortar, mais confiante será a correspondência. Cinco caracteres é bom; uma palavra inteira é melhor; uma frase curta é ideal. Letras isoladas e palavras de três letras funcionam, mas retornam uma lista mais ampla de candidatos.
O fluxo de trabalho de quatro passos
1. Envie ou cole
Arraste a imagem para a ferramenta ou cole diretamente da sua área de transferência com Ctrl/Cmd + V. PNG, JPG e WebP funcionam, e arquivos até generosos 12 MB são aceitos. A imagem é decodificada localmente com as APIs de canvas do navegador — nada é enviado a um servidor, então capturas de tela de trabalhos não lançados permanecem privadas.
2. Recorte o texto
Arraste um retângulo ao redor de uma linha de lettering. Uma única linha vence um parágrafo: isola o tipo que você está interessado e mantém a estimativa da linha de base limpa. Se a imagem tiver ícones ou símbolos, recorte-os — o motor está procurando formas de letras e marcas soltas adicionam ruído.
3. Revise as letras
O motor segmenta o recorte em glifos individuais e estima a linha de base e a altura-x. No passo de revisão, você pode corrigir qualquer caractere que ele leu incorretamente — este é o passo onde a maioria dos erros de primeira tentativa é corrigida. Para escrita manuscrita conectada, a ferramenta pula a revisão letra por letra e corresponde a palavra inteira.
4. Leia os resultados
Cada resultado mostra o nome da família, categoria, peso, uma porcentagem de confiança e uma pré-visualização ao vivo no tipo. O candidato principal geralmente é a resposta; a lista abaixo mostra os próximos mais próximos, que importam quando o recorte era pequeno ou o lettering estilizado. Copie o trecho de CSS e coloque no seu stylesheet.
Como a comparação realmente funciona
Por baixo dos panos há duas passadas. Primeiro, cada letra isolada é normalizada em uma grade binária de 16×16 — uma silhueta compacta que ignora tamanho e resolução. Essa grade é comparada às mesmas grades pré-calculadas para 62 caracteres em todas as 1.935 fontes gratuitas, nos pesos regular e bold, usando distância de Hamming sobre as 256 células. Isso classifica toda a biblioteca em milissegundos.
Segundo, os principais candidatos são verificados re-renderizando a palavra que você recortou em cada fonte e comparando toda a renderização com sua amostra. Esta segunda passada capta diferenças sutis em espaçamento, terminais e junções que uma comparação por letra pode perder, e é o que torna o resultado reclassificado confiável.
Dicas que fazem os resultados acertarem de primeira
- Prefira amostras frontais e planas. Fotos com perspectiva esticam letras de forma imprevisível. Uma digitalização ou foto frontal vence sempre.
- Misture maiúsculas e minúsculas. Uma amostra com ascendentes (b, d, h) e descendentes (g, p, y) diz muito mais ao motor do que texto em maiúsculas.
- Evite efeitos pesados. Contornos, sombras projetadas e relevo borram as bordas dos traços que o comparador lê. Uma renderização simples e escura em fundo claro é ideal.
- Verifique os próximos. Quando a primeira correspondência é uma face comercial, o painel de resultados lista alternativas gratuitas — use essas, a menos que você tenha a licença.
Da correspondência ao CSS funcional
Cada card de resultado inclui uma URL @import e uma regra de font-family. Adicione o import ao topo
do seu stylesheet e a regra ao elemento que você está estilizando:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
Os pesos são carregados sob demanda e display=swap mantém o texto visível enquanto a fonte é baixada. Para ferramentas desktop,
cada página de fonte vincula ao specimen oficial do Google Fonts onde você pode baixar os arquivos estáticos para
Photoshop ou Illustrator.
O que fazer quando a fonte é paga
Muitas faces famosas — Helvetica, Gotham, Proxima Nova, Avenir — são comerciais. Os resultados do localizador apresentam a alternativa gratuita e de código aberto mais próxima para um amplo conjunto de tipos pagos, para que você possa distribuir a direção do design legalmente. Leia alternativas gratuitas a 10 fontes comerciais famosas para a lista, ou navegue pela biblioteca completa quando preferir começar pela direção do design do que pelos pixels.