FontLens

Selecione texto, clique direito e inspecione instantaneamente tipo de letra, tamanho, espessura, cor e CSS. Copie, ajuste,…

Já alguma vez aterrou numa página, admirou o tipo de letra e perguntou "que tipo de letra é este?" FontLens responde a essa pergunta com um único clique. Selecione qualquer texto em qualquer website, clique com o botão direito e escolha "Inspecionar tipo de letra com FontLens". Um painel limpo e focado abre-se diretamente sobre a página e revela exatamente como esse texto é estilizado: o tipo de letra, o seu tamanho, peso, altura da linha, cor e todos os outros detalhes por detrás do design. Quer seja um designer a fazer engenharia inversa de um layout, um programador a corresponder a uma especificação, ou simplesmente curioso sobre um belo título, esta ferramenta transforma qualquer página web num livro aberto de tipografia. O FontLens é um localizador de tipos de letra e inspetor de CSS num só. Não se limita a indicar o nome da família de tipos de letra, mas também fornece código pronto a usar, um campo de testes interativo para testar ideias e ferramentas de acessibilidade para garantir que o seu texto é legível. Sem conta. Sem registo. Basta selecionar, clicar com o botão direito e examinar. 🔍 O que pode fazer - Revelar a tipografia completa de quaisquer palavras selecionadas: família de tipos de letra, tamanho do tipo de letra, peso do tipo de letra, altura da linha e a cor, num relance - Ver estilos extra que são fáceis de perder, como espaçamento entre letras, transformação de texto e estilo do tipo de letra - Copiar qualquer propriedade com um clique, ou apanhar o conjunto completo de regras como um fragmento CSS completo - Converter esse fragmento para Tailwind, SCSS ou SASS através de abas simples, depois copiar na totalidade ou linha a linha - Experimentar numa pré-visualização ao vivo e editável: reescrever as palavras de amostra, ajustar os valores, trocar o fundo e vê-lo atualizar instantaneamente - Identificar a origem de um tipo de letra web com um distintivo de provedor (Google Fonts, Adobe Fonts, autoalojado ou um tipo de letra de sistema incorporado) - Guardar um tipo de letra web no seu computador com o botão "Descarregar tipo de letra", retirado diretamente da sua própria fonte - Verificar o contraste de cores em relação às normas WCAG, com a proporção exata mais os resultados de aprovação ou reprovação AA e AAA - Escolher e amostrar cores com um seletor completo, incluindo um conta-gotas para recolher qualquer pixel no ecrã - Mudar as unidades de medida entre px, rem, pt e em, aplicadas tanto aos campos como ao código exportado 🖱️ Como funciona Usar o FontLens leva segundos. Realce as palavras que deseja estudar, clique com o botão direito na seleção e escolha "Inspecionar tipo de letra com FontLens" no menu. O painel aparece sobre a página atual, bem estilizado para que nunca colida com o aspeto do próprio site. A partir daí, pode ler os detalhes, copiar o que precisa ou começar a editar. A pré-visualização ao vivo é onde a diversão começa. Mude a redação para testar um título real, ajuste o tamanho, o peso ou defina uma nova cor de fundo para ver como o tipo se comporta. As suas edições permanecem enquanto navega entre páginas e regressa mais tarde, para que uma ideia que começou num site o espere no próximo. Quando quiser os valores originais de volta, o botão "Repor para o site" restaura tudo o que a página realmente usa. Precisa do recurso bruto? Para um tipo de letra web descarregável, um botão obtém o ficheiro real do seu local @font-face. Para um tipo de letra que já vem com o seu sistema operativo, o FontLens informa que é um tipo de letra incorporado, para que saiba que está disponível sem qualquer download. 🔒 Privacidade em primeiro lugar O FontLens funciona inteiramente dentro do seu navegador. Não há recolha de dados, não há rastreamento, não há análises e não há servidores externos envolvidos na inspeção de texto. Tudo o que examinar permanece na sua máquina. A extensão faz exatamente um pedido de rede, e apenas quando pressiona deliberadamente "Descarregar tipo de letra", altura em que contacta a própria fonte desse tipo de letra para recuperar o ficheiro. Mais nada sai do seu dispositivo. As permissões são deliberadamente 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 que selecionou na aba onde a invocou, e em nenhum outro lugar. O armazenamento mantém o seu texto de pré-visualização e as suas preferências de unidade e formato para que sejam lembradas da próxima vez. Não há acesso amplo ao seu histórico de navegação e não há permissões de host abrangentes. 👥 A quem se destina - Web designers que desejam identificar um tipo de letra, capturar uma paleta e reutilizar estilos rapidamente - Desenvolvedores front-end a combinar um mockup ou a levantar valores exatos de família de tipos de letra e espaçamento para o código - Engenheiros de UI e UX a construir sistemas de tipos de letra consistentes e de marca - Estudantes a aprender CSS e tipografia que desejam ver como os sites reais são construídos - Auditores de acessibilidade a verificar se o texto cumpre os requisitos de contraste WCAG antes da publicação - Blogueiros, profissionais de marketing e leitores curiosos que simplesmente querem saber que tipo de letra um site está a usar ✨ Por que as pessoas o mantêm - Um clique com o botão direito dá-lhe a resposta em vez de ter de vasculhar as ferramentas de desenvolvimento - O código está pronto a copiar em CSS simples, Tailwind, SCSS ou SASS, para que possa ser inserido diretamente no seu projeto - A pré-visualização editável permite-lhe prototipar escolhas de tipo sem tocar numa única linha de código - O verificador de contraste incorpora a acessibilidade no seu fluxo de trabalho, em vez de a deixar como um pormenor - O seletor de cores e o conta-gotas significam que pode amostrar e reutilizar cores exatas de qualquer parte da página - Os temas claro e escuro seguem automaticamente o seu sistema operativo, para que se sinta em casa dia ou noite - A mudança de unidades entre px, rem, pt e em mantém a saída alinhada com a forma como o seu código está escrito 🎨 Um olhar mais atento aos detalhes Tipografia é mais do que um nome. O FontLens expõe as pequenas decisões que fazem com que o texto pareça correto, desde o peso de um título até o espaço livre na altura da linha e o rastreamento subtil do espaçamento entre letras. Ver esses valores lado a lado ajuda a entender por que um design funciona e como recriá-lo. O distintivo do provedor também adiciona contexto, informando rapidamente se está a ver um ativo do Google Fonts, um tipo de letra do Adobe Fonts, um ficheiro autoalojado ou um sistema padrão, o que é frequentemente a primeira pista quando procura combinar ou obter um tipo de letra. As ferramentas de cor vão além de uma leitura estática. O seletor oferece um quadrado HSV com seletores de matiz e alfa, e fala HEX, RGB e HSL para que possa trabalhar no formato que mais lhe convier. Combine isso com o conta-gotas e poderá levantar o tom preciso de qualquer elemento e inseri-lo na sua pré-visualização ou nas suas notas. 🚀 Comece a inspecionar Adicione FontLens, realce algumas palavras e clique com o botão direito para revelar a tipografia, os estilos e as cores por trás de qualquer página. É um companheiro rápido, privado e genuinamente útil para qualquer pessoa que se preocupe com a forma como a web se lê. Instale-o, mantenha-o à mão e nunca mais se questione sobre um tipo de letra misterioso.