FontLens

Selecione um texto, clique com o botão direito e inspecione instantaneamente a fonte, tamanho, peso, cor e CSS — copie, ajuste,…

Já acessou uma página, admirou a tipografia e se perguntou "que fonte é essa?" FontLens (Lente de Fonte) responde a essa pergunta com um único clique. Selecione qualquer texto em qualquer site, clique com o botão direito do mouse e escolha "Inspecionar fonte com FontLens". Um painel limpo e focado se abre diretamente sobre a página e revela exatamente como aquele texto é estilizado: a fonte, seu tamanho, peso, altura de linha, cor e todos os outros detalhes por trás do design. Se você é um designer fazendo engenharia reversa de um layout, um desenvolvedor correspondendo a uma especificação, ou simplesmente curioso sobre um título bonito, esta ferramenta transforma qualquer página da web em um livro aberto de tipografia. FontLens é um localizador de fontes e inspetor de CSS em um só. Ele não apenas informa o nome da família da fonte, mas também oferece código pronto para usar, um ambiente interativo para testar ideias e ferramentas de acessibilidade para garantir que seu texto seja legível. Sem conta. Sem cadastro. Apenas selecione, clique com o botão direito e examine. 🔍 O que você pode fazer • Revelar a tipografia completa de quaisquer palavras selecionadas: família da fonte, tamanho da fonte, peso da fonte, altura da linha e cor, tudo em um relance • Ver estilos extras que são fáceis de perder, como espaçamento entre letras, transformação de texto e estilo da fonte • Copiar qualquer propriedade individual com um clique, ou pegar todo o conjunto de regras como um snippet CSS completo • Converter esse snippet para Tailwind, SCSS ou SASS através de abas simples, depois copiar tudo ou linha por linha • Experimentar em uma prévia ao vivo e editável: reescrever as palavras de exemplo, ajustar os valores, trocar o fundo e ver as atualizações instantaneamente • Identificar de onde vem uma fonte da web com um distintivo de provedor (Google Fonts, Adobe Fonts, auto-hospedada ou uma tipografia de sistema integrada) • Salvar uma fonte da web em seu computador com o botão "Download da fonte", extraída diretamente de sua própria origem • Verificar o contraste de cores em relação aos padrões WCAG, com a proporção exata e resultados de aprovação ou reprovação AA e AAA • Escolher e amostrar cores com um seletor completo, incluindo um conta-gotas para pegar qualquer pixel na tela • Alternar unidades de medida entre px, rem, pt e em, aplicadas tanto nos campos quanto no código exportado 🖱️ Como funciona Usar o FontLens leva segundos. Destaque as palavras que deseja estudar, clique com o botão direito na seleção e escolha "Inspecionar fonte com FontLens" no menu. O painel aparece sobre a página atual, bem estilizado para nunca conflitar com a aparência do site. A partir daí, você pode ler os detalhes, copiar o que precisa ou começar a editar. A prévia ao vivo é onde as coisas ficam divertidas. Altere a redação para testar um título real, ajuste o tamanho, modifique o peso ou defina uma nova cor de fundo para ver como o texto se comporta. Suas edições permanecem enquanto você navega entre as páginas e retorna mais tarde, então uma ideia iniciada em um site estará esperando por você no próximo. Quando quiser os valores originais de volta, o botão "Redefinir para o site" restaura tudo o que a página realmente usa. Precisa do arquivo bruto? Para uma fonte da web que pode ser baixada, um botão busca o arquivo real de sua localização @font-face. Para uma tipografia que já vem com seu sistema operacional, o FontLens informa que é uma fonte integrada, então você sabe que está disponível sem nenhum download. 🔒 Privacidade em primeiro lugar O FontLens funciona inteiramente dentro do seu navegador. Não há coleta de dados, rastreamento, análises ou servidores externos envolvidos na inspeção de texto. Tudo o que você examina permanece em sua máquina. A extensão faz exatamente uma requisição de rede, e somente quando você deliberadamente pressiona "Download da fonte", momento em que ela se conecta à própria fonte da fonte para recuperar o arquivo. Nada mais sai do seu dispositivo. As permissões são propositalmente restritas. A permissão de menu de contexto adiciona a entrada de clique com o botão direito. A permissão de aba ativa permite que a ferramenta leia o texto selecionado na aba onde você a invoca, e em nenhum outro lugar. O armazenamento mantém seu texto de prévia e suas preferências de unidade e formato para que sejam lembrados na próxima vez. Não há acesso amplo ao seu histórico de navegação nem permissões de host abrangentes. 👥 Para quem é • Web designers que desejam identificar uma tipografia, capturar uma paleta e reutilizar estilos rapidamente • Desenvolvedores front-end que querem replicar um mockup ou copiar valores exatos de família de fonte e espaçamento para o código • Engenheiros de UI e UX que constroem sistemas de tipografia consistentes e alinhados à marca • Estudantes de CSS e tipografia que querem ver como os sites reais são construídos • Auditores de acessibilidade verificando se o texto atende aos requisitos de contraste WCAG antes da publicação • Blogueiros, profissionais de marketing e leitores curiosos que simplesmente querem saber qual fonte um site está usando ✨ Por que as pessoas o mantêm • Um clique com o botão direito oferece a resposta em vez de ter que explorar as ferramentas de desenvolvedor • O código está pronto para copiar em CSS puro, Tailwind, SCSS ou SASS, então ele se encaixa diretamente no seu projeto • A prévia editável permite prototipar escolhas de tipo sem tocar em uma única linha de código • O verificador de contraste incorpora a acessibilidade ao seu fluxo de trabalho, em vez de deixá-la como uma reflexão tardia • O seletor de cores e o conta-gotas permitem amostrar e reutilizar cores exatas de qualquer lugar da página • Temas claro e escuro seguem automaticamente o seu sistema operacional, então ele se adapta dia e noite • A alternância de unidades entre px, rem, pt e em mantém a saída alinhada com a forma como seu código-fonte é escrito 🎨 Um olhar mais atento aos detalhes Tipografia é mais do que um nome. FontLens revela as pequenas decisões que fazem o texto parecer certo, desde o peso de um título até o espaço entre linhas e o rastreamento sutil do espaçamento entre letras. Ver esses valores lado a lado ajuda você a entender por que um design funciona e como recriá-lo. O distintivo do provedor também adiciona contexto, informando rapidamente se você está olhando para um recurso do Google Fonts, uma fonte do Adobe Fonts, um arquivo auto-hospedado ou um padrão do sistema, o que geralmente é a primeira pista quando você procura corresponder ou obter uma tipografia. As ferramentas de cor vão além de uma leitura estática. O seletor oferece um quadrado HSV com controles deslizantes de matiz e alfa, e ele funciona com HEX, RGB e HSL para que você possa trabalhar no formato que mais lhe convier. Combine isso com o conta-gotas e você poderá extrair a tonalidade precisa de qualquer elemento e inseri-la em sua prévia ou em suas anotações. 🚀 Comece a inspecionar Adicione o FontLens, destaque algumas palavras e clique com o botão direito para revelar a tipografia, estilos e cores por trás de qualquer página. É um companheiro rápido, privado e genuinamente útil para qualquer pessoa que se preocupa com a forma como a web é lida. Instale-o, mantenha-o sempre à mão e nunca mais se pergunte sobre uma fonte misteriosa.