Tipografia web: come scegliere e impostare i caratteri di un sito

La tipografia web è la scelta e l’impostazione dei caratteri di un sito: quali font usare, con quali dimensioni, lunghezza delle righe, interlinea, pesi e contrasto, e come caricarli perché le pagine restino veloci. Una buona tipografia web rende il testo facile da leggere su ogni schermo, esprime la voce del brand ed è accessibile. Di solito un sistema ben pensato non richiede più di due caratteri e una breve scala di dimensioni.

Ultimo aggiornamento: 29 ottobre 2026.

Questa guida spiega come scegliere i caratteri di un sito, come costruire una scala tipografica, quali impostazioni decidono la leggibilità, i requisiti di accessibilità, il caricamento dei font e la performance, le licenze, la tipografia multilingue e gli errori che vediamo più spesso. È scritta per responsabili marketing, founder e designer che preparano il brief di un sito web o lo valutano.

In Odduel, agenzia creativa e tecnologica con sedi a Barcellona e São Paulo, il nostro servizio di branding progetta identità la cui tipografia deve funzionare sullo schermo come sulla carta. Per The Sugar Coated Cult abbiamo abbinato Druk Condensed e Druk Wide per i titoli a Helvetica Neue per il testo; per Torto Cozinha, Neue Metana per i titoli e Avenir Next per il testo corrente. Il nostro sito usa Inter, ospitato sui nostri server. I principi che seguono nascono da questo lavoro.

In breve: scegli un carattere per il testo che si legga bene a dimensioni ridotte sullo schermo e, al massimo, un secondo carattere per i titoli che esprima il brand. Imposta il testo corrente a 16 pixel o più, righe di circa 45-75 caratteri e un’interlinea intorno a 1,4-1,6 volte il corpo. Costruisci una scala di dimensioni breve, mantieni un contrasto forte, lascia che il testo si possa ingrandire, carica solo i pesi che usi, ospita i font sul tuo server se la licenza lo consente e verifica ogni lingua in cui pubblichi.

Come scegliere i font per un sito web?

Parti dal compito di ciascun carattere, non da una moodboard.

• Carattere per il testo: quello che regge paragrafi, moduli e menu. Servono forme aperte, una chiara distinzione tra lettere simili come I, l e 1, un’altezza della x generosa per le dimensioni ridotte, e i pesi e i corsivi che ti servono.
• Carattere display: facoltativo, per titoli e frasi brevi in cui il brand alza la voce. Può essere più caratterizzato, perché si legge a colpo d’occhio e in grande.
• Carattere monospaziato o d’accento: occasionale, per codice, dati o un elemento specifico del brand.

Prova i candidati con i tuoi contenuti reali, in ogni lingua in cui pubblichi, alle dimensioni che userai, su smartphone e su laptop. Un carattere che colpisce nel campionario può affaticare l’occhio in un paragrafo lungo.

Il carattere display è il punto d’incontro tra tipografia e identità. Deve venire dal sistema del brand, così che sito web, packaging, post social e insegne parlino con la stessa voce. Se il carattere display dell’identità non ha una licenza per il web o non copre le tue lingue, scegli un carattere pronto per il web con una struttura simile, non un sostituto qualsiasi, e registra la scelta nelle linee guida del brand. La nostra guida al branding spiega come la tipografia si inserisce nell’identità complessiva, dal logo al tono di voce.

Serif o sans serif sullo schermo?

Gli schermi di oggi li rendono bene entrambi. I sans serif restano la scelta più comune per interfacce e testo corrente, perché restano chiari a dimensioni ridotte e sugli schermi a bassa risoluzione. I serif possono funzionare benissimo per la lettura lunga, i siti editoriali e i brand che cercano una voce più letteraria, purché siano disegnati per lo schermo e impostati a una dimensione comoda. È una questione di tono e di leggibilità alle tue dimensioni, non una regola.

Come costruire una scala tipografica?

Una scala tipografica è un piccolo insieme di dimensioni usate in modo coerente su tutto il sito. Mantiene le pagine omogenee e rende più rapidi design e sviluppo.

Ruolo	Dimensione tipica su desktop	Dimensione tipica su smartphone	Interlinea	Note
Testo corrente	Da 16 a 20 px	Da 16 a 18 px	Da 1,4 a 1,6	Mai sotto i 16 px per i paragrafi
Testo piccolo (didascalie, etichette)	Da 13 a 14 px	Da 13 a 14 px	Da 1,3 a 1,5	Solo testi brevi, con contrasto forte
H3	Da 20 a 24 px	Da 18 a 22 px	Da 1,2 a 1,35	Nettamente più grande o più marcato del testo
H2	Da 28 a 40 px	Da 24 a 30 px	Da 1,1 a 1,25	Titoli delle sezioni principali
H1	Da 40 a 80 px o più	Da 30 a 44 px	Da 1,0 a 1,15	Uno per pagina; può usare il carattere display

Sono intervalli, non uno standard. Oggi molti siti usano dimensioni fluide, che crescono in modo graduale tra un minimo e un massimo man mano che la finestra si allarga: così i titoli entrano negli smartphone più stretti e mantengono presenza sugli schermi grandi.

Quali impostazioni determinano la leggibilità?

• Lunghezza della riga: circa 45-75 caratteri per riga nel testo, spazi inclusi. Con righe più lunghe è difficile trovare l’inizio della successiva; con righe più corte si spezza il ritmo.
• Interlinea: circa 1,4-1,6 volte la dimensione del carattere per i paragrafi, più stretta per i titoli grandi.
• Spazio tra i paragrafi: uno stacco ben visibile, di solito vicino all’altezza di una riga.
• Allineamento: testo allineato a sinistra per la maggior parte dei contenuti nelle lingue che si leggono da sinistra a destra; sul web evita il testo giustificato, che crea spazi irregolari.
• Pesi: regular per il testo, un peso nettamente più marcato per enfasi e titoli; i pesi molto leggeri sono difficili da leggere a dimensioni ridotte.
• Maiuscole e spaziatura: le etichette brevi in maiuscolo guadagnano da una spaziatura tra le lettere leggermente più ampia; i passaggi lunghi in maiuscolo sono difficili da leggere.
• Righe orfane e interruzioni: evita parole isolate sull’ultima riga di titoli e paragrafi brevi; il CSS moderno può bilanciare automaticamente le righe dei titoli.

In che modo la tipografia incide sull’accessibilità?

Una tipografia accessibile è, quasi sempre, una buona tipografia applicata con coerenza. Le Web Content Accessibility Guidelines fissano un rapporto di contrasto minimo di 4,5:1 per il testo normale e di 3:1 per il testo grande, e richiedono che il testo si possa ingrandire e la spaziatura aumentare senza perdere contenuti.

• Contrasto: verifica il testo sul suo sfondo reale, compreso il testo sopra le fotografie.
• Ridimensionamento: usa unità relative, così il testo cresce quando chi visita il sito aumenta la dimensione nel browser.
• Spaziatura: il layout deve reggere un aumento dell’interlinea e della spaziatura tra lettere e parole.
• Niente testo nelle immagini: titoli e messaggi devono essere testo vero, che si può leggere, tradurre e ridimensionare.
• Focus e link chiari: i link devono sembrare link e il focus da tastiera deve essere visibile.

La nostra guida all’accessibilità dei siti web approfondisce i requisiti in vigore in Europa.

Come influisce il caricamento dei font sulle prestazioni?

I font sono file che ogni visitatore scarica: incidono sulla velocità e sul modo in cui la pagina appare durante il caricamento.

• Carica solo ciò che usi: ogni peso e ogni stile è un file a sé; due famiglie con tre pesi ciascuna di solito bastano.
• Usa formati moderni: il WOFF2 è compresso e compatibile con i browser attuali.
• Ospita i font sul tuo server quando puoi: servirli dal tuo dominio evita connessioni in più e, con alcuni servizi, il trasferimento a terzi dei dati dei visitatori, un aspetto rilevante ai sensi del GDPR.
• Controlla come appare il testo: imposta font-display in modo che il testo compaia subito con un font di riserva, e scegline uno con proporzioni simili, così le righe non saltano quando arriva il web font.
• Precarica il file principale usato nella prima schermata e riduci i font ai soli caratteri che servono alle tue lingue.
• Valuta i font variabili, che contengono molti pesi in un unico file, quando ne usi diversi.

Le best practice sui font di Google spiegano queste tecniche nel dettaglio.

Come funzionano le licenze dei font sul web?

I font sono software con una licenza. Una licenza desktop per progettare materiali stampati di solito non copre l’inserimento del font in un sito web, e le licenze web possono avere un prezzo legato alle visualizzazioni di pagina mensili o ai domini. Le famiglie open source si possono usare liberamente nei limiti della loro licenza. Tieni traccia di ogni font, della sua licenza e di ciò che copre, e inserisci queste informazioni nelle linee guida del brand; la nostra guida alle linee guida del brand spiega cos’altro devono contenere.

Cosa cambia nei siti multilingue?

Un sito pubblicato in più lingue ha bisogno di caratteri che coprano ogni segno da mostrare: gli accenti del francese, del portoghese e dello spagnolo, la ß e le dieresi del tedesco e gli altri alfabeti che prevedi di aggiungere. Controlla il set di caratteri del font prima di sceglierlo. Prova i titoli nella lingua più lunga, perché le parole tedesche e portoghesi possono essere molto più lunghe di quelle inglesi. Verifica che a capo e sillabazione funzionino in ogni lingua. Le dimensioni che tengono un titolo inglese su una sola riga potrebbero dover cambiare nelle altre lingue.

Quali sono gli errori più comuni nella tipografia web?

• Troppi caratteri o troppi pesi, che rendono l’insieme incoerente e rallentano le pagine.
• Testo troppo piccolo, soprattutto sullo smartphone.
• Testo grigio a basso contrasto su sfondi chiari.
• Righe troppo lunghe sugli schermi larghi.
• Testo inserito nelle immagini, che gli screen reader non leggono e che non si può tradurre né ridimensionare.
• Font caricati da più servizi senza motivo, con connessioni e trasferimenti di dati in più.
• Altre lingue trascurate, con accenti mancanti o titoli che escono dallo spazio.
• Nessun piano di riserva, così il testo resta invisibile o si sposta mentre i font si caricano.

Le domande più comuni

Una buona tipografia web è un sistema essenziale e coerente, testato con contenuti reali in ogni lingua in cui pubblichi. Scopri come il nostro servizio di branding progetta caratteri che funzionano sullo schermo e sulla carta, oppure parlaci del tuo progetto e analizzeremo la tipografia del tuo sito.