FontLens

Seleccione cualquier texto, haga clic derecho e inspeccione al instante su fuente, tamaño, peso, color y CSS. Copie, ajuste,…

¿Alguna vez has aterrizado en una página, admirado la tipografía y te has preguntado "qué fuente es esta"? FontLens te responde esa pregunta con solo un clic. Selecciona cualquier texto en cualquier sitio web, haz clic derecho y elige "Inspeccionar fuente con FontLens". Un panel limpio y enfocado se abre 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. Ya seas un diseñador que realiza ingeniería inversa de un diseño, un desarrollador que coincide con 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 nombra la familia de fuentes, sino que te entrega código listo para usar, un espacio de trabajo 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 - Revela la tipografía completa de cualquier palabra seleccionada: familia de fuentes, tamaño de fuente, peso de fuente, altura de línea y el color de un vistazo - Ve estilos adicionales que son fáciles de pasar por alto, como el espaciado de letras (letter-spacing), la transformación del texto (text-transform) y el estilo de fuente (font-style) - Copia cualquier propiedad individual con un solo clic, o toma todo el conjunto de reglas como un fragmento CSS completo - Convierte ese fragmento a Tailwind, SCSS o SASS a través de pestañas sencillas, luego copia todo o línea por línea - Experimenta en una vista previa interactiva y editable: reescribe las palabras de ejemplo, ajusta los valores, cambia el fondo y observa cómo se actualiza instantáneamente - Identifica de dónde proviene una fuente web con una insignia de proveedor (Google Fonts, Adobe Fonts, autoalojada o una tipografía de sistema integrada) - Guarda una fuente web en tu computadora con el botón "Descargar fuente", extraída directamente de su propia fuente - Verifica el contraste de color según los estándares WCAG, con la relación exacta más los resultados de aprobación o falla AA y AAA - Elige y muestra colores con un selector completo, incluido un cuentagotas para tomar cualquier píxel en la pantalla - Cambia 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" del menú. El panel aparece sobre la página actual, con un estilo impecable para que nunca entre en conflicto con el aspecto propio del sitio. Desde allí puedes leer los detalles, copiar lo que necesites o comenzar a editar. La vista previa en vivo es donde las cosas se ponen divertidas. 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. 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 espera en el siguiente. Cuando desees los valores originales de vuelta, el botón "Restablecer al sitio" restaura todo lo que la página realmente usa. ¿Necesitas el recurso 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 dice que es una fuente incorporada, para que sepas que está disponible sin ninguna 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 que se comunica con la propia fuente de esa fuente para recuperar el archivo. Nada más sale de tu dispositivo. Los permisos son deliberadamente limitados. El permiso del menú contextual agrega la entrada del clic derecho. El permiso de la 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 mantiene 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 generalizados. 👥 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 coinciden con un mockup o que transfieren valores exactos de familia de fuentes y espaciado al código - Ingenieros de UI y UX que construyen sistemas de tipo coherentes y alineados con la marca - Estudiantes que aprenden CSS y tipografía y que quieren ver cómo se construyen los sitios reales - Auditores de accesibilidad que verifican que el texto cumple con los requisitos de contraste WCAG antes de su lanzamiento - Blogueros, especialistas en marketing y lectores curiosos que simplemente quieren saber qué fuente está usando un sitio ✨ Por qué la gente lo conserva - Un clic derecho te da la respuesta en lugar de tener que buscar en las herramientas de desarrollador - 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 tipo sin tocar una sola línea de código - El verificador de contraste incorpora la accesibilidad a tu flujo de trabajo en lugar de dejarla como una ocurrencia tardía - El selector de color y el cuentagotas te permiten muestrear y reutilizar colores exactos de cualquier parte de la página - Los temas claro y oscuro siguen automáticamente tu sistema operativo, para que se sienta 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 de respiración en la altura de línea y el sutil seguimiento del espaciado de 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 recurso 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 buscar 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 mejor te convenga. Combínalo con el cuentagotas y podrás tomar el tono preciso de cualquier elemento y colocarlo en tu vista previa o tus notas. 🚀 Empieza a inspeccionar Agrega 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 a quien le importe cómo se lee la web. Instálalo, tenlo a mano y nunca más te preguntes sobre una fuente misteriosa.