Adivina el tipo de letra de una web con solo dos clics
Tipo de letra de una web. Si tienes alguna inquietud recuerda contactarnos a través de nuestras redes sociales, o regístrate y déjanos un comentario en esta página. También puedes participar en el WhatsApp. Si usas Telegram ingresa al siguiente enlace.
Cuando somos amantes del diseño, bien en general, o bien del diseño gráfico, nos fijamos en todos los elementos en una imagen, un cartel, un texto o una web. Muchas veces nos llama la atención la tipografía utilizada para una web o una sección concreta y queremos saber qué tipo de letra es. Existen varias maneras de averiguarlo.
Está claro que el tipo de fuente en una página web es uno de los elementos más importantes para dotar de personalidad a todo el sitio web. También existen otros parámetros como las imágenes que lo acompañan, los colores utilizados, los logos y, en general, cualquier otro elemento estético o decorativo.
El texto es la parte que más contenido suele aportar en un sitio web, con permiso de imágenes y vídeos. Un tipo de letra que atraiga y además sea legible también es fundamental. Por lo tanto, si necesitas saber la letra que utiliza una web en concreto para descargártela de Google Fonts, o te pica la curiosidad, existen varios métodos para identificarla.
Inspeccionar fuentes desde el navegador
La forma más rápida de conocer la fuente de la web en la que estamos navegando es utilizar el Inspector del navegador. Esta herramienta te muestra el código utilizado para la web que es “traducido” por el navegador para mostrarnos la página tal y como la vemos.
Google Chrome
Cuando estás navegando en Google Chrome existen tres maneras de abrir el Inspector:
- A través del menú superior: pulsamos en Ver y abrimos Opciones para desarrolladores, hacemos clic en Inspeccionar elementos.
- Dentro de la web pulsamos CTRL. + MAYUS + I en Windows o ALT + CMD + C en macOS.
- Sobre el texto hacemos clic con el botón derecho y pulsamos en Inspeccionar.
Una vez abierto verás cómo la pantalla de Chrome se divide en dos, en la parte izquierda sigues viendo la web y en la derecha todo su código. Solo con desplazar el cursor del ratón sobre los diferentes elementos de la web verás toda la información en código HTML y CSS en el Inspector.
En versiones anteriores tenías que “bucear” en el texto para encontrar los nombres d elas fuentes de cada sección. Ahora es mucho más sencillo porque te aparece directamente en pantalla sobre el propio texto. En este caso, el cuerpo del artículo está editado con Montserrat y tiene 16 píxeles de tamaño.
Si colocamos el cursor del ratón sobre el título del artículo relacionado del margen derecho veremos cómo cambia el tipo de fuente, en este caso a 20 píxeles de tamaño.
Safari
Los usuarios del navegador web de Apple podemos acceder al Inspector de elementos de otras tres formas similares a como lo hacemos en Chrome:
- Yendo al menú superior según esta ruta: Desarrollo / Mostrar inspector web.
- Pulsando ALT. + CMD. + I en el teclado (macOS).
- Haciendo clic con el botón derecho del ratón sobre el texto de la web y pulsando en Inspeccionar elemento.
En este caso, el Inspector de Safari no es tan intuitivo como lo es Chrome. También se divide la pantalla en dos mostrando la web a la izquierda y el Inspector a la derecha, pero no nos va a mostrar la fuente directamente cuando pasemos el ratón por el texto.
Por lo que, en vez de analizar el código directamente, pulsaremos en el botón Fuentes del menú superior del Inspector. Éste mostrara un menú lateral en la parte izquierda, desplegamos Tipos de letra y veremos las fuentes utilizadas en la web.
Mozilla Firefox
El Inspector de Firefox también se puede invocar de tres maneras:
- Desde el menú superior Herramientas / Herramientas del navegador / Herramientas para desarrolladores web.
- Con el acceso directo CTRL. + MAYUS. + C en Windows o ALT + CMD + I en macOS.
- Botón derecho del ratón y pulsar en Inspeccionar.
En este caso se nos desplegará el Inspector en la parte inferior de la pantalla del navegador con tres secciones. Para ver toda la información de la tipografía tenemos que pulsar en el botón Tipografía de la columna de la derecha.
Opera
Opera es un navegador web con un diseño alternativo, aunque tampoco demasiado diferente al resto. Se accede al Inspector de elementos de esta manera:
- Pulsando en Autor en la barra de menú superior y después en Herramientas de desarrollo.
- Pulsando en el teclado CTRL. + MAYUS. + I en Windows o ALT + CMD + I en macOS.
- Botón derecho del ratón e Inspeccionar elemento.
Se nos abrirá el Inspector en la mitad derecha de la ventana de Opera. Para ver la información relativa a la fuentes, lo que vamos a hacer es escribir FONT en la barra Filter de la parte inferior de la sección Styles (estilos). De esa manera veremos de forma resaltada toda la información relativa a los tipos de letra de la web.
Con extensiones para el navegador
Estas aplicaciones nos facilitan algunas tareas haciéndolas de forma más rápida y añadiendo funcionalidades extra.
WhatFont
Se trata de una extensión que te facilitará el proceso de saber qué tipo de letra emplea una web. Si es algo que no necesitas ver a menudo puedes utilizar el inspector del navegador web tal y como explicamos arriba.
Sin embargo, si por temas profesionales o de curiosidad te gusta saber las tipografías que se están mostrando en tu navegación solo tienes que activar la extensión pulsando sobre su icono (una vez la hayas instalado) y se irán mostrando sobre la pantalla los tipos de letra según vayamos colocando el cursor del ratón en un texto u otro. La única pega es tener que desactivarla cada vez que la usemos para que no nos molesten las ventanas flotantes con la información de la letra.
Está disponible tanto para Google Chrome como para Safari.
Fontanello
Otra de las extensiones más utilizadas para identificar el tipo de letra de una página web. Una vez hayas instalado esta extensión, que está disponible para Google Chrome y Mozilla Firefox.
Solo tienes que pulsar con el botón derecho del ratón sobre el texto seleccionado del que quieres averiguar la fuente. Verás que en el menú secundario tienes un desplegable llamado Fontanello, al desplegarlo verás la información sobre el nombre de la fuente, su estilo (delgada, normal, negrita…), el tamaño y color con su código hexadecimal.
Aunque no tenga una estética tan visual como WhatFont es verdad que es menos invasiva, no tienes necesidad de andar activando y desactivando la extensión.
CSS Peeper
Quizá sea la opción más estética y cómoda de todas. Una vez hayamos instalado la extensión, solo disponible en Google Chrome, no tenemos más que pulsar en su icono cuando queramos averiguar la fuente de la web donde estemos navegando.
Se nos abrirá una ventana emergente en el lateral derecho con toda la información dividida por tipos: título, subtítulo, cuerpo…
Con aplicaciones web
En este caso vamos a mostrar unas aplicaciones web que nos ayudarán con los tipos de letra en documentos con formato de imagen. Por lo que necesitaremos hacer una captura de pantalla de la web previamente.
La herramienta para captura de pantalla en Windows 10 se activa pulsando WIN. + MAYUS. + S, en macOS pulsaremos MAYUS. + CMD + 4 y seleccionamos la superficie de la pantalla que queremos capturar.
WhatTheFont
Entrando en esta herramienta de la web MyFonts.com podremos subir una imagen y WhatTheFont la analizará para averiguar qué fuentes se han utilizado en su diseño.
Solo tenemos que arrastrar la imagen sobre la pantalla de WhatTheFont o pulsar en el botón Upload an image y elegir el archivo en nuestro disco duro.
Matcherator
De la misma forma que WhatTheFont, con Matcherator también podremos analizar las tipografías empleadas en una web, en una captura de pantalla de una web para ser más exactos.
Subimos el archivo y Matcherator nos solicitará que seleccionemos la parte de la imagen que queremos analizar. Solo nos queda pulsar el botón Matchearete It! Y veremos los estilos de la imagen.
Whatfontis
What Font Is es la tercera herramienta de la web que nos dirá el tipo de letra utilizado en una imagen. Para ello podemos subir la captura pulsando en el enlace Browse by clicking here o arrastrando la imagen directamente a la pantalla.
La opción extra que incluye What Font Is es que puedes incluir la url de cualquier imagen en una web y, si contiene texto, esta aplicación lo analizará.
}
Font in Logo
Font in logo es una página web para curiosos más que para uso profesional. No analiza la web, ni tampoco una imagen que contenga texto. Se trata más bien de una base de datos de logos de las marcas más conocidas y nos muestra el nombre de las tipografías que hayan en esos logos.
Para ello utilizaremos el buscador, introducimos el nombre de una marca (Coca Cola, Nutella, Chanel…) y nos aparecerá el logo junto con el nombre de la tipografía.
En la mayoría de los casos estas fuentes son exclusivas, están protegidas con Copyright y se han diseñado exclusivamente para ese logo. Es por esto que puede estar prohibido utilizarlas con fines comerciales. En cualquier caso, si pulsas sobre el logo verás más información sobre el tipo de letra y podrás descargártela en tu ordenador.
