Como ya sabéis, en Silo nos encantan las tipografías. Hemos visto 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 gusto con el que se han elegido 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 averiguar que tipografía está usando una web. En una de ellos tomaremos una imagen como referencia, 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 referencia 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 acceso 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 herramienta 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 decente), y el programa 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á limitado 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 también es una buena herramienta para un diseñador gráfico. Y esta es una de esas ocasiones en la que se le puede sacar partido. Si no estás acostumbrado a usar esta herramienta, 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 lado 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 atajo de teclado para abrirlo: Control+Shift+I en Windows, y Command+Shift+I en Mac, o clicando el botón 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 lado está la tipografía de dicho texto. En la siguiente 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 realmente 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 exclusiva 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 llamada 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 experimentar un poco por si queremos probar un tamaño de fuente diferente, espaciado, peso, altura de línea 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 listado 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 favorito por su sencillez. De entre todos los plugins existentes, me quedo con VisBug, por sus opciones e interfaz amigable. Una vez lo tengamos instalado en nuestro navegador, solo habrá que apretar su icono y aparecerá una barra de opciones en la parte izquierda. Si clicamos en el segundo icono (una i dentro 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, también nos dirá su color, alineación, peso, altura de línea… Una herramienta tremendamente útil para aquellos que no estén muy familiarizados con el inspector web, y quieran algo 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 elegir 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 empezar con esa base, es una excelente forma de comenzar cualquier proyecto.
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
