Cuando somos amantes del diseño, bien en general, o bien del diseño gráfico, nos fijamos en todos los elementos de 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.
Los expertos en publicidad conocen bien la relevancia de la tipografía a la hora de comunicar una sensación a los lectores. Cuando se trada de vender un producto, nada está dejado al azar. Mucho menos la tipografía usada en el copy que acompaña al producto en su web oficial. También es importante si tienes un blog persona, para lograr un estilo propio pero mantener al mismo tiempo una comodidad de lectura que no cause cansancio en la vista del lector. La escuela universitaria de artes TAI, en Madrid, tiene un artículo en el que expone las características principales de las tipografías más comunes, y en qué se diferencian unas de otras.
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, DaFont o 1001 Fonts, o simplemente 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. Por lo que en función del navegador que uses, los pasos para encontrar esta herramienta en particular serán diferentes. Aquí puedes encontrar cuál es el método a utilizar en los navegadores que más se usan:
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 de las 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 s 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.
Microsoft Edge
Microsoft Edge es otra de las herramientas de navegación más utilizadas, después de Google Chrome y Safari. Este navegador se ha ido actualizando a lo largo del tiempo hasta conseguir una gran aceptación por parte de los s de Windows, de tal manera que algunos de ellos se han decantado por utilizar de forma predeterminada Edge ya que ahora está mucho más optimizado e integra la Inteligencia Artificial llamada Copilot. Sea como fuere, podemos saber el tipo de letra que se encuentra en una web con tan solo realizar unos pasos muy sencillos, similares incluso a los de Google Chrome.
Cuando abrimos el navegador Microsoft Edge y nos metamos en una página web, debemos realizar los siguientes pasos para comprobar cuál es la fuente que se usa:
- Abrir el portal web.
- Hacer clic derecho con el botón del ratón en cualquier parte de la pantalla.
- Pulsar en Inspeccionar.
- Deslizarse hasta abajo del menú Inspeccionar y seleccionar la pestaña Estilos.
- En la barra de búsqueda de filtro escribir la palabra «font».
- A continuación, aparecerá el comando font-family con el tipo de letra que se usa en esa web.
Este menú de Inspeccionar se conoce como DevTools, con opciones de desarrollado web con el que se puede editar archivos de origen y crear proyectos. Además de la información sobre la fuente, también podemos encontrar otro tipo de datos como el peso, el color, el tamaño, la anchura, etc.
Otra de las formas de abrir el menú de Inspeccionar sin necesidad de usar el ratón es mediante la combinación de teclas MAYUS + F10. Así, se nos abrirá el mismo menú contextual que si clicáramos con el botón derecho del ratón. Pero si queremos dirigirnos a pantalla de desarrollo directamente, deberemos pulsar en esta combinación CTRL. + MAYUS + I si estamos en un ordenador de Windows, o en esta Comando+Opción+I si disponemos de un Mac.
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 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.
Si solo queremos saber el nombre de la tipografía solo debemos, al igual que en el paso anterior, pinchar sobre el icono de WhatFont y pasar el ratón sobre la letra sin necesidad de hacer click. Ahí nos aparecerá un pequeño recuadro con solo el nombre de la tipografía. Con ella tenemos consideraciones como esta:
- Es una herramienta muy sencilla de usar y no tiene ninguna complicación.
- Podemos saber el tipo de letra que hay en una página web, pero no en una imagen.
- Si te dedicas al diseño web, es una de las extensiones que no puede faltar en tu navegador.
- Es gratuita.
Identifont
A través de esta página web podrás descubrir de qué tipografía se trata, aunque con un enfoque diferente. De hecho, lo que hace esta plataforma es realizar preguntas concretas sobre la forma de la letra o la fuente (por ejemplo, si utiliza líneas curvadas, está en formato negrita o si hay separación entre líneas). De esta forma, la web va descartando hasta «acertar» con la tipografía que estás buscando, pues cuentan con 5.113 fuentes diferentes.
Si bien no es la herramienta más práctica de todas (sobre todo si no tienes demasiados conocimientos sobre diseño o tipografía), es una web con la que podrás aprender dichos conocimientos al mismo tiempo que te diviertes, pues su funcionamiento es similar a un juego. Además, también es idónea para averiguar qué fuente tipográfica podría funcionar en tu página web o proyecto. Eso sí, actualmente se encuentra en inglés, por lo que si no te mueves en este idioma es posible que te cueste entender algunas de las preguntas.
PrintWorks Bowfin
A través de esta web podrás descubrir una gran cantidad de información y detalles sobre la fuente que estás buscando. Además, también ofrece otras funciones, como una guía para aprender a identificar determinadas fuentes o letras. Al igual que Identifont, la web se encuentra en inglés, por lo que sí o sí deberás manejarte en este idioma. Y, aunque ambas webs funcionan de una forma muy similar, esta es un poco más intuitiva y precisa.
Para averiguar el tipo de letra, no será necesario que te vayas a ningún menú lateral o que vayas página por página, ya que toda la información se encuentra en la misma página principal.
Fontspring
Fontspring es una web de descarga gratuita de fuentes, y como complemento, ofrece una función de escaneo de fuentes a partir de una fotografía que tendrás que subir a la plataforma. La web podrá buscar similitudes con las 900.000 fuentes gratuitas o de pago que forman parte de su base de datos.
Fontspring utiliza el reconocimiento óptico de caracteres (OCR) para llevar a cabo el análisis. A la hora de subir una foto del texto, es importante que la foto no esté borrosa, que el texto no esté ladeado, y que haya un alto contraste en el caso de que aparezcan más objetos o dibujos en la foto. Una vez que la web identifique la fuente, te proporcionará un link al lugar donde puedes comprarla, si es de pago, o descargarla gratuitamente si es de libre uso. Puedes consultar su tutorial en YouTube para ver cómo se hace:
Font in Logo
Con apps para el móvil
Otra forma con la que podemos identificar las diferentes tipografías de una página web es con el uso de apps móviles. Son varias las alternativas que se pueden instalar en tu smartphone. Incluso, da igual que tengas Android o iOS, ya que hay varias apps populares, y entre ellas se encuentran los siguientes ejemplos:
WhatTheFont
Esta aplicación funciona aplicando la Inteligencia Artificial en las búsquedas visuales y permite revisar las fuentes de cualquier página web y también de fuentes offline si les tomamos una fotografía. La app enviará la foto a su base de datos y te proporcionará la fuente más cercana a la incluida en la página o foto analizada.
Además, esta app incluye también diferentes pruebas gratis de distintas fuentes web y una amplia oferta especializada y paquetes originales de tipografías para su adquisición.
Adobe Capture
Si bien es una app más pensada para el diseño gráfico, esta aplicación, disponible para Android y para iOS de forma gratuita te permite, de forma parecida a la búsqueda basada en imágenes, buscar tipos de letra similares utilizando una imagen base, tomando una foto o simplemente haciendo una captura de pantalla a la página web que nos interesa revisar.
Esta app también permite encontrar fuentes parecidas a la que nos interesa y después sincronizarlas con Creative Cloud para usarlas después en Photoshop o en Illustrator. Además, la app permite hacer búsquedas de diferentes familias de fuentes, estilos o colecciones tipográficas.
Find my Font
Con la app móvil Find my Font, podremos detectar qué fuente usa cualquier texto o logotipo que veamos. Tan solo tenemos que hacer una foto desde la aplicación, y esta nos dirá la fuente que usa o cuál se le parece más. Además, nos permite recortar la imagen de forma que podamos analizar exactamente las letras que nos interesan. Está disponible para Android e iOS, y es gratuita.
Suele actualizarse de manera periódica, por lo que no debería ser un problema para encontrar los diferentes tipos que sean más modernos. Y es que, a juzgar por los positivos comentarios en Play Store y App Store, la app sigue cumpliendo su función. Por lo que se trata de otra de las diferentes apps que hay disponibles para estos dos sistemas operativos de móviles que funcionan sin inconvenientes.
Usa ChatGPT para saber la fuente
Aunque no es la opción más habitual, no cabe duda de que la IA es capaz de todo como se ha demostrado. Y son cada vez más los s que recurren a opciones como ChatGPT para preguntar cualquier tipo de cuestión y así salir de dudas. Pues bien, también te servirá para identificar las fuentes de cualquier página web. Y es que, de esta manera, no tendrás que recurrir a webs especializadas ni a los métodos para el navegador que usas ni apps de terceros.
Para ponerlo en práctica, solo debes abrir el chatbot de OpenAI y subir una captura de pantalla de la tipografía que quieres identificar. Al ser una web, deberás mostrar el texto de cualquiera de las publicaciones que veas o donde haya una muestra notable de texto para que sea capaz de saber cual es la tipografía. Una vez subida la captura de pantalla, deberás preguntar: «¿Qué tipografía es?» o una pregunta similar.
Si no acierta a la primera, puedes probar a subir otra captura o a especificar más la pregunta. Por ejemplo, puede preguntar a ChatGPT si se está utilizando una letra Times New Roman u otra. Así podrás conocer el tipo de una manera más concreta.
