Se sei mai stato completamente catturato da un font che hai visto su un sito web, potresti esserti chiesto come scoprire come si chiama in modo da poterlo utilizzare anche tu nei tuoi contenuti. La tipografia di qualità può migliorare l’esperienza di lettura dei tuoi visitatori, quindi potrebbe valere la pena fare uno sforzo per scoprirlo. Indipendentemente dal motivo per cui vuoi identificare quale carattere tipografico viene utilizzato su un sito web, sono diversi gli strumenti che possono tornare utili.
In questo articolo, parleremo dei motivi per scoprire quale font sta utilizzando un sito web e ti mostreremo anche come farlo.
Iniziamo!
Perché potresti voler scoprire quale font sta utilizzando un sito web
Come già accennato, font belli e leggibili possono migliorare l’esperienza utente (UX) e la leggibilità del tuo sito. I font fanno in modo che i visitatori possano interagire comodamente con i tuoi contenuti senza faticare a decifrarli. Se il tuo testo è elegante ma illeggibile, i lettori troveranno difficile capire o apprezzare il tuo materiale.
Anche i pulsanti Call to Action (CTA) possono rivelarsi quasi inutili se il loro testo non è leggibile. Questo è il motivo per cui potresti trovare utile tenere un elenco di font che attirano la tua attenzione per utilizzarli in futuro sul tuo sito o su quello di un tuo cliente.
Come scoprire quale font utilizza un sito web (3 metodi)
Esistono diversi metodi per verificare quale font sta utilizzando un sito web. La funzione di ispezione del tuo browser è un’ottima soluzione, ma esistono anche estensioni che possono produrre effetti equivalenti. Utilizzando determinati strumenti online puoi persino identificare font dalle immagini.
Diamo un’occhiata a ognuna di queste opzioni.
1. Identificare font utilizzando lo strumento ispeziona del browser
Uno dei modi più semplici per verificare quale carattere sta utilizzando un sito web è con lo strumento ispeziona del browser. In questo esempio lavoreremo con Chrome Inspector, ma vale la pena notare che altri browser hanno funzionalità equivalenti.
Innanzitutto, fai clic con il pulsante destro del mouse sulla pagina web contenente il font che desideri identificare Dal menu risultante, seleziona Ispeziona:
Se preferisci utilizzare una scorciatoia da tastiera, prova Ctrl + Maiusc + I per Windows o Linux. Se utilizzi un Mac, l’equivalente è Cmd + Maiusc + I.
Nella finestra sul lato destro dello schermo, cerca il testo utilizzato dal font che vuoi identificare. Verrà evidenziato quando selezioni l’elemento HTML corrispondente:
Quindi, fai clic sulla scheda Computed e cerca “font family“:
Dovresti vedere elencati il nome del carattere ed il suo stile.
Per vedere il CSS relativo al font, controlla la scheda Stiles . È possibile scorrere per cercare i valori relativi ai font. Ad ogni modo, poiché qui potrebbero esserci sostituzioni e regole di stile ininfluenti, la scheda Computed di solito è più utile.
2. Trova i caratteri tramite un’estensione del browser
Le estensioni del browser possono fornire un modo più semplice per trovare i dettagli dei caratteri di un sito web, soprattutto se non sai come utilizzare Inspector. Inoltre, di solito possono fornire la risposta che stai cercando più velocemente.
Alcuni di questi componenti aggiuntivi includono:
- Fontanello : questa estensione gratuita consente di trovare il nome, il peso e lo stile di un carattere semplicemente evidenziandolo e facendo clic con il pulsante destro del mouse su di esso durante la navigazione.
- WhatFont : ottimizzando ulteriormente il rilevamento dei font, WhatFont ti consente di visualizzare il nome di un font tipografico semplicemente passandoci sopra con il mouse.
- CSS Peeper : realizzata pensando ai web designer , questa estensione è un pò più solida e può fornire ulteriori dettagli dal codice CSS della pagina web.
Tieni presente che ciascuna di queste estensioni ha un supporto browser diverso. WhatFont è disponibile per Firefox, Chrome, Safari e Internet Explorer. Fontanello è disponibile solo per Firefox e Chrome. CSS Peeper è uno strumento specifico di Chrome che non potrai utilizzare con nessun’altra piattaforma.
Allo scopo di trovare rapidamente il nome di un carattere specifico, WhatFont è l’opzione più semplice da utilizzare. Dato che supporta anche la maggior parte dei browser, la useremo per una rapida dimostrazione.
Una volta installato WhatFont, puoi verificare quale font sta utilizzando un sito web attivando l’estensione nella barra degli strumenti del browser e passando con il mouse sul testo che vuoi controllare:
Quando passi per la prima volta sul testo, vedrai solo il nome del font ma se fai clic sul nome verrà visualizzato un popup espanso con ulteriori dettagli come dimensioni, peso, colore e altezza della linea. WhatFon può anche identificare se un carattere tipografico è disponibile tramite Typekit o Google Fonts.
Una volta che hai finito di controllare i dettagli del font, puoi uscire dallo strumento usando il pulsante Esci da WhatFont nell’angolo in alto a destra della finestra del browser.
3. Rileva i font nelle immagini
Come ultima soluzione puoi anche provare a visualizzare i font utilizzati nelle immagini, compresi i caratteri tipografici che hai visto nei logotipi o nelle infografiche. In base alla nostra esperienza con la rilevazione di font online, WhatTheFont è lo strumento più efficace.
Per utilizzare WhatTheFont, dovrai caricare l’immagine in questione e selezionare la sezione con il font da identificare:
Lo strumento restituirà quindi una pagina dei risultati con i diversi font simili, se non esatti, a quello che stai cercando di trovare:
La percentuale di successo qui può variare a seconda della popolarità del font. Se il nome esatto del carattere tipografico è molto importante per te, potrebbe essere difficile trovare uno strumento che ti fornisca ciò che desideri.
Tuttavia, se sei disposto a utilizzare un font simile a quello che hai trovato in un’immagine, un rilevatore online dovrebbe adattarsi perfettamente alle tue esigenze.
Conclusione
I font visivamente accattivanti e leggibili possono migliorare l’esperienza di lettura per i visitatori del tuo sito web. Questo potrebbe spingerti alla ricerca di nuovi font tipografici che potresti usare sul tuo sito o per i tuoi clienti. Indipendentemente dal motivo per cui vuoi verificare quale carattere utilizza un sito web, gli strumenti che possono aiutarti sono diversi
In questo post, abbiamo visto tre metodi per scoprire quale font utilizza un sito web:
- Identifica i font utilizzando lo strumento inspector del browser.
- Trova i font utilizzando un’estensione del browser come WhatFont .
- Rileva i caratteri nelle immagini utilizzando WhatTheFont .
Buon lavoro.
