Que fonte é essa? Como identificar qualquer fonte como…

Pode ser perfeito para algo em que você já está trabalhando ou talvez para guardar em sua caixa de ferramentas para mais tarde. Seja o que for … você precisa disso em sua vida. Mas o que é essa fonte? De onde você pode obtê-lo? Como você descobriu isso?

Você pode passar horas vasculhando centenas de fundições de tipos tentando encontrá-lo, examinando fonte após fonte até perder gradualmente a vontade de viver. Ou você pode economizar muito tempo e problemas usando um dos seguintes métodos para identificar fontes da Web e da impressão, de maneira fácil e rápida.

Obviamente, se o tipo for manuscrito que não foi convertido em uma fonte, ele não estará disponível e você não poderá identificá-lo. Mas se o design usar uma fonte, há várias maneiras de identificá-la.

A maneira mais difícil: siga o código

Em primeiro lugar, este é o método mais demorado para identificar uma fonte e é o mais próximo do trabalho manual. No entanto, mesmo que você decida usar uma extensão de navegador ou ferramenta online (falaremos mais sobre isso depois), é bom saber como fazer isso porque você está acessando diretamente a fonte — literalmente, você vai olhar para o Código fonte.

Se ainda não o fez, é hora de fazer amizade com o inspetor de código do seu navegador. Selecione algumas linhas de texto em uma página da Web, clique com o botão direito do mouse e selecione inspecionar no menu pop-up e o inspetor de código do navegador será aberto. Os navegadores variam um pouco, mas geralmente, por padrão, o inspetor abrirá ancorado na janela do navegador em que você está. Você pode alterar sua posição ou separá-lo, se desejar.

O que você vê deve ser mais ou menos assim:

Código fonte

Percorra a seção de regras até encontrar família de fontes, e aí está, o nome da fonte usada para aquele texto em particular, neste caso, base’. Uma busca rápida (google) por basic font’ irá levá-lo para Basis Grotesque por Colophon Foundry, que é a fonte que usamos atualmente.

Alguns navegadores possuem ferramentas adicionais; por exemplo, o Firefox tem um painel Fontes que listará todas as fontes usadas em uma página, e o do Chrome CSS visão geral também lhe dará uma lista de todas as fontes em uma página. Ocasionalmente, o nome da fonte pode ser obscurecido com a fonte referida por um nome de classe ou nome de variável, e essas ferramentas extras são úteis para decodificar isso.

Se você não está acostumado a usar o inspetor de código em seu navegador, vale a pena experimentar para ver o que ele pode fazer por você. Afinal, os desenvolvedores de navegadores se deram ao trabalho de criar essas ferramentas para nosso benefício: parece meio rude não fazê-lo.

Se você está curioso sobre como outros designers/desenvolvedores fazem as coisas, mexer no inspetor olhando o código-fonte pode ser divertido. No entanto, se isso parecer muito trabalhoso ou se você precisar de respostas rápidas, existem outras maneiras.

A maneira fácil: extensões do navegador

Eles fazem o que você acabou de fazer, mas sem que você precise detalhar o código por conta própria. Basta instalar a extensão e seguir suas instruções de uso.

Há um número cada vez maior deles e navegadores diferentes têm extensões diferentes, mas aqui estão algumas sugestões para você começar.

WhatFont

WhatFont é feito para Chrome e Safari. Depois de instalá-lo, você clica no botão WhatFont na barra de ferramentas para ativá-lo e verá o nome da fonte ao lado do cursor quando passar o mouse sobre o texto. Clique e uma caixa será aberta com mais detalhes. Clique no x para fechar e, para desativar o WhatFont novamente, clique no botão Sair do WhatFont logo abaixo da barra de ferramentas.

Embora o WhatFont original seja apenas para Chrome e Safari, outro desenvolvedor ajudou muito a criar um wrapper para que ele seja executado no Firefox. Ele fornece um pouco menos de informações, mas ainda fornece o básico sobre nome, tamanho e altura da linha.

WhatFont

Fontanelo

Fontanello está disponível para Firefox, Chrome, Edge e iOS (Safari). Depois de instalá-lo e certificar-se de que está ativado, vá para o texto que deseja identificar, clique com o botão direito do mouse para abrir a caixa de diálogo e você verá o Fontanello na parte inferior. Passe o mouse sobre ele e outra caixa aparecerá com todas as informações de fonte que você precisa.

Fontanelo

Fontes Ninja

A extensão do navegador Fonts Ninja é a mais útil se você deseja adquirir uma fonte específica. Ao executá-lo, você obtém uma dica de ferramenta com o nome completo da fonte, o peso usado, o tamanho e a altura da linha.

Você também obtém um modal separado que fornece o nome e o peso de todas as fontes na página. Clique no ícone de informações para visualizar seus diferentes pesos e estilos e compre ou instale-o diretamente se for gratuito. Ou, você pode marcá-lo para referência futura. Feche os modais quando terminar e o Font Ninja voltará a dormir.

