Vuoi capire al volo quale carattere tipografico stai guardando? Con WhatFont lo scopri in pochi secondi. Questa estensione del browser è un strumento leggerissimo per identificare famiglia, dimensione, peso e colore di un testo semplicemente passando il mouse, utile a copywriter, designer e sviluppatori.

WhatFont identifica i font direttamente sulle pagine web: attivi l’estensione, passi il mouse sul testo e vedi nome del carattere, dimensione, peso, colore e line-height. È ideale per controlli rapidi, mentre per analisi approfondite conviene confermare i risultati con gli strumenti di sviluppo del browser.

Che cos’è WhatFont e quando usarlo

WhatFont è un’estensione che legge le informazioni tipografiche già presenti nella pagina (CSS) e le mostra in un pannello sovrapposto. È perfetta quando devi riconoscere i font senza aprire strumenti complessi.

Qual è la differenza tra WhatFont e Ispeziona elemento?

Con WhatFont vedi subito i dettagli essenziali passando il puntatore. Con Ispeziona elemento, entri nel codice e puoi verificare la cascata CSS, la sorgente del font, gli override e gli stati responsivi: è più completo ma più lento.

Quando WhatFont non basta?

Se il testo è un’immagine, se un font è sostituito in fallback o se ci sono caricamenti asincroni, WhatFont può mostrarti dati incompleti. In questi casi usa gli strumenti di sviluppo per confermare ogni proprietà.

Come si installa WhatFont sui principali browser?

L’installazione è semplice: su Chrome ed Edge la trovi nello store ufficiale; su Firefox è disponibile come componente aggiuntivo; su Safari esistono alternative simili. Dopo l’installazione, aggiungi l’icona alla barra e concedi i permessi richiesti.

Per Chrome, cerca l’estensione per Chrome e aggiungila; su Edge spesso è compatibile lo stesso pacchetto; su Firefox apri la pagina degli Add-ons e installa. Su macOS/Safari valuta estensioni equivalenti, perché la versione classica potrebbe non essere disponibile o aggiornata.

  • Fissa l’icona di WhatFont sulla barra per attivarla rapidamente.
  • Concedi i permessi minimi: accesso alle pagine per leggere gli stili.
  • Se usi profili multipli, ripeti l’installazione per ogni profilo.

Passaggi rapidi essenziali

  • Installa l’estensione WhatFont nel tuo browser supportato.
  • Apri una pagina web che contiene il testo da identificare.
  • Clicca l’icona di WhatFont per attivare lo strumento.
  • Passa il mouse sul testo per vedere nome font e dimensioni.
  • Clicca per dettagli: famiglia, peso, colore, line-height.
  • Esci dall’analisi disattivando WhatFont dall’icona.

Quali dati mostra WhatFont quando passi il mouse?

In modalità attiva, posizionando il cursore sul testo appare un’etichetta con nome del font, grandezza (spesso in px), peso, colore (HEX/RGB) e line-height. Per il peso, la scala numerica standard va da 100 a 900; “normal” è 400, “bold” è 700.

Molte dimensioni mostrate sono espresse in pixel; in CSS 1 px equivale a 1/96 di pollice, utile per rapportare spaziature e resa su schermo. Quando clicchi, si apre un pannello con dettagli aggiuntivi come famiglia completa, sorgente dichiarata, font-weight, colore preciso e line-height calcolata.

Ricorda che il colore può essere in HEX (#RRGGBB), RGB o HSL; la dimensione può essere in px, em o rem. WhatFont mostra il valore “computato”, cioè quello che il browser applica davvero dopo la cascata degli stili.

Confronto con strumenti integrati e alternative

WhatFont è imbattibile per la rapidità, ma non sostituisce del tutto ispeziona elemento. Di seguito, un confronto pratico con opzioni comuni per capire quando usare cosa.

  • WhatFont per controlli istantanei. Ottimo per capire subito “che font è” e annotare i valori chiave. Se devi solo verificare un titolo o un bottone, è la scorciatoia migliore.
  • Ispeziona elemento per diagnosi complete. Consente di vedere la cascata CSS, le regole che vincono, i font caricati (anche variabili) e la rete. È indispensabile quando i dati sono contraddittori.
  • Alternative focalizzate sui font. Alcune estensioni offrono funzioni extra (bookmark di campioni, palette, comparazioni). Utili quando fai ricerca tipografica intensiva.
  • Strumenti del design system. Se il sito espone token tipografici, conviene leggerli alla fonte per evitare discrepanze tra componenti e pagine legacy.
  • Screenshot e confronto offline. Per auditing o presentazioni, cattura i pannelli di WhatFont e allega le note. Non sostituisce la verifica dei CSS, ma rende il confronto condivisibile.
  • Workflow ibrido consigliato. Usa WhatFont per orientarti, poi conferma con DevTools e documenta nel tuo file di progetto: eviti errori e mantieni traccia delle decisioni.

Errori comuni e come evitarli

Ecco alcune trappole frequenti e come gestirle con metodo.

  • Testi come immagini. Se il titolo è un’immagine, WhatFont non può leggere il font. Soluzione: controlla l’HTML o chiedi un asset testuale.
  • Fallback non evidenti. Vedi un font diverso da quello dichiarato? Potrebbe mancare la risorsa o esserci un blocco CORS. Verifica la rete e la famiglia di fallback.
  • Font variabili. Alcuni pesi intermedi non corrispondono ai classici 100–900. Conferma gli assi disponibili (wght, wdth) e i valori effettivi in DevTools.
  • Unità e zoom. La dimensione visiva cambia con zoom e DPR del dispositivo. Annotare l’unità (px, em, rem) ti aiuta a confrontare correttamente i risultati.
  • Stati responsivi. Media query e container query possono alterare tipografia e spaziature. Ridimensiona la finestra e ricontrolla in più breakpoints.
  • Override locali. Utility class o stile inline possono vincere sulle regole del tema. Cerca specificità e ordine di caricamento.

Suggerimenti pratici e casi d’uso

Integra WhatFont nel tuo flusso di lavoro per velocizzare analisi e decisioni. Ecco alcuni esempi concreti di applicazione.

E-commerce e landing page

Controlla headline, prezzi e pulsanti d’azione: la coerenza di famiglia, peso e gerarchia tipografica incide sul tasso di conversione. Con WhatFont annoti i pattern ricorrenti e proponi correzioni rapide.

Branding e UI

Verifica allineamento con le linee guida: famiglie principali e secondarie, pesi per titoli e testi, spaziature coerenti. Usa WhatFont per mappare le scelte e DevTools per testare cambi veloci.

Accessibilità di base

Colore e peso influenzano la leggibilità. Se il contrasto è basso o il peso è troppo leggero, segnalo nelle note e verifica con strumenti dedicati al contrasto: la chiarezza viene prima dell’estetica.

Domande frequenti

WhatFont è gratuito?

Sì, WhatFont è generalmente disponibile come estensione gratuita. Alcune alternative possono offrire piani a pagamento con funzioni extra, ma la rilevazione base è senza costi.

Funziona su tutti i siti, anche protetti?

Sì, su siti pubblici standard funziona. Su pagine interne o dietro login, potrebbe richiedere permessi; su contenuti caricati in iframe con restrizioni, i dati possono essere limitati.

Riconosce i font dentro le immagini?

No. WhatFont legge i CSS applicati al testo. Se il contenuto è un’immagine, non esistono proprietà tipografiche da leggere; in tal caso servono strumenti di riconoscimento visivo dedicati.

Posso copiare le informazioni negli appunti?

Sì, puoi trascrivere o copiare manualmente i valori che vedi (famiglia, dimensione, colore) nel tuo documento di lavoro. Molti utenti raccolgono note in tabelle o checklist.

Quali alternative posso valutare?

Oltre a WhatFont, considera estensioni focalizzate sui font, oppure usa direttamente gli strumenti di sviluppo del browser per vedere la cascata CSS e i file caricati.

Raccoglie dati sulla mia navigazione?

Controlla sempre i permessi dell’estensione e l’informativa dello store. In generale, WhatFont accede alle pagine per leggere gli stili; evita estensioni che richiedono permessi ingiustificati.

Riepilogo e prossimi passi

  • WhatFont identifica font con un passaggio del mouse.
  • Mostra dettagli chiave: famiglia, dimensione, peso, colore, line-height.
  • È più rapido di Ispeziona elemento per controlli veloci.
  • Attenzione a font caricati come immagini o test obsoleti.
  • Usalo con DevTools per verifiche accurate.

Usare WhatFont è un modo efficace per orientarti nella tipografia di un sito. Per risultati affidabili, combina questo strumento con le verifiche dei CSS: in pochi minuti puoi passare da una semplice curiosità a una mappatura chiara delle scelte tipografiche.

La prossima volta che qualcosa non torna in gerarchie, pesi o spaziature, attiva WhatFont, prendi nota dei valori chiave e conferma con gli strumenti di sviluppo. Questo flusso ti aiuterà a comunicare meglio con il team e a mantenere consistenza nel progetto.

Quest'articolo è stato scritto a titolo esclusivamente informativo e di divulgazione. Per esso non è possibile garantire che sia esente da errori o inesattezze, per cui l’amministratore di questo Sito non assume alcuna responsabilità come indicato nelle note legali pubblicate in Termini e Condizioni
Quanto è stato utile questo articolo?0Vota per primo questo articolo!