Detectar fuentes fácilmente con Fontface Ninja

A veces, navegando por Internet nos encontramos con un tipo de letra que nos llama la atención como diseñadores. Si no la conocemos, creo que todos hacemos lo mismo: hacemos uso del Inspeccionar Elemento del depurador de código de Chrome para saber el nombre de la fuente y así encontrarla para poder utilizarla en nuestros proyectos personales o profesionales. 

Una vez abierto el inspeccionador de elementos de Chrome mediante la selección del texto a analizar, podemos ver todo el código CSS relacionado con el texto que contiene la fuente que tanto nos gusta.

Sin embargo hay un problema. Como puedes ver en la segunda imagen, el texto seleccionado contiene estilos con muchos selectores. Chequear todos, uno por uno, te va a llevar mucho tiempo.

Usar Fontface Ninja para detectar fuentes

Aquí es donde entra Fontface Ninja. Es una extensión para navegador que te ayuda a identificar una fuente por su nombre. Y todo lo que tienes que hacer es pasar el ratón por encima de la fuente que te interesa. En la parte superior donde esta extensión te muestra el nombre de la fuente, Fontface Ninja te proporcionará más información como el tamaño y la línea de espaciamiento...

Instalando Fontface Ninja

Puedes descargarte Fontface Ninja para utilizarlos en el navegador que tú prefieras:

Fontface Ninja para Chrome
Fontface Ninja para Safari

Utilizando Fontface Ninja

Una vez instalado, un icono de un ninja saltando aparecerá próximo a la barra de direcciones de tu navegador. Haz clic en la imagen del ninja para activar el plugin. Ahora, puedes pasar el ratón por encima del texto de una web que tenga una fuente que te interese y aparecerá un pequeño tooltip mostrando información acerca de la fuente utilizada.

Para probar la fuente, clica en ella, y aparecerá una barra en la parte superior de la web en la que podrás teclear cualquier texto con la fuente seleccionada. Además puedes configurar otros parámetros como el tamaño de la fuente, o por ejemplo, el espaciado entre letras.

Para ocultar todas las imágenes y mantener tu atención exclusivamente en la tipografía, haz clic en la opción de Mask, que está al lado de la opción del espaciado entre caracteres. Este sencillo plugin te hará la vida más sencilla a la hora de detectar tipografías en la web, te lo digo yo que soy un enamorado de las fuentes.

Y este ha sido el artículo en el que trataba explicaros cómo funciona el plugin Fontface Ninja ideal para detectar fuente fácilmente, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP