Come riconoscere il font di un sito

L’esperienza che si ha quando si apre un sito web è data dalla somma di vari elementi e tra questi elementi ci sono i font.

Perché anche i font, come i colori, le immagini e la disposizione degli elementi interattivi e fissi crea una o più sensazioni nell’utente.

Il tuo sito web ti rispecchia e se hai le idee chiare sai anche quali font vuoi vengano associati al tuo brand. Ma può capitare di non avere troppa fantasia e, mentre navighi distrattamente online, di trovare quello che pensi sia il font ideale per il tuo sito web. Già utilizzato altrove.

Per fortuna esistono almeno quattro modi diversi, a difficoltà variabile, che ti consentono di riconoscere il font di un sito e poterlo quindi poi utilizzare anche tu.

Come riconoscere il font di un sito, proviamo con Google

Il primo sistema che puoi adoperare per scoprire qual è il font di un sito web comporta conoscere come funziona il web. Abbiamo deciso di cominciare da questo sistema perché è quello un po’ più tecnico ma anche quello che ha bisogno di meno elementi esterni rispetto al semplice browser che stai già utilizzando per leggerci.

Un modo per scoprire qual è il font utilizzato all’interno di un sito web passa infatti per la funzione Ispeziona che consente di andare a guardare il codice HTML che compone quello che si vede del sito web. Per questo abbiamo sottolineato che si tratta di uno strumento che utilizza quello che hai già ma che presuppone tu sappia come funzionano i siti web e come sono strutturati.

All’interno dell’inspector puoi vedere sotto forma di codice HTML tutti gli elementi fissi e mobili, rintracciare non solo i font ma anche i colori utilizzati e vedere la struttura della pagina che hai di fronte. Qualunque browser ti permette di ispezionare la pagina web. Ma tu non hai bisogno di controllare tutta la pagina.

La prima cosa da fare quindi è evidenziare una piccola porzione di testo nel font di cui vuoi scoprire il nome. Così facendo potrai trovare più facilmente, tra le informazioni che poi appariranno, quella relativa e il nome del font. Una volta evidenziato il testo clicca con il pulsante destro del mouse e scegli la voce Ispeziona.

Si aprirà in basso o di lato alla pagina la console che ti consente di vedere quello che c’è dietro il testo e le immagini che hai di fronte. Ci sono molti menu ma quello di cui hai bisogno è Styles (Stili se la console appare in italiano). Scorrendo semplicemente con la rotella del mouse fino ad arrivare a evidenziare l’elemento che ti serve puoi trovare le informazioni font family con il nome del font che viene utilizzato.

Trovare il font di un sito web con servizio on-line o con Photoshop

Altri due modi con cui è possibile svelare l’arcano del font di un sito web è sfruttare i servizi di identificazione dei font che eseguono in pratica l’esame del testo al posto tuo. La semplicità di questi servizi è però che non è necessario incollare nulla né lavorare con il codice HTML.

Tutto quello di cui hai bisogno è uno screenshot in cui il font che vuoi esaminare sia ben visibile. Utilizzando servizi come MyFonts, Identifont oppure What Font Is dovrai poi solo caricare l’immagine e troverai le risposte alle tue domande.

Abbiamo però accennato anche al fatto che Photoshop è in grado di riconoscere i font utilizzati. Anche per utilizzare la funzione interna di Photoshop hai bisogno di uno screenshot del font che vuoi esaminare.

Selezionando una piccola porzione di testo con lo strumento di selezione ti basta scegliere alla voce Type il servizio di riconoscimento, Match Font. Sarà Photoshop a riconoscere il font e a mostrarti qual è quello più simile all’interno del suo database, nel caso in cui non sia presente lo stesso identico font. Attento però, dopo aver scoperto il nome del font, alla procedura per cambiare il tuo font.

Scoprire il font di un sito web con una estensione del browser

Se ti occupi di grafica e hai magari clienti che vengono a chiederti di replicare le combinazioni di font che hanno visto su altri siti web forse più che lavorare attraverso il codice sorgente delle pagine o con i servizi online puoi trovare giovamento nell’installare una estensione per il browser, in maniera tale da avere sempre il servizio sottomano.

Anche in questo caso, come i servizi online, le estensioni per i browser funzionano tutte più o meno nello stesso modo, anche se alcune sono più complete di altre. Le più gettonate sono Fontanello, Whatfont e CSS Peeper. Fontanello per esempio è una estensione gratuita disponibile per gli utenti che utilizzano Firefox e Chrome. Whatfont è invece disponibile anche per Safari e per il browser Edge mentre CSS Peeper funziona solo all’interno di Google Chrome.

Tra le varie opzioni, CSS Peeper è quello più completo, dato che riesce a fornire tutta una serie di altri dettagli che vanno ben oltre il nome del font. L’estensione, infatti, controlla la struttura del CSS e può darti molti altri dettagli su come è stato costruito l’aspetto del sito web che stai guardando. L’estensione più facile in assoluto è invece Whatfont, che una volta attivato funziona semplicemente passando con il mouse sopra il testo.

Se poi vuoi qualche altra informazione in più, per esempio il colore utilizzato per il brandello di testo che stai evidenziando, ti basta cliccare e appare una finestra in cui ritrovare tutti i dettagli, compresa la grandezza del font, l’altezza della linea, il colore, lo stile e il peso.