Fontes Ninja

Localizador de fontes

O Font Finder para Firefox e Chrome permite que você selecione algum texto, clique com o botão direito do mouse e escolha entre analisar a fonte, copiar o CSS estilos para a fonte e substituindo a fonte por outra coisa.

Localizador de fontes

Localizador rápido de fontes

O Rapid Font Finder, que é apenas Chrome, é o mais simples do grupo. Ele apenas fornece o nome da fonte usada para qualquer texto sobre o qual o cursor está. No lado positivo, é leve e rápido.

Localizador rápido de fontes

Verificar o código-fonte, manualmente ou com uma extensão do navegador, é muito bom se você estiver tentando identificar uma fonte usada para texto em uma página da Web, mas e se for uma imagem ou até mesmo uma impressão?

O jeito preguiçoso: pergunte a outra pessoa

Você pode perguntar na web (aka Pesquise no Google’) e você poderá obter uma resposta. Mas, a menos que seja uma empresa ou organização grande ou conhecida, é improvável que você obtenha uma resposta satisfatória. Uma abordagem melhor é ir a um fórum de tipos e perguntar a pessoas reais que conhecem fontes.

Existem menos fóruns do tipo do que costumava haver, mas aqui estão os cinco que são atualmente os mais ativos:

MyFonts tem um fórum What the Font onde você pode postar imagens de fontes usadas em camisetas, canecas, a lateral de um caminhão e praticamente qualquer coisa para tentar identificá-la.

O DaFont também possui um fórum com uma placa de identificação dedicada.

O Typography Guru é o maior fórum de tipografia, e as consultas de identificação tendem a obter pelo menos algum tipo de resposta em um ou dois dias.

No Reddit, você pode tentar o feed de identificação desta fonte. No entanto, não tente o feed de tipografia: a primeira regra é nenhum pedido de identificação de tipo de letra.’

Por fim, o painel Adobe Community Type and Typography aceitará solicitações de identificação.

Embora a maioria dos membros dessas comunidades tente identificar a fonte em questão, na maioria das vezes, você será direcionado educadamente (ou indelicadamente) para uma ferramenta de identificação automática.

A maneira mais rápida: identificadores on-line

Com a maioria das ferramentas de identificação de fonte, você carrega uma imagem da fonte que deseja identificar e a ferramenta informa qual é. Para obter o melhor dessas ferramentas, certifique-se de que o texto na imagem seja grande e claro e que a imagem esteja reta com bom contraste entre o texto e o plano de fundo – é uma boa ideia limpar a imagem de amostra no Photoshop antes de tentar para identificá-lo.

Qual é a fonte

MyFonts’ What the Font é fácil de usar. Você carrega uma imagem, seleciona o texto que deseja identificar na imagem e clica em Identifique a fonte.’ O que a fonte retornará uma lista de fontes possíveis, junto com links para comprar.

Qual é a fonte

fonte esquilo

O Font Identifier da Font Squirrel permite fazer upload de uma imagem e, depois de selecionar a fonte, você pode aplicar alguns ajustes na rotação, se necessário.

O Font Squirrel oferece algumas boas dicas para melhorar o processo de identificação com base na qualidade da imagem. Ele também fornecerá algumas recomendações da próxima etapa se não puder identificar definitivamente a fonte para você.

fonte esquilo

Fonte Spring Matcherator

O Font Spring tem um banco de dados maior que o Font Squirrel e pode identificar scripts e fontes caligráficas. Fora isso, é o mesmo processo do Font Squirrel’s Font Finder.

Fonte Spring

Qual é a fonte

What Font Is o guia por um processo um pouco mais complexo que permite melhorar o brilho e o contraste e dividir quaisquer caracteres unidos. É gratuito para uma pesquisa básica, mas existe uma versão Pro se você quiser mais ajuda. Você também recebe um link para postar no fórum What Font Is se não estiver satisfeito com os resultados.

Qual é a fonte

fonte de identidade

O Identifont existe desde sempre e ainda é um dos nossos métodos favoritos de identificação de fontes: ele tentará identificar uma fonte com base no que você pode dizer sobre as formas – uma espécie de 20 perguntas para fontes.

fonte de identidade

Identificando uma fonte

Identificar uma fonte a partir do texto é definitivamente mais gerenciável e preciso do que a partir de uma imagem ou descrição, mas essas ferramentas estão melhorando o tempo todo. E todas as ferramentas lhe darão boas sugestões, mesmo que nem sempre acertem na primeira vez.

Simon Sterne

Simon Sterne é redator da WebdesignerDepot. Ele está interessado em tecnologia, WordPress e todas as coisas experiência do usuário. Nas horas vagas gosta de fotografia.

Com informações de WebDesigner Depot.