Come vedere quale carattere sta usando un sito web

Se sei mai stato completamente preso da un font che hai visto su un sito web, potresti esserti chiesto come scoprire come si chiama in modo da poterlo utilizzare nei tuoi contenuti. La tipografia di qualità può migliorare le esperienze di lettura dei tuoi visitatori, quindi potrebbe valere la pena fare uno sforzo per trovarla. Indipendentemente dal motivo per cui controlli quale carattere viene utilizzato su un sito Web, ci sono molti strumenti che possono aiutarti.

In questo articolo, discuteremo del motivo per cui potresti voler vedere quale carattere utilizza un sito Web. Ti mostreremo anche come farlo.

Iniziamo!

Iscriviti al nostro canale Youtube

Perché potresti voler controllare quale carattere sta usando un sito web?

Come abbiamo già detto, i caratteri belli e leggibili possono migliorare l'esperienza utente (UX) e la leggibilità del tuo sito. Garantisce inoltre che i visitatori possano interagire comodamente con i tuoi contenuti senza faticare a decifrarli. Se il tuo testo è elegante ma illeggibile, i lettori avranno difficoltà a capire o apprezzare il tuo materiale.

I pulsanti Call to Action (CTA) possono anche rivelarsi quasi inutili se il loro testo non è leggibile. Questo è il motivo per cui potresti trovare utile tenere un elenco di caratteri che attirano la tua attenzione per essere sia eleganti che leggibili. Puoi quindi utilizzarli sul tuo sito o per un cliente in futuro.

Come vedere quale carattere sta utilizzando un sito Web (3 metodi disponibili)

Esistono diversi metodi che è possibile utilizzare per verificare quale carattere utilizza un sito Web. La funzione di ispezione del tuo browser è un'ottima soluzione, ma ci sono estensioni che possono produrre effetti equivalenti. Puoi persino trovare i caratteri dalle immagini utilizzando gli strumenti online. Diamo un'occhiata a ciascuna di queste opzioni.

1. Identifica i caratteri usando lo strumento di ispezione del browser

Uno dei modi più semplici per verificare quale carattere sta utilizzando un sito Web è con lo strumento di ispezione del browser. Sebbene in questo esempio lavoreremo con Chrome Inspector, vale la pena notare che altri browser hanno funzionalità equivalenti.

Innanzitutto, fai clic con il pulsante destro del mouse sulla pagina Web contenente il carattere che desideri trovare. Dal menu risultante, seleziona Ispeziona:

Se preferisci usare una scorciatoia da tastiera, prova Ctrl+Shift+I per Windows o Linux. Se stai usando un Mac, l'equivalente è Cmd+Shift+I.

Nella finestra sul lato destro dello schermo, cerca il testo utilizzando il carattere che desideri controllare. Verrà evidenziato quando selezioni l'elemento HTML corrispondente:

Quindi, fai clic sulla scheda Calcolato e cerca "famiglia di caratteri":

Dovresti vedere il nome del carattere e il suo stile elencati qui.

Per vedere il CSS relativo al carattere, guarda nella scheda Stili . Puoi scorrere per cercare i valori relativi ai caratteri. Tuttavia, poiché potrebbero esserci sostituzioni e regole di stile irrilevanti, la scheda Calcolato è solitamente 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 su un sito Web, soprattutto se non ti senti a tuo agio con Inspector. Inoltre, di solito possono fornire la risposta che stai cercando più velocemente in modo che tu possa tornare al compito da svolgere.

Alcuni di questi componenti aggiuntivi includono:

• Fontanello: Gratuita, questa estensione ti consente di trovare il nome, il peso, lo stile e più semplicemente di un carattere evidenziandolo e facendo clic con il pulsante destro del mouse su di esso durante la navigazione.
• WhatFont: semplificando ulteriormente il rilevamento dei caratteri, WhatFont ti consente di visualizzare il nome di un carattere tipografico semplicemente passandoci sopra con il mouse.
• CSS Peeper: realizzata pensando ai web designer, questa estensione è un po' più robusta e può fornirti ulteriori dettagli dal codice CSS della pagina web.

Tuttavia, ciascuna di queste estensioni ha un diverso supporto per il browser. WhatFont è disponibile per Firefox, Chrome, Safari e Internet Explorer. Fontanello, invece, è 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 font specifico, WhatFont è l'opzione più semplice da usare. Poiché supporta anche la maggior parte dei browser, lo useremo per una rapida dimostrazione.

Una volta installato WhatFont, puoi verificare quale carattere sta utilizzando un sito Web attivandolo nella barra degli strumenti del browser e passando con il mouse su un testo:

Quando passi per la prima volta sul testo, vedrai solo il nome del carattere. Tuttavia, facendo clic sul nome verrà visualizzato un popup espanso con maggiori dettagli come dimensioni, peso, colore e altezza della linea. Può anche identificare se un carattere tipografico è disponibile tramite Typekit o Google Fonts.

Dopo aver verificato i dettagli del carattere, puoi uscire dallo strumento utilizzando il pulsante Esci da WhatFont nell'angolo in alto a destra della finestra del browser.

3. Rileva i caratteri nelle immagini

Infine, puoi anche provare a visualizzare i caratteri utilizzati nelle immagini. Ciò include i caratteri tipografici che hai visto nei loghi o nelle infografiche. Nella nostra esperienza con i rilevatori di caratteri, WhatTheFont è lo strumento online più efficace per questo lavoro.

Per utilizzare WhatTheFont, dovrai caricare l'immagine in questione e selezionare la sezione con il carattere pertinente:

Verrà quindi restituita una pagina dei risultati con diversi caratteri simili, se non corrispondenze esatte, a quello che stai cercando di identificare:

La tua percentuale di successo qui può variare a seconda della fonte e della popolarità del carattere. Se il nome esatto del carattere tipografico è molto importante per te, potrebbe essere difficile trovare uno strumento che ti dia ciò che desideri.

Tuttavia, se sei disposto a utilizzare un carattere simile a quello che hai trovato in un'immagine, un rilevatore online dovrebbe soddisfare perfettamente le tue esigenze.

Conclusione

Caratteri visivamente accattivanti e leggibili possono migliorare l'esperienza di lettura per i visitatori del tuo sito web. Questo potrebbe spingerti a rimanere alla ricerca di nuovi caratteri tipografici che potresti utilizzare sul tuo sito o per i tuoi clienti. Indipendentemente dal motivo per cui desideri controllare quale font utilizza un sito Web, ci sono molti strumenti che possono aiutarti.

In questo post, abbiamo discusso di tre metodi per vedere quale carattere utilizza un sito Web:

1. Identifica i caratteri utilizzando lo strumento di ispezione del browser.
2. Trova i caratteri utilizzando un'estensione del browser come WhatFont.
3. Rileva i caratteri nelle immagini utilizzando WhatTheFont.

Hai domande su come verificare quale carattere viene utilizzato su un sito web? Fatecelo sapere nella sezione commenti qui sotto!

Immagine di rudall30 / shutterstock.com