Como saber que tipografía está usando una web • Silo Creativo

Como ya sabéis, en Silo nos encantan las tipografías. Hemos pasado como realizar combinaciones para que nuestros textos sean llamativos y originales, o ver las diferentes clases de tipografías existentes, por poner un par de ejemplos. Pero una de las mejores formas de inspirarse cuando vamos a usar tipografías es ver el trabajo de otros diseñadores. Y si nos centramos en el diseño web, es conocer que tipografías se han usado en una web.

Es muy habitual entrar en una web, y notar el buen alegría con el que se han electo las tipografías. Una fuente potente usada en un banner, o una con una buena legibilidad para textos. Son muchos las tipografías que podemos encontrar en una web según la función que cumplan, o simplemente nos gusta su estética. Y como somos curiosos por naturaleza, necesitamos saber que tipografía es, ya que es posible que podamos añadirlas en futuros proyectos.

Para esta tarea, en este artículo veremos tres métodos diferentes con los que acechar que tipografía está usando una web. En una de ellos tomaremos una imagen como remisión, muy conveniente si lo único que tenemos es una captura de la web. En los otros dos métodos usaremos un navegador web cualquiera, tomando como remisión los tres más usados actualmente: Chrome, Edge y Firefox. Aunque es aplicable a cualquier otro.

1. Usando imágenes de la tipografía

Empezamos por este método, pero personalmente solo lo recomiendo si no tenemos ataque a la web y lo único de lo que disponemos es de una captura de pantalla, ya que es posible que no logremos dar con la tipografía exacta, sino con una muy parecida. Eso sí, es la ideal para saber que fuente usa un logotipo que esté en formato de imagen o vectorial.

La utensilio online que usaremos es la que nos ofrece MyFonts con WhatTheFont. Solo tendremos que subir una imagen a su web (preferiblemente a buena calidad y con un contraste digno), y el software nos dirá que hagamos una selección del texto que queramos analizar. Una vez hecho esto, nos dará diferentes opciones de tipografías similares a la imagen que hayamos subido. Nuestro papel será ir viendo diferentes grafías hasta ver cual es la tipografía correcta o la más similar.

Puede resultar un proceso tedioso de realizar, o que no veamos una tipografía exacta, ya que está restringido a la biblioteca interna de WhatTheFont. Pero a veces es la única forma de realizar este trabajo si solo disponemos de una imagen.

2. Utilizando el inspector del navegador web

El inspector de un navegador web es uno de los mejores amigos de un diseñador web, pero incluso es una buena utensilio para un diseñador descriptivo. Y esta es una de esas ocasiones en la que se le puede sacar partido. Si no estás acostumbrado a usar esta utensilio, te recomendamos que le eches un vistazo a nuestro artículo sobre como inspeccionar CSS con el navegador.

En este apartado vamos a hacer una diferenciación entre dos tipos de navegadores. Por un flanco Chrome y Edge (y todos los navegadores basados en Chromium, como Opera o Brave), y por otro Firefox. Eso si, sea cual sea nuestro navegador, siempre vamos a usar el mismo tropel de teclado para abrirlo: Control+Shift+I en Windows, y Command+Shift+I en Mac, o clicando el brote derecho en cualquier parte de la web, y seleccionando en el menú desplegable Inspeccionar.

Con Chrome / Edge

Abriendo nuestro inspector, veremos que se nos abre el inspector con tres paneles. Buscamos el texto de la web del que queremos saber su tipografía, y en el segundo panel del inspector, seleccionamos la pestaña Computed. Buscamos la fila font-family, veremos que a su flanco está la tipografía de dicho texto. En la ulterior imagen podéis ver la fuente que se usamos en la web de SiloCreativo.

Aparte de la información sobre qué tipografía es, encontramos su tamaño, color, peso… En definitiva, el estilo completo del texto que se está usando en la web. Esta pestaña es verdaderamente de utilidad.

Con Firefox

En el navegador de Mozilla el proceso es similar, pero la información aparece en otra zona diferente. Y es que Firefox tiene una pestaña monopolio solo para los estilos de las tipografías de una web. De nuevo, abrimos el inspector, y buscamos el texto que nos interesa. Si nos vamos al tercer panel, veremos que tiene una pestaña emplazamiento Tipografía. Bastante evidente lo que vamos a encontrar ahí.

También podemos ver como es posible modificar diferentes aspectos de la tipografía directamente en la web mediante unos deslizables. Así podemos observar un poco por si queremos probar un tamaño de fuente diferente, extendido, peso, importancia de trayecto o como se ve en cursiva.

Como extra, si seguimos mirando lo que nos ofrece esta pestaña, veremos un apartado llamado Todas las tipografías de la página, donde se ofrece un lista de esto mismo. Ideal para saber que tipo de combinaciones de fuentes se están utilizando en una web.

3. Mediante plugins para el navegador

Este método lo he descubierto recientemente, pero se ha convertido en mi privilegiado por su sencillez. De entre todos los plugins existentes, me quedo con VisBug, por sus opciones e interfaz atento. Una vez lo tengamos instalado en nuestro navegador, solo habrá que azuzar su icono y aparecerá una mostrador de opciones en la parte izquierda. Si clicamos en el segundo icono (una i adentro de un círculo), solo tendremos que poner el cursor sobre cualquier texto y automáticamente nos aparecerá un tooltip con su tipografía.

Pero no solo eso, incluso nos dirá su color, fila, peso, importancia de trayecto… Una utensilio tremendamente útil para aquellos que no estén muy familiarizados con el inspector web, y quieran poco más rápido y directo, con un par de clics tendremos en pantalla toda la información.

Conclusiones

Como hemos podido ver, podemos conocer de forma sencilla la tipografía que usa cualquier web. Solo tenéis que nominar el método que más os guste o que más encaje con vuestra forma de trabajar. Y es que en muchas ocasiones, tener referentes sobre webs que sabemos que funcionan o que ofrece un diseño vistoso, y nacer con esa saco, es una excelente forma de comenzar cualquier tesina.

Si tenéis algún tipo de pregunta, sugerencia o experiencia sobre este tema, nos lo podéis dejar en la sección de comentarios. Seguro que conocéis alguna otra forma de conseguir adivinar que tipografía está usando una web