Fontanello
Karol es un emprendedor en serie y fundador de 3 startups, en el marco de las cuales ha asesorado a varios cientos de empresas. También ha sido responsable de proyectos de las mayores instituciones financieras de Europa, por valor de más de 50 millones de euros. Tiene dos másteres, uno en informática y otro en gestión, obtenidos durante sus estudios en Polonia y Portugal. Adquirió experiencia en Silicon Valley y mientras dirigía empresas en muchos países, como Polonia, Portugal, Estados Unidos y Gran Bretaña. Desde hace más de diez años, ayuda a empresas emergentes, instituciones financieras y pequeñas y medianas empresas a mejorar su funcionamiento mediante la digitalización.
Cómo encontrar la fuente en el elemento inspect
¿Así que estás navegando por la web y te encuentras con la mejor combinación de fuentes pero no puedes identificar el tipo de letra? Bueno, en este vídeo (y en la lista de abajo) te muestro exactamente cómo encontrar esas fuentes…
La extensión para Chrome y Firefox de Fontanello, en mi opinión, es la forma más rápida de averiguar qué tipo de letra utiliza una página web. Simplemente se hace clic con el botón derecho del ratón sobre el texto, se busca Fontanello en el menú y ahí está la familia de fuentes y algunos atributos adicionales.
La extensión de WhatFont para Chrome y Safari es mi opción favorita cuando se trata de descubrir fuentes. Para activar la herramienta debes hacer clic en el icono de What Font en el menú del navegador. Ahora puedes seleccionar varias partes del texto permitiendo una mejor visualización del desglose de la fuente frente a Fontanello.
La extensión de Chrome Visual Inspector ofrece un poco más de profundidad que las dos anteriores. Basta con hacer clic en el icono del Inspector Visual en el menú de Chrome para activar la herramienta, y luego dirigirse a la sección Tipografía en el menú desplegable. Ahora se le presentan las familias de fuentes utilizadas con un desglose adicional de toda la tipografía dentro de la página web.
Plugin de búsqueda de fuentes
Extensiones como WhatFont (disponible para Chrome, Firefox y Safari) facilitan la detección de las familias de fuentes de cualquier texto en una página web. Basta con instalar la extensión, activarla en un sitio y hacer clic en el elemento que se desea inspeccionar. Los resultados se muestran en un cuadro flotante, siempre en el contexto que elijas.
La mayoría de los navegadores web permiten encontrar fácilmente las fuentes mediante el botón derecho → ‘Inspeccionar’ o ‘Inspeccionar elemento’. También puede hacerse pulsando F12. Esto mostrará una lista de estilos adjuntos al sitio web, que puedes explorar para encontrar las fuentes utilizadas en cualquier elemento HTML.
Usar el inspector no es tan sencillo como usar una extensión, pero tiene varias ventajas. Se requiere un poco de comprensión de CSS, ya que normalmente tendrá que pasar por varios estilos para encontrar el que se está aplicando. Como regla general, los estilos que están tachados se están sobrescribiendo, así que busca siempre los que se están aplicando en último lugar.
Todos los estilos de la página están listados en la pestaña Estilo, pero si en su lugar utilizas la pestaña Calculado, puedes encontrar las propiedades que se están aplicando activamente al elemento que has seleccionado, incluyendo por supuesto el font-family.
Cómo utilizar whatfont
En lo que a mí respecta, soy un ávido navegante de páginas web, recopilador de conocimientos y buscador de datos. Pero nunca he salido de, por ejemplo, un artículo de la Wikipedia y he pensado “¡Vaya, el texto de esa página era tan legible!” He venido a buscar información, he leído la información y me he ido con la información en la cabeza. Esto significa que, desde el punto de vista de la tipografía, Wikipedia hizo su trabajo perfectamente.
La tipografía desempeña un papel fundamental en cualquier sitio web al garantizar que podamos leer y procesar cómodamente todo su contenido basado en texto. Si la tipografía de un sitio web funciona, no lo notaremos. Si falla, lo más probable es que abandonemos la página.
Todo sitio web tiene texto, y donde hay texto hay una buena o mala tipografía. Así que, como propietario de un sitio web, debe invertir tiempo en la tipografía de su propio sitio. Si se centra en el aspecto y la legibilidad de sus palabras, se asegurará de que sus lectores no se sientan desafiados por su texto. Y para los pocos que sí aprecian una buena tipografía, su atención a los detalles transmitirá profesionalidad, empatía e inteligencia de diseño.
