ttgertika
Página principalBlog4 maneras de identificar rápidamente una fuente en un sitio web

4 maneras de identificar rápidamente una fuente en un sitio web

4 maneras de identificar rápidamente una fuente en un sitio web

Un diseñador apasionado siempre está buscando activamente nuevas fuentes. No sólo durante el trabajo.

Al desplazarse por las redes sociales, los sitios web de marcas e incluso mientras se relaja mientras juega un juego de consola, puede notar una fuente que desea agregar a su colección. Queda un punto técnico: averigüe qué familia de fuentes se utiliza en el proyecto y compre una licencia para ello.

Hay varias formas de determinar una fuente; te contamos las más sencillas.

¿Por qué necesita saber qué fuente se utiliza en el sitio?

Para un aspirante a diseñador, aprender sobre las fuentes utilizadas en otros proyectos es beneficioso para el crecimiento profesional. Esto ayudará a desarrollar la observación.

Busca proyectos similares al tuyo y estudia fuentes que utilizan otros profesionales. De esta manera puedes determinar qué estilos de auriculares lucen mejor en un tema determinado. Estudia no sólo las obras que te gustan. Será útil comprender qué fuentes parecen inapropiadas y por qué. Para que el proceso sea aún más divertido, haga su propia lista de fuentes «malas» y «buenas» para varios proyectos.

4 maneras de identificar rápidamente una fuente en un sitio web

Buscar fuentes que se utilicen en otros proyectos también será útil para los diseñadores experimentados. De esta manera podrás ampliar tu colección de tipos de letra o encontrar nuevos estudios con fuentes interesantes y elegantes.

Cómo saber el nombre de una fuente en un sitio web

Hay varias formas de determinar la fuente que se utiliza en el sitio de un proyecto.

  • Extensión del navegador;
  • Busque un nombre en el código de la página;
  • Busque fuentes por imagen utilizando servicios en línea;
  • Definición de una fuente en Adobe Photoshop.

Echemos un vistazo más de cerca a cada uno de ellos.

Extensiones del navegador

Existen bastantes extensiones de navegador que pueden detectar la fuente en un sitio web. Compartiremos aquellos que los diseñadores utilizan con frecuencia y que nosotros probamos.

4 maneras de identificar rápidamente una fuente en un sitio web

Fonts Ninja

Navegadores: Chrome, Firefox, Safari.

Sitio web: https://www.fonts.ninja/

Una de las extensiones más populares y convenientes. Determina no sólo la fuente, sino también su estilo. Una ventaja adicional es que no sólo puedes ver, sino también comprar fuentes. Ninja tiene enlaces para comprar, conveniente y fácil.

Para utilizar la extensión, descárguela e instálela en su navegador. Después de esto, aparecerá un ícono con un ninja en la barra de herramientas. Al hacer clic en él, puede pasar el cursor sobre cualquier parte del texto para determinar la fuente. Haga clic en el texto para abrir un panel adicional y probar la fuente. Fonts Ninja también está disponible como aplicación para teléfonos inteligentes.

Por cierto, el sitio web oficial de Fonts Ninja utiliza el bestseller del estudio TypeType: TT Norms® Pro.

4 maneras de identificar rápidamente una fuente en un sitio web

WhatFont 

Navegadores: Chrome, Safari.

Sitio web: https://www.whatfontis.com/

Otra extensión de navegador popular que ayuda a reconocer fuentes.

Después de la instalación, seleccione el fragmento de texto requerido y haga clic en el icono «WhatFont». Puede averiguar qué familia de fuentes, estilo y tamaño se utilizan.

Además de las extensiones enumeradas anteriormente, los diseñadores usan CSS Pepper y TypeSample y otras. Cada uno tiene sus propias funciones adicionales, por lo que te recomendamos probar varios y elegir el que más te convenga.

Búsqueda manual en el código de la página.

4 maneras de identificar rápidamente una fuente en un sitio web

La forma más difícil y al mismo tiempo más sencilla de averiguar qué fuente se utiliza en el sitio es buscar en el código de la página. Esto no es ideal ya que se puede cambiar el nombre de las fuentes.

Para utilizar la búsqueda manual, seleccione un fragmento de texto y busque Familia de fuentes en el código de la página.

Para hacer esto en los navegadores Chrome y Firefox, haga clic derecho en el texto y seleccione el elemento del menú desplegable Vista de código, luego busque la pestaña «Elementos», luego «Estilos», que contendrá el código de la familia de fuentes. En Safari, los pasos serán similares, pero asegúrese de tener abierto el menú Desarrollador de antemano. Para hacer esto, marque la casilla correspondiente en la pestaña «Avanzado».

Servicios en línea para reconocer fuentes a partir de imágenes.

4 maneras de identificar rápidamente una fuente en un sitio web

A veces, la fuente que te gusta no está en la página del sitio, sino en la imagen. Puede ser un banner publicitario, una fotografía o una imagen en las redes sociales.

