Com saber la tipografia duna pàgina web

Saber tipografia pàgina web

Com a dissenyadors, ens encanta el món de la tipografia i per això moltes de les nostres publicacions parlen del tema. Hem parlat, des de la història darrera una tipografia, fins a combinacions guanyadores. A dia d'avui, parlarem sobre com saps quina tipografia té una pàgina web, perquè no hi ha millor manera d'inspirar-se que buscant referències a la feina d'altres creatius.

Segur que, diverses vegades, has entrat a diferents portals web i t'ha cridat l'atenció l'estètica i l'elecció tipogràfica. Com ja hem assenyalat en moltes publicacions, la tipografia és un element molt potent que ens ajuda a expressar-nos com a dissenyadors. Són una infinitat de tipografies les que podem trobar a diferents llocs web, segons la finalitat que tinguin es decanten per un estil tipogràfic o un altre.

No serà la primera ni l'última vegada, que entris a una pàgina web i t'atregui una tipografia i sentis la necessitat de saber quina família és per poder-la afegir al teu catàleg tipogràfic personal. En aquesta publicació, t'ensenyarem alguns mètodes perquè descobreixis quina és aquesta tipografia que t'ha cridat l'atenció.

Opció de cerca 1: usant imatges

El primer mètode que t'assenyalem, únicament us recomanem que l'utilitzeu en cas de no tenir accés al lloc web. Si disposeu d'una captura de pantalla de la tipografia que t'ha cridat l'atenció, és probable que no es doni amb la tipografia exacta, sinó que en aparegui una de semblant. En cas que vulguis saber quina tipografia està utilitzant una determinada marca, és ideal si està en format imatge o vector.

La plataforma en línia a la qual has d'accedir és MyFonts, ia l'eina el nom de la qual és WhatTheFonts. Aquesta eina és una extensió que et donarà la possibilitat de conèixer el tipus de lletra que estàs buscant. Solament, has de pujar la imatge capturada a la seva web, a continuació, el programa et preguntarà quin text vols analitzar. Un cop seleccionat, et dirà les diferents tipografies similars a les de la captura.

Et deixem un exemple amb el logotip de Facebook. Tenim en compte que aquest procés pot ser una mica tediós i que, no et doni com a resultat la tipografia exacta ja que aquesta eina es veu limitada per la biblioteca tipogràfica interna.

Cerca Facebook

Opció de cerca 2: inspector del navegador

En aquesta segona opció per cercar la tipografia d'una pàgina web, optem per fer servir l'inspector d'un navegador web. Aquesta opció és una de les més utilitzades per part dels dissenyadors gràfics i dissenyadors web. En aquest cas, anem a treure molt partit a aquesta eina que potser algun de vosaltres no coneixíeu.

En primer lloc, farem una distinció entre diferents navegadors, en concret entre dos. D'una banda, ens trobem amb Chrome i altres navegadors basats en Chromium, i de l'altra situem Firefox. Assenyalar, que sigui quin sigui el navegador que utilitzis sempre es farà ús de la mateixa drecera per accedir a l'inspector, Ctrl+Shift+I.

Si utilitzes Chrome, en obrir l'opció de l'inspector apareixen tres panells diferents. Hauràs de buscar el text que s'utilitza a la web per saber quina tipografia s'està fent servir. Al segon panell que se't presenta, cerca i seleccioneu l'opció de “Computed”. Seguidament busques “Font – family” i com podreu veure el nom de la família tipografia apareix al costat.

A la següent imatge us deixem com apareixeria aquesta informació que us acabem de dir. A més de les dades sobre la tipografia utilitzada, apareixen altres dades importants com la mida, el color, el pes, etc.

Inspector de google

D'altra banda, si fas ús del navegador Mozilla Firefox el procés resulta similar al que acabem de veure amb Chrome, l'únic que canvia és que la informació que busquem apareix a una altra zona. En aquest navegador, hi ha una pestanya específica per als estils de tipografies que apareixen en una web.

Com en el cas anterior, obriràs l'inspector amb la mateixa drecera que t'hem esmentat i de nou ens apareixeran tres panells diferents, has de dirigir-te al que té una pestanya sota el nom de “Tipografias”, com el seu nom ens indica aquí es troben totes les dades necessàries. Hi ha un apartat anomenat “totes les tipografies de la pàgina” on apareix un llistat amb totes.

Cerca Firefox

En este cas també és possible modificar diferents paràmetres de la tipografia mitjançant uns mesuradors. Això et dóna la possibilitat que experimentis com quedaria la tipografia patint algun canvi, com es veuria diferent.

Opció de cerca 3: utilitzant plugins

La darrera opció que us portem, és un mètode que es coneix des de fa poc i que probablement sigui el menys utilitzat en ser tan recent. És una opció de cerca de tipografies de web mitjançant plugins per al navegador.

Hi ha milers de plugins per afegir als nostres dispositius i realitzin una determinada tasca, per tal de cobrir una necessitat. Aquesta opció segur que es converteix en una de les favorites gràcies a la seva senzillesa. Nosaltres et recomanem Fontface Ninja, WhatTheFonts o Visbug.

Quan tinguis instal·lat al teu navegador el plugin triat, només has de fer clic sobre la icona i immediatament apareixerà un menú d'opcions a la part esquerra de la pantalla. Si cliques sobre la segona icona d'aquest menú, només hauràs de dirigir el cursor del teu ratolí cap a la zona de text que vulguis analitzar i automàticament apareixerà un quadre d'informació sobre aquesta tipografia.

Cerca plugins

En aquesta opció, com ha passat en les dues anteriors, també es mostren les dades sobre el color de la tipografia, el pes, la mida de línia, etc. És una eina, que és molt útil per a aquells amants del món de la tipografia i que vulguin saber en qüestió de segons quina és la font que els ha cridat l'atenció.

Has pogut observar en aquesta publicació, que hi ha tres opcions de cerca molt senzilles per saber quina és la tipografia utilitzada en una pàgina web. Només has de triar l'opció que més t'encaixi i sigui còmoda per treballar. Moltes vegades, aquestes eines de cerca t'alleugeriran la feina i t'ajudaran a crear dissenys vistosos.


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa aquí.

Sigues el primer a comentar

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà.

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.