FontLens

Selecciona cualquier texto, haz clic derecho e inspecciona instantáneamente su fuente, tamaño, peso, color y CSS. Copia, modifica,…

¿Alguna vez has llegado a una página, admirado la tipografía y te has preguntado: "¿qué fuente es esta?" FontLens resuelve esa pregunta con un solo clic. Selecciona cualquier texto en cualquier sitio web, haz clic derecho y elige "Inspeccionar fuente con FontLens". Se abre un panel limpio y enfocado directamente sobre la página y revela exactamente cómo está estilizado ese texto: la tipografía, su tamaño, peso, altura de línea, color y cada otro detalle detrás del diseño. Si eres un diseñador que realiza ingeniería inversa de un diseño, un desarrollador que compara una especificación o simplemente sientes curiosidad por un hermoso titular, esta herramienta convierte cualquier página web en un libro abierto de tipografía. FontLens es un buscador de fuentes y un inspector de CSS en uno. No solo te da el nombre de la familia de fuentes, sino que te entrega código listo para usar, un entorno interactivo para probar ideas y herramientas de accesibilidad para asegurarte de que tu texto sea legible. Sin cuenta. Sin registro. Simplemente selecciona, haz clic derecho y examina. 🔍 Lo que puedes hacer - Revelar la tipografía completa de cualquier palabra seleccionada: familia de fuentes, tamaño de fuente, peso de fuente, altura de línea y color de un vistazo. - Ver estilos adicionales que son fáciles de pasar por alto, como el espaciado entre letras, la transformación de texto y el estilo de fuente. - Copiar cualquier propiedad con un solo clic o tomar todo el conjunto de reglas como un fragmento CSS completo. - Convertir ese fragmento a Tailwind, SCSS o SASS mediante pestañas sencillas, y luego copiarlo completo o línea por línea. - Experimentar en una vista previa interactiva y editable: reescribe las palabras de ejemplo, ajusta los valores, cambia el fondo y observa cómo se actualiza al instante. - Identificar de dónde proviene una fuente web con una insignia de proveedor (Google Fonts, Adobe Fonts, autoalojada o una tipografía de sistema integrada). - Guardar una fuente web en tu computadora con el botón "Descargar fuente", obtenida directamente de su propia fuente. - Verificar el contraste de color según los estándares WCAG, con la proporción exacta y los resultados de aprobación o fallo AA y AAA. - Seleccionar y muestrear colores con un selector completo, incluyendo un cuentagotas para tomar cualquier píxel en la pantalla. - Cambiar las unidades de medida entre px, rem, pt y em, aplicadas tanto a los campos como al código exportado. 🖱️ Cómo funciona Usar FontLens toma segundos. Resalta las palabras que deseas estudiar, haz clic derecho en la selección y elige "Inspeccionar fuente con FontLens" en el menú. El panel aparece sobre la página actual, con un estilo ordenado para que nunca choque con la apariencia del propio sitio. Desde allí puedes leer los detalles, copiar lo que necesites o comenzar a editar. La vista previa en vivo es donde la diversión comienza. Cambia la redacción para probar un titular real, ajusta el tamaño, el peso o establece un nuevo color de fondo para ver cómo se ve el tipo de letra. Tus ediciones se mantienen mientras te mueves entre páginas y regresas más tarde, por lo que una idea que comenzaste en un sitio te estará esperando en el siguiente. Cuando desees los valores originales, el botón "Restablecer a sitio" restaura todo lo que la página realmente utiliza. ¿Necesitas el activo original? Para una fuente web descargable, un botón busca el archivo real desde su ubicación @font-face. Para una tipografía que ya viene con tu sistema operativo, FontLens te informa que es una fuente integrada, por lo que sabes que está disponible sin necesidad de descarga. 🔒 Privacidad primero FontLens se ejecuta completamente dentro de tu navegador. No hay recopilación de datos, ni seguimiento, ni análisis, y no hay servidores externos involucrados en la inspección de texto. Todo lo que examinas permanece en tu máquina. La extensión realiza exactamente una solicitud de red, y solo cuando presionas deliberadamente "Descargar fuente", momento en el cual se comunica con la propia fuente de esa fuente para recuperar el archivo. Nada más sale de tu dispositivo. Los permisos son intencionadamente limitados. El permiso de menú contextual agrega la entrada del clic derecho. El permiso de pestaña activa permite que la herramienta lea el texto que seleccionaste en la pestaña donde la invocas, y en ningún otro lugar. El almacenamiento guarda tu texto de vista previa y tus preferencias de unidad y formato para que se recuerden la próxima vez. No hay acceso amplio a tu historial de navegación ni permisos de host generales. 👥 Para quién es - Diseñadores web que desean identificar una tipografía, capturar una paleta y reutilizar estilos rápidamente. - Desarrolladores front-end que comparan un prototipo o incorporan valores exactos de familia de fuentes y espaciado en el código. - Ingenieros de UI y UX que construyen sistemas de tipografía consistentes y de marca. - Estudiantes que aprenden CSS y tipografía que desean ver cómo se construyen los sitios reales. - Auditores de accesibilidad que verifican que el texto cumple con los requisitos de contraste de WCAG antes de su lanzamiento. - Bloggers, especialistas en marketing y lectores curiosos que simplemente desean saber qué fuente está utilizando un sitio. ✨ Por qué la gente la conserva - Un clic derecho te da la respuesta en lugar de tener que buscar en las herramientas de desarrollo. - El código está listo para copiar en CSS plano, Tailwind, SCSS o SASS, por lo que se integra directamente en tu proyecto. - La vista previa editable te permite prototipar opciones de tipografía sin tocar una sola línea de código. - El verificador de contraste integra la accesibilidad en tu flujo de trabajo en lugar de dejarla como una ocurrencia tardía. - El selector de color y el cuentagotas significan que puedes muestrear y reutilizar colores exactos de cualquier parte de la página. - Los temas claros y oscuros siguen automáticamente tu sistema operativo, para que te sientas como en casa de día o de noche. - El cambio de unidades entre px, rem, pt y em mantiene la salida alineada con la forma en que está escrito tu código base. 🎨 Una mirada más cercana a los detalles La tipografía es más que un nombre. FontLens saca a la luz las pequeñas decisiones que hacen que el texto se sienta bien, desde el peso de un encabezado hasta el espacio para respirar en la altura de línea y el sutil seguimiento del espaciado entre letras. Ver estos valores uno al lado del otro te ayuda a comprender por qué funciona un diseño y cómo recrearlo. La insignia del proveedor también agrega contexto, diciéndote de un vistazo si estás viendo un activo de Google Fonts, una fuente de Adobe Fonts, un archivo autoalojado o un valor predeterminado del sistema, lo que a menudo es la primera pista cuando te propones igualar o encontrar una tipografía. Las herramientas de color van más allá de una lectura estática. El selector ofrece un cuadrado HSV con deslizadores de tono y alfa, y habla HEX, RGB y HSL para que puedas trabajar en el formato que más te convenga. Combina eso con el cuentagotas y podrás tomar el tono preciso de cualquier elemento y colocarlo en tu vista previa o en tus notas. 🚀 Empieza a inspeccionar Añade FontLens, resalta algunas palabras y haz clic derecho para revelar la tipografía, los estilos y los colores detrás de cualquier página. Es un compañero rápido, privado y genuinamente útil para cualquiera que se preocupe por cómo se lee la web. Instálala, tenla a mano y nunca más te preguntarás sobre una fuente misteriosa.