Para tales casos, existen varios servicios en línea que lo ayudarán a determinar la fuente que le gusta.

El principio de funcionamiento es similar en todos. Simplemente vaya al sitio web del servicio, cargue una imagen con la fuente requerida y espere el resultado.

Muy a menudo, se utilizan los siguientes servicios para determinar una fuente a partir de una imagen:

También puedes preguntar a otros diseñadores sobre la fuente que te interesa utilizando las redes sociales.

Definir una fuente en Adobe Photoshop

4 maneras de identificar rápidamente una fuente en un sitio web

Puede identificar la fuente en una imagen usando Adobe Photoshop. La función Font Match se mejora constantemente, pero actualmente no es compatible con todos los idiomas.

Para utilizar la función necesita:

  • Seleccione texto en la imagen usando la herramienta Marco rectangular;
  • Haga clic en el elemento «Texto» «Seleccionar fuente»;
  • Seleccione la más adecuada de la lista de fuentes similares.

Bonificación: aplicaciones para teléfonos inteligentes

4 maneras de identificar rápidamente una fuente en un sitio web

Por supuesto, las fuentes interesantes pueden sorprender a un diseñador no sólo en el ordenador de su trabajo. Para poder ampliar siempre su colección de fuentes, descargue la aplicación en su teléfono inteligente.

WhatTheFont y Find My Font son populares en este momento. Para determinar la fuente que le gusta, simplemente abra la aplicación y apunte la cámara a la imagen. De una lista de fuentes similares puedes elegir la más adecuada.

Go to catalog Thanks for your complete read-through!

Here is a promo code for you: 4Quickways
Enter it during checkout and get a 30% discount on any TypeType font.

En lugar de conclusiones

Las fuentes estéticas las encuentra el diseñador no solo durante el trabajo. Es mejor preparar con antelación herramientas con las que pueda determinar rápidamente qué fuente se utilizó en un sitio web, cartel, pancarta o letrero de cafetería. 

Últimas publicaciones

Las 10 principales tendencias tipográficas de 2024

Las 10 principales tendencias tipográficas de 2024

Do you want to keep your typography up-to-date and create genuinely inspiring projects? Experts and designers from the TypeType font studio are excited to share the key type trends of 2024 with you in this article. Stay trendy!

Buscar etiqueta
Las 15 mejores fuentes para revistas

Las 15 mejores fuentes para revistas

Las revistas son el lienzo perfecto sobre el que la tipografía puede revelar todas sus facetas. La fuente aquí no sólo transmite información al lector, sino que también influye directamente en el diseño. Transmite el mensaje de la revista, transmite valores e ideas. Este artículo habló sobre cómo elegir la mejor fuente para revistas y compiló una selección de 15 opciones actuales para publicaciones sobre diversos temas.

Buscar etiqueta
UniversiTTy: Lección 9. Caracteres en mayúsculas. Refinamiento detallado de contornos

UniversiTTy: Lección 9. Caracteres en mayúsculas. Refinamiento detallado de contornos

Welcome to the ninth lesson of our «UniversiTTy»! In this series, we guide you through the process of font design step by step. The font is a cohesive visual system. This can be seen on all levels: global (font type, weight, proportions, contrast, general forms) and at lower scales that encompass all graphic choices in individual characters. Let’s find out together how visual details influence the overall perception of fonts.

Buscar etiqueta
Las 15 mejores fuentes de contorno aprobadas por diseñadores en 2024

Las 15 mejores fuentes de contorno aprobadas por diseñadores en 2024

Las fuentes de contorno son una excelente manera de agregar variedad a su diseño y hacerlo atractivo y llamativo. ¿Qué son, dónde se utilizan y qué estilos de fuente se combinan con ellas? Hablamos de todo esto en nuestro artículo y también seleccionamos las mejores fuentes de contorno para varios proyectos.

Buscar etiqueta
Las 10 mejores fuentes para diseños de carteles

Las 10 mejores fuentes para diseños de carteles

Elegir la fuente adecuada para un proyecto es una tarea seria para un diseñador. ¿Cómo encontrar la mejor fuente entre muchas opciones y en qué criterios confiar a la hora de elegir? Te lo contamos en este artículo.

Buscar etiqueta
UniversiTTy: Lesson 8. Designing Basic Latin Characters. Uppercase characters

UniversiTTy: Lesson 8. Designing Basic Latin Characters. Uppercase characters

Welcome to lesson number 8 of our «UniversiTTy» series! Last time, we covered optical compensation, uppercase and lowercase character heights, and the concept of contrast. In this article, we will finally focus on glyph design specifically.

Buscar etiqueta
Cómo elegir una fuente: la guía definitiva para el diseñador

Cómo elegir una fuente: la guía definitiva para el diseñador

La fuente es uno de los elementos de diseño más importantes. Con su ayuda, puede enfatizar, complementar o incluso crear el ambiente del proyecto, colocar acentos y transmitir la información necesaria al usuario. ¿Cómo encontrar la mejor fuente entre muchas opciones y en qué criterios confiar a la hora de elegir? Te lo contamos en este artículo.

Buscar etiqueta
25+ mejores fuentes de juegos para tus proyectos en 2024

25+ mejores fuentes de juegos para tus proyectos en 2024

¿Qué criterios debes buscar al elegir fuentes de juegos? ¿Y qué fuentes gaming deberías elegir para tu proyecto en 2024? En nuestro artículo encontrarás consejos actuales sobre la elección de tipografías y una selección de las tipografías mejores pagas y gratuitas para videojuegos de diferentes géneros.

Buscar etiqueta
Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

Iconos e ilustraciones en fuentes: ¿Qué son y cuál es su propósito?

In addition to the base set of letters, marks, and symbols, most typefaces also have other graphic elements. What does their appearance depend on? How and why are they designed? What variations do they come in? In this article, we will focus on these questions and showcase the most captivating icons and illustrations from TypeType typefaces.

Buscar etiqueta

Buscar etiqueta

Fuentes para maquetación de libros: cómo elegir la mejor

Fuentes para maquetación de libros: cómo elegir la mejor

La web y la impresión son dos mundos diferentes en el diseño tipográfico. Al menos, así es como suelen presentarse. En la práctica, se pueden utilizar muchas fuentes en ambas áreas. Pero para entender qué tipo de letra elegir, es necesario conocer las diferencias entre las fuentes para libros y para la web.

Buscar etiqueta
UniversiTTy: Lección 1. Categorías tipográficas

UniversiTTy: Lección 1. Categorías tipográficas

This article is not an ordinary one. If you have not heard about it yet, we have launched a new project for everyone who is in love with fonts. As part of this initiative, we will release articles on typography regularly. Each article of the series will explore one useful subject. The main thing is that you will not only immerse yourself in the industry but also meet our wonderful TypeType team of typography experts as they share their knowledge and experience. 

Buscar etiqueta
Fuentes monoespaciadas en diseño y programación

Fuentes monoespaciadas en diseño y programación

Las fuentes monoespaciales están ganando popularidad entre los diseñadores. Lo más curioso es que el alcance de su aplicación se está ampliando.
Atrás quedaron los tiempos en los que este tipo de fuentes se utilizaba solo en programación. Hoy en día, las fuentes monoespaciales decoran páginas de revistas, envases de marcas de moda, carteles y menús, sitios web, y no hay límites.

Buscar etiqueta
Tienda en línea TypeType: aceptamos pagos con tarjeta para tu comodidad

Tienda en línea TypeType: aceptamos pagos con tarjeta para tu comodidad

Looking for a simpler and faster way to purchase fonts? Let us show you how! Below, you will find a detailed guide on the TypeType store features. Also, get ready for a pleasant surprise at the end of the article!

Buscar etiqueta
In Honor of Andrey Kolmogorov’s 120th Birthday: a Typeface Crafted from the Scientist’s Handwriting

In Honor of Andrey Kolmogorov’s 120th Birthday: a Typeface Crafted from the Scientist’s Handwriting

It is often believed that by analyzing a person’s handwriting, you can make judgments about their character. However, why judge someone when it is possible to create a typeface out of the handwriting of a person who made a significant contribution to science? In this article, we delve into a project of this kind.

Buscar etiqueta
Ligaduras en fuentes: creación de eszetts

Ligaduras en fuentes: creación de eszetts

When expanding character sets of fonts, novice type designers often face difficulties in drawing the eszett character.
In this article, we will take a journey through the history of this character, learn about its origin and role in modern typography.

Buscar etiqueta
Fuentes para web: cómo elegir y utilizar fuentes en su sitio web

Fuentes para web: cómo elegir y utilizar fuentes en su sitio web

Para un diseñador novato, el tema de las fuentes web puede parecer desalentador e incluso estresante. No debes desesperarte, porque con el tiempo, estudiando información y practicando, te convertirás en un profesional.

Buscar etiqueta
Las 15 mejores fuentes Sans Serif modernas para tu diseño en 2023

Las 15 mejores fuentes Sans Serif modernas para tu diseño en 2023

La mayoría de las marcas modernas eligen una fuente que no tiene serifas como fuente corporativa. Estas fuentes comenzaron a ganar popularidad hace casi un siglo, pero todavía están en su apogeo. Descubramos qué atrae a la gente de estas fuentes y compartamos una selección de las mejores de la colección TypeType.

Buscar etiqueta
A primera vista: fuentes elegantes para titulares y pantallas

A primera vista: fuentes elegantes para titulares y pantallas

Today we will talk about these options: graceful and daring, friendly and brutal, dynamic and stable. These are display fonts. They are different in character and expressiveness, but always attract attention when used properly.

Buscar etiqueta