Anteprima e tester di font gratuito

Cosa fa questo strumento

Uno strumento di anteprima dei font renderizza la stessa stringa in molti caratteri tipografici simultaneamente, così puoi confrontarli fianco a fianco senza impegnarti su uno solo. Digita il tuo testo una volta in cima, il nome del progetto, il titolo che stai scrivendo, il logotipo del brand che stai scegliendo, e ogni font nella galleria mostra la stessa stringa nel proprio carattere. Regola dimensione, colore e sfondo per testare come appare il confronto alla dimensione e al contrasto in cui apparirà davvero in produzione. Clicca su un font per copiare la sua dichiarazione CSS font-family. La classica stringa di confronto tipografico "The quick brown fox jumps over the lazy dog" è un pangramma (ogni lettera dell'alfabeto inglese compare almeno una volta), utile perché esercita ogni glifo che il carattere ha da offrire in una sola breve frase.

Caratteri web-safe

I caratteri web-safe sono caratteri tipografici disponibili su tutti i principali sistemi operativi (Windows, macOS, Linux). A differenza dei caratteri personalizzati che devono essere scaricati, i caratteri web-safe si visualizzano istantaneamente perché già installati sul dispositivo dell'utente. Questo strumento include oltre 30 caratteri web-safe e oltre 20 popolari Google Fonts che si caricano istantaneamente dal web.

Google Fonts e l'era dell'hosting di web font

Google Fonts è stato lanciato nel maggio 2010 come libreria gratuita ospitata su CDN di caratteri tipografici open source. Il lancio originale aveva 18 font; nel 2026 il catalogo supera le 1.500 famiglie, tutte con licenza SIL Open Font License o termini permissivi simili. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt per Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011), questi sono tra i caratteri più usati sul web moderno, tutti disponibili gratuitamente tramite Google Fonts. Il meccanismo di caricamento del catalogo è evoluto negli anni: il lancio originale del 2010 usava tag <link> verso un endpoint CSS di Google; dal 2018 in poi è stato enfatizzato il parametro display=swap per controllare il comportamento FOUT/FOIT; la Google Fonts API v2 del 2022 pre-renderizza i sottoinsiemi per migliori prestazioni; l'uso moderno su siti sensibili alla privacy spesso ospita i font in proprio per evitare le preoccupazioni di privacy e conformità GDPR del CDN di Google (una sentenza di un tribunale tedesco del 2022 ha ritenuto specificamente che caricare Google Fonts dai server di Google senza il consenso dell'utente violasse il GDPR). Adobe Fonts (precedentemente Typekit, acquisito nel 2011), Fontshare (font gratuiti di Indian Type Foundry, 2021), Bunny Fonts (mirror di Google Fonts rispettoso della privacy, 2021) sono le principali alternative.

Categorie di caratteri

• Caratteri serif · Georgia, Times New Roman, Palatino. Tradizionali, leggibili, formali. Buoni per il corpo del testo in articoli e libri.
• Caratteri sans-serif · Arial, Helvetica, Verdana, Roboto, Open Sans. Moderni, puliti, versatili. I più popolari per il web design.
• Caratteri monospace · Courier New, Source Code Pro. Larghezza fissa. Perfetti per codice, terminali e documentazione tecnica.
• Caratteri display · Impact, Playfair Display, Oswald. Grandi, in grassetto, decorativi. Ottimi per titoli e branding.
• I font script e calligrafici imitano stili scritti a mano. Utili con parsimonia per branding personali o in stile invito; quasi impossibili da leggere a dimensioni del corpo del testo; vanno usati come si usa il maiuscolo (brevemente, deliberatamente).

I font variabili, la rivoluzione moderna silenziosa

La specifica OpenType Font Variations (TrueType GX Variations di Apple del 1994 più i contributi di Adobe, standardizzati congiuntamente come OpenType 1.8 nel settembre 2016) permette a un singolo file di font di descrivere una famiglia infinita di variazioni correlate. Mentre una famiglia tradizionale spedisce file di font separati per Light, Regular, Medium, Bold, Black, più i loro corsivi, da sei a dieci file da 50-200 KB ciascuno, un font variabile spedisce un singolo file contenente tutti gli stessi design come variazioni continue lungo assi (peso, larghezza, inclinazione, dimensione ottica e assi personalizzati arbitrari che il designer del carattere definisce). Il supporto dei browser è arrivato in Chrome 62 (ottobre 2017), Firefox 62 (settembre 2018), Safari 11.0/11.1 (2017-2018) ed Edge con Chromium (2020). I principali rilasci di font variabili includono Roboto Flex (Christian Robertson + Font Bureau, ottobre 2022) che ha 13 assi; Recursive (Stephen Nixon, 2019); Inter (Rasmus Andersson) con assi di peso e inclinazione; e la maggior parte delle famiglie principali ora spedisce versioni variabili insieme ai tradizionali file statici. Il risparmio di banda è notevole: un singolo file di font variabile da 200 KB rimpiazza otto file statici da 100 KB, offrendo al contempo più flessibilità di design.

Il caricamento dei font e il problema FOUT/FOIT

Quando un browser scarica un file di font personalizzato, cosa mostra nel frattempo? Due strategie estreme. FOIT (Flash of Invisible Text), non renderizzare alcun testo finché il font non arriva, poi mostrare improvvisamente il testo. La pagina sembra rotta finché il font non si carica. FOUT (Flash of Unstyled Text), renderizzare il testo immediatamente con un font di fallback, poi sostituirlo con il font personalizzato quando arriva. La pagina è leggibile dal frame zero ma lo scambio è visivamente brusco. La proprietà CSS font-display (aggiunta in CSS Fonts Module Level 4) dà il controllo agli sviluppatori: auto (default del browser, di solito tendente al FOIT), block (FOIT completo), swap (FOUT completo, la best practice moderna dominante), fallback (breve blocco invisibile poi scambio, con un fallback "abbastanza buono" dopo qualche secondo), optional (salta del tutto il font personalizzato se non si carica abbastanza in fretta). Per i Core Web Vitals e i punteggi Lighthouse nel 2026, font-display: swap è la raccomandazione standard, abbinata a hint preload per i font critici e a un font di fallback scelto con cura che sia metricamente simile al font personalizzato (così il layout non si ridispone quando avviene lo scambio, la nuova proprietà size-adjust in CSS Fonts Module Level 5 affina questo aspetto).

Scegliere i font in base al contesto

• Testo dell'interfaccia utente, prima il system font stack (Apple SF, Segoe UI, Roboto, segue il sistema operativo dell'utente) per latenza zero e aspetto appropriato alla piattaforma. Se è richiesto un font personalizzato per ragioni di brand, scegli un sans umanistico (Inter, Open Sans, Source Sans Pro) a 16 px o più.
• Lettura di lunga durata (articoli, blog), serif ottimizzato per schermo (Georgia, Merriweather, Lora) a 18-22 px con line-height generoso (1,6-1,8). I serif aiutano l'occhio a seguire lunghe righe di testo.
• Logotipo del brand, un carattere display distintivo usato a una sola dimensione grande. Abbinalo a un carattere del corpo del testo più neutro. Investire in un carattere personalizzato o commissionato qui ripaga, è la decisione tipografica singola più visibile del brand.
• Blocchi di codice, un font dedicato per programmatori (JetBrains Mono, Fira Code, Cascadia Code) a 14-15 px. Le legature di programmazione sono una preferenza personale; molti sviluppatori le adorano, alcuni le trovano confuse.
• Tabelle di numeri, un font con cifre tabulari (la cifra 1 occupa la stessa larghezza di 2, 3 ecc.) così le colonne di numeri si allineano senza padding manuale. La maggior parte dei font moderni offre cifre tabulari tramite la proprietà font-variant-numeric: tabular-nums.
• Solo per uso decorativo, font calligrafici, script, caratteri display retrò. Usali brevemente e deliberatamente; mai per il corpo del testo.

Domande frequenti

Qual è la differenza tra caratteri web-safe e personalizzati?

I caratteri web-safe sono preinstallati sui computer degli utenti e si visualizzano istantaneamente. I caratteri personalizzati (Google Fonts, Typekit, ecc.) devono essere scaricati, aggiungendo latenza ma offrendo più varietà. La maggior parte dei siti combina entrambi · web-safe come fallback e personalizzati come principali.

Come uso un Google Font sul mio sito?

Copia la dichiarazione CSS font-family fornita da questo strumento e incollala nel tuo CSS. I Google Fonts si caricano tramite tag link nel tag head HTML. Questo strumento include già i link dei caratteri: basta applicare le regole font-family ai tuoi elementi.

Qual è un buon carattere serif per il corpo del testo?

Georgia e Merriweather sono eccellenti per il corpo del testo. Sono molto leggibili a schermo grazie a una buona spaziatura e a forme di lettera distinte. Times New Roman è troppo stretto per il web. Per un serif moderno, prova Playfair Display.

Lo strumento di anteprima funziona offline?

I font web-safe (Arial, Georgia, Verdana, ecc.) funzionano offline perché vengono caricati dal tuo sistema operativo. I Google Fonts della galleria richiedono un fetch di rete una tantum dal CDN di Google per essere renderizzati, una volta caricati vengono memorizzati nella cache e l'anteprima funziona offline da lì in poi. Metti la pagina offline (modalità aereo) dopo il caricamento iniziale per confermare; i font installati nell'OS continuano a renderizzarsi, i Google Fonts usano qualunque cosa sia stata memorizzata in cache.

Strumenti correlati