Si alguna vez has visto una web particularmente atractiva y te has preguntado cómo ver qué tipos de letra usa un sitio web, la respuesta es tan simple como abrir el inspector de tu navegador. Cada bit de un sitio web es interpretado en tu navegador. Por lo tanto, si sabes cómo usar tu inspector del navegador correctamente no sólo puedes averiguar las fuentes si no también las imágenes que tiene, las propiedades CSS de cualquier otro elemento que se encuentra en la página.
En esta entrada veremos cómo usar el inspector del navegador Chrome para encontrar qué fuentes utiliza un sitio web, e incluso cómo empezar a jugar con ellas. Pero antes te explicaré cómo se accede y qué funcionalidades tienes disponible en dicho inspector.
Acceder al inspector de Chrome
Si usas el navegador Chrome y quieres inspeccionar una web, lo primero que debes hacer es acceder a la ventana del inspector. Para ello, hay varias formas:
- Pulsando la tecla F12, o bien
- Pulsando el botón derecho sobre un determinado elemento y en el menú que se abre, acceder a la opción
Inspeccionar. La ventaja de este método es que te resalta directamente el elemento en cuestión, o - Pulsando la combinación de teclas Control+Shift+I (en Windows) o Cmd+Alt+I (en Mac), o
- Accediendo al menú de Chrome (3 puntitos de la barra superior a la derecha) » Más herramientas » Herramientas para desarrolladores.
La ventana del inspector puede mostrarse integrada en la propia ventana del navegador o mostrarse en una ventana a parte. Para acceder a estas opciones puedes hacerlo pulsando el icono (3 puntitos) de configuración arriba a la derecha del inspector y cambiando el valor de la propiedad «Dock Side».
También tienes la opción de visualizar el contenido de la página en modo vista ordenador o como si estuvieras visualizándolo en un dispositivo móvil. Haz clic en el segundo botón que encuentras a la izquierda de la barra superior del inspector y verás cómo automáticamente se mostrará el contenido como si estuvieras accediendo desde un dispositivo móvil.
Incluso también puedes indicar el tipo de dispositivo en el que quieres que se muestre, el tamaño o si quieres mostrarlo en modo vertical u horizontal.
Pestañas principales del inspector
Como ya habrás visto, el inspector se compone de diferentes pestañas.
Desde cada una de ellas tendrás acceso a diferentes funcionalidades y características:
- Elements: muestra el código HTML de la página, así como los estilos que se aplican. También puedes modificarlos y añadir nuevas reglas rápidamente.
- Console: muestra los diferentes mensajes de error y advertencia que se producen en la página (imágenes que no cargan, errores de javascript, …)
- Sources: muestra el árbol de recursos de la página. Puedes ver de dónde se obtienen los diferentes recursos y modificarlos.
- Network: muestra las diferentes peticiones que se realizan desde el sitio web, accediendo al contenido de la petición, la respuesta obtenida, tiempos…
- Performance: muestra los procesos que se van ejecutando y sirve para medir el rendimiento de la página.
- Memory: muestra la memoria consumida durante la carga y ejecución de la página web.
- Application: muestra información de utilidad de los recursos empleados por una aplicación web.
- Security: muestra información sobre los diferentes sitios a los que se accede desde la página y sus certificados respectivos.
- Audits: te permite generar un informe de auditoria para para comprobar errores.
- Hay plugins que añaden pestañas y funcionalidad al inspector, por lo que puede haber más pestañas. En la imagen anterior, se muestra que tenemos instalado el plugin Redux DevTools.
Pestaña Elements
Volvamos ahora al tema que nos concierne: queríamos conocer la fuente de cualquier contenido de una página web.
Como ya te he comentado antes, desde la pestaña Elements accedes al código HTML y a los estilos de los diferentes elementos que hay en la página en la que te encuentras.
Como ves en la imagen anterior, a la izquierda tienes una ventana principal que te muestra el código fuente. Y a la derecha tienes el panel de las reglas de estilo CSS que se están aplicando a los distintos elementos de la página.
De hecho en el panel de estilos tienes tres pestañas:
- Styles: muestra las reglas CSS aplicadas y puedes modificarlas y añadir nuevas.
- Computed: muestra todas las reglas aplicadas al elemento, con un panel que representa los bordes, margen y relleno del mismo.
- Event Listeners: muestra el árbol de eventos que se han lanzado en la página y controles afectados por ellos.
Ver los detalles de un elemento
Así, por ejemplo si te vas a nuestra página principal de Nelio Software, seleccionas las palabras Nelio Software del título y haces clic al botón derecho para inspeccionar de qué elemento se trata, precisamente se abre el inspector mostrándote la imagen que encuentras un poco más arriba.
En la imagen del inspector, puedes ver que la ventana principal me está indicando que el estilo del título «Nelio Software» es h1.
En esta misma ventana, tienes la opción de hacer clic con el botón derecho a cualquier atributo o texto y modificarlo o eliminarlo. Evidentemente, cualquier cambio que aquí realices, no te va a cambiar el contenido original pero precisamente es una herramienta muy útil cuando estás diseñando páginas y quieres hacerte una idea de cómo se ve cualquier cambio que hagas.
Ver el tipo de letra
Ahora ya sabes que se trata de un título pero, ¿y el tipo de letra?
Pues muy sencillo, en la pestaña Computed del inspector encontrarás todas las propiedades del elemento seleccionado. Baja hasta el atributo font-family y allí encontrarás exactamente el tipo de letra que tiene el título de nuestra página web.
Y si tienes curiosidad en cómo quedaría ese elemento en caso de querer cambiar el tipo de letra, vas a la pestaña de Styles, bajas al atributo de font-family y lo puedes modificar directamente con el valor que quieras.
Automáticamente verás tu web con el tipo de fuente cambiado
Como puedes ver, el inspector de Google Chrome es una herramienta muy cómoda y fácil de usar para ir jugando y probando el diseño que te quedaría tras aplicar cualquier modificación a un elemento.
Nelio A/B Testing
Pruebas A/B nativas en WordPress
Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.
¿Y el tipo de letra de una imagen?
El inspector de Google Chrome, como ya has visto, te permite ver las propiedades de cualquier elemento de tu página. Pero si lo que quieres ver es el tipo de letra de una imagen que hay en una web, esto no lo podrás ver con el inspector. Ya que el inspector te mostrará las propiedades de la imagen como tal insertada en tu página pero no te mostrará los detalles del contenido de esa imagen.
Para ello, existen algunas herramientas, como Font Squirrel Matcherator o Whatfontis.com, que te pueden ayudar a indentificar el tipo de letra utilizado en una imagen. Para ello, en ambas herramientas debes o bien descargar la imagen (en whatfontis.com también puedes indicar la URL de la imagen) y luego seleccionar la parte de la imagen que contiene la letra que quieres identificar.
Ambas herramientas te mostrarán todo un conjunto de fuentes que coinciden con el texto seleccionado de forma muy aproximada. Pero si sospechas que no es una coincidencia exacta, puedes buscar en Google fuentes similares a las que te ha indicado la herramienta y ya verás lo que te aparece.
Imagen destacada de Gemma Evans en Unsplash.
Deja una respuesta