Si alguna vez te ha cautivado por completo una fuente que viste en un sitio web, es posible que te hayas preguntado cómo descubrir cómo se llama para poder usarla en tu propio contenido. Una tipografía de calidad puede mejorar la experiencia de lectura de sus visitantes, por lo que puede valer la pena hacer un esfuerzo para encontrarla. Independientemente de la razón por la que verifique qué fuente se usa en un sitio web, existen muchas herramientas que pueden ayudarlo.
En este artículo, discutiremos por qué es posible que desee ver qué fuente está utilizando un sitio web. También le mostraremos cómo hacerlo.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Como ya mencionamos, las fuentes hermosas y legibles pueden mejorar la experiencia del usuario (UX) y la legibilidad de su sitio. También garantiza que los visitantes puedan interactuar cómodamente con su contenido sin tener que esforzarse por descifrarlo. Si su texto es elegante pero ilegible, a los lectores les resultará difícil entender o apreciar su material.
Los botones de llamada a la acción (CTA) también pueden resultar inútiles si su texto no es legible. Esta es la razón por la que puede resultarle útil mantener una lista de fuentes que llamen su atención por ser elegantes y legibles . Luego puede usarlos en su sitio o para un cliente en el futuro.
Cómo ver qué fuente está usando un sitio web (3 métodos disponibles)
Hay varios métodos que puede usar para verificar qué fuente está usando un sitio web. La función de inspección de su navegador es una excelente solución, pero hay extensiones que pueden producir efectos equivalentes. Incluso puede encontrar fuentes de imágenes usando herramientas en línea. Echemos un vistazo a cada una de estas opciones.
1. Identifique las fuentes con la herramienta Inspector del navegador
Una de las formas más fáciles de verificar qué fuente está usando un sitio web es con la herramienta de inspección de su navegador. Aunque trabajaremos con Chrome Inspector en este ejemplo, vale la pena señalar que otros navegadores tienen funciones equivalentes.
Primero, haga clic derecho en la página web que contiene la fuente que desea encontrar. En el menú resultante, seleccione Inspeccionar:
Si prefiere usar un atajo de teclado, pruebe Ctrl+Shift+I para Windows o Linux. Si usa una Mac, el equivalente es Cmd+Shift+I.
En la ventana del lado derecho de la pantalla, busque el texto con la fuente que desea verificar. Se resaltará cuando seleccione el elemento HTML correspondiente:
A continuación, haga clic en la pestaña Calculado y busque «familia de fuentes»:
Debería ver el nombre de la fuente y su estilo enumerados aquí.
Para ver el CSS relacionado con la fuente, busque en la pestaña Estilos . Puede desplazarse para buscar valores relacionados con la fuente. Sin embargo, como puede haber anulaciones y reglas de estilo irrelevantes aquí, la pestaña Calculado suele ser más útil.
2. Encuentra fuentes a través de una extensión del navegador
Las extensiones del navegador pueden proporcionar una forma más sencilla de encontrar detalles de fuentes en un sitio web, especialmente si no se siente cómodo con el Inspector. Además, generalmente pueden entregar la respuesta que está buscando más rápido para que pueda volver a la tarea en cuestión.
Algunos de estos complementos incluyen:
- Fontanello : de uso gratuito, esta extensión le permite encontrar el nombre, el peso, el estilo y más de una fuente simplemente resaltándola y haciendo clic derecho sobre ella mientras navega.
- WhatFont : simplificando aún más la detección de fuentes, WhatFont le permite ver el nombre de un tipo de letra con solo pasar el cursor sobre él.
- CSS Peeper : Hecha pensando en los diseñadores web , esta extensión es un poco más robusta y puede brindarle detalles adicionales del código CSS de la página web.
Sin embargo, cada una de estas extensiones tiene un soporte de navegador variado. WhatFont está disponible para Firefox, Chrome, Safari e Internet Explorer. Fontanello, por otro lado, solo está disponible para Firefox y Chrome. CSS Peeper es una herramienta específica de Chrome que no podrá usar con ninguna otra plataforma.
Con el fin de encontrar rápidamente el nombre de una fuente específica, WhatFont es la opción más fácil de usar. Dado que también es compatible con la mayoría de los navegadores, lo usaremos para una demostración rápida.
Una vez que instale WhatFont, puede verificar qué fuente está usando un sitio web al activarlo en la barra de herramientas de su navegador y pasar el cursor sobre algún texto:
Cuando pasas el cursor sobre el texto por primera vez, solo verás el nombre de la fuente. Sin embargo, al hacer clic en el nombre, se mostrará una ventana emergente ampliada con más detalles, como el tamaño, el peso, el color y la altura de la línea. También puede identificar si un tipo de letra está disponible a través de Typekit o Google Fonts.
Una vez que haya terminado de verificar los detalles de la fuente, puede salir de la herramienta usando el botón Salir de WhatFont en la esquina superior derecha de la ventana de su navegador.
3. Detectar fuentes en imágenes
Finalmente, también puede intentar ver las fuentes utilizadas en las imágenes. Esto incluye tipos de letra que hayas visto en logotipos o infografías. En nuestra experiencia con los detectores de fuentes , WhatTheFont es la herramienta en línea más efectiva para este trabajo.
Para usar WhatTheFont, deberá cargar la imagen en cuestión y seleccionar la sección con la fuente correspondiente:
Luego devolverá una página de resultados con varias fuentes que son similares, si no coinciden exactamente, a la que está tratando de identificar:
Su tasa de éxito aquí puede variar según la fuente y la popularidad de la fuente. Si el nombre exacto del tipo de letra es muy importante para usted, puede ser difícil encontrar una herramienta que le brinde lo que desea.
Sin embargo, si está abierto a usar una fuente similar a la que encontró en una imagen, un detector en línea debería satisfacer sus necesidades perfectamente.
Conclusión
Las fuentes legibles y visualmente atractivas pueden mejorar la experiencia de lectura de los visitantes de su sitio web. Esto podría indicarle que esté atento a los nuevos tipos de letra que podría usar en su sitio o para sus clientes. Independientemente del motivo por el que quieras comprobar qué fuente está utilizando un sitio web, hay muchas herramientas que pueden ayudarte.
En esta publicación, discutimos tres métodos para ver qué fuente está usando un sitio web:
- Identifique las fuentes usando la herramienta de inspección de su navegador.
- Encuentre fuentes usando una extensión de navegador como WhatFont .
- Detecta fuentes en imágenes usando WhatTheFont .
Ahora que sabe cómo averiguar qué fuente está usando un sitio web, también puede ser interesante obtener más información, como qué software lo está impulsando o qué tema de WordPress está usando el sitio web . ¡Aprender a inspeccionar un sitio web puede ayudarlo a lograr sus propios objetivos de sitio web y brindarle una mejor comprensión de cómo funciona el sitio web!
¿Tiene alguna pregunta sobre cómo verificar qué fuente se usa en un sitio web? ¡Háganos saber en la sección de comentarios!
Imagen de rudall30 / shutterstock.com