Indice dei Contenuti
Alcuni web designer potrebbero considerare la tipografia come uno degli elementi meno importanti del web design, ma può fare la differenza nell’esperienza utente in molti modi.
Buone scelte tipografiche possono migliorare la leggibilità, l’identità del marchio, l’accessibilità e il tasso di conversione. Scelte tipografiche sbagliate, invece, possono indebolire questi fattori e rovinare l’esperienza dell’utente.
La tipografia, quindi, è un aspetto importante del web design, e qualcosa che ogni designer dovrebbe imparare quando avvia un’attività di web design. Per fortuna, il web è pieno di utili tutorial sulla tipografia e corsi per web designer.
In questo articolo, esamineremo 20 tutorial di web design. Mentre molti di questi tutorial sono disponibili gratuitamente online, abbiamo incluso anche alcuni corsi online a pagamento. Dopotutto, quando cerchi di trovare lavoro nel web design, devi essere in grado di distinguerti, e avere un certificato di completamento da un’istituzione o un fornitore di corsi riconosciuto può aiutare in questo.
Indice
- 20 Fantastici Tutorial Online di Tipografia
- 1. Tipografia Web: La Guida Completa per Designer
- 2. Come Aggiungere Font Personalizzati al Tuo Sito WordPress
- 3. Come Usare i Colori e i Font Globali di Elementor
- 4. La Guida Definitiva alla Tipografia di Base
- 5. Tutorial di Tipografia per Principianti: Tutto Ciò che Devi Sapere sulle Basi della Tipografia
- 6. Introduzione alla Tipografia
- 7. La Psicologia dei Font (Font che Evocano Emozioni)
- 8. Tipografia Web per Designer e Sviluppatori
- 9. Elementi Testuali del Design: Font, Tipografia e Spaziatura
- 10. Tipografia per Designer e Sviluppatori - Non Fare Schifo nel Design
- 11. Quando Usare Ogni Tipo di Font (e Quando No)!
- 12. Come Capire se un Font è Buono o Fa Schifo?
- 13. Scegliere i Font Web: Una Guida per Principianti
- 14. Come Scegliere i Font per i Tuoi Design
- 15. Come Scegliere i Font
- 16. Guida Tascabile per Combinare i Caratteri Tipografici
- 17. Come Cambiare il Font in un Tema WordPress (Qualsiasi Tema)
- 18. Tecniche CSS Moderne per Migliorare la Leggibilità
- 19. Introduzione ai Font Variabili sul Web
- 20. Impara a Usare i Caratteri - Critica Manuale della Tipografia
20 Fantastici Tutorial Online di Tipografia
Dai termini base della tipografia all’ottimizzazione dei font con CSS, abbiamo raccolto i migliori tutorial di tipografia per designer.
1. Tipografia Web: La Guida Completa per Designer

Livello di abilità: Principiante a Intermedio
Durata: 30 minuti
Costo: Gratis
Questo tutorial sulla tipografia viene da Elementor, il che significa che imparerai più di come usare la tipografia nel web design. Imparerai a mettere in pratica tutte queste cose — roba tipo formattazione, creare una gerarchia visiva, fare un sistema di design e così via — nel contesto di WordPress e Elementor.
2. Come Aggiungere Font Personalizzati al Tuo Sito WordPress

Livello: Principiante a Intermedio
Durata: 17:31
Costo: Gratis
A volte, WordPress non ha i font specifici che vuoi usare. Quindi, con questo tutorial di tipografia di Elementor, imparerai quali opzioni hai per aggiungere font personalizzati a un sito WordPress. Puoi aggiungerli manualmente a WordPress usando CSS o puoi caricarli in Elementor e usarli dall’editor.
3. Come Usare i Colori e i Font Globali di Elementor

Livello: Principiante a Intermedio
Durata: 6:50
Costo: Gratis
In questo video di Elementor, imparerai tutto sulla funzione Impostazioni Globali nell’editor di Elementor. Questo tutorial ti mostrerà come usare questa funzione per impostare sia i colori che i font e poi vedere come vengono applicati in tutto il sito. Quindi, se vuoi risparmiare tempo nell’aggiornare i tuoi font e vuoi portare maggiore coerenza in ogni sito che costruisci, questo breve tutorial video è da non perdere.
4. La Guida Definitiva alla Tipografia di Base

Livello di abilità: Principiante
Durata: 10:33
Costo: Gratis
Il nome di questo tutorial video di Envato Tuts+ è un po’ fuorviante. Dovrebbe chiamarsi “La Guida Definitiva alla Terminologia Tipografica di Base”. Detto questo, se sei nuovo di zecca alla tipografia, questo è un importante primo passo da fare. Familiarizzati con i termini relativi a tipografia, font, tipi di file, struttura dei caratteri, composizione tipografica e altro.
5. Tutorial di Tipografia per Principianti: Tutto Quello che Devi Sapere sulle Basi della Tipografia

Livello di abilità: Principiante
Durata: 18 minuti di lettura
Costo: Gratis
Questo tutorial di tipografia di Hubspot è un’altra utile introduzione alla tipografia nel design. Imparerai termini comuni, diversi stili di tipografia e anche dove trovare i tuoi font.
6. Introduzione alla Tipografia

Livello di abilità: Principiante
Durata: 8 ore
Costo: Gratis
Se stai cercando qualcosa di più approfondito per la tua intro alla tipografia, questo corso del California Institute of the Arts è una buona scelta. Non c’è costo per iscriversi a questo corso, il che è un grande vantaggio visto che ne tirerai fuori un sacco di informazioni utili. Imparerai sulla storia della tipografia, la sua struttura, come usarla per raccontare una storia, manipolare il suo aspetto e altro ancora.
7. La Psicologia dei Font (Font che Evocano Emozioni)

Livello di abilità: Principiante
Durata: 15 minuti
Costo: Gratis
Se sei nuovo nel design, questo tutorial di Envato Tuts+ sarà una ottima introduzione alla psicologia dei font. Simile alla psicologia del colore, imparerai le comuni risposte emotive e associazioni con certi tipi di font e otterrai consigli su come usarli a tuo vantaggio.
8. Tipografia Web per Designer e Sviluppatori

Livello: Principiante a Intermedio
Durata: 6.5 ore
Costo: €109.99
Questo corso Udemy sulla tipografia web è tenuto da Rob Sutcliffe della Interface School. Questa è una panoramica abbastanza tecnica della tipografia, che esamina i diversi tipi di classificazioni, suggerimenti sulla scelta e l’abbinamento dei font, rendere la tua tipografia web leggibile e responsive, e molto altro.
Per ottenere il massimo da questo corso, dovresti avere una certa conoscenza di HTML, CSS e JavaScript. Ciò non significa che non dovresti iscriverti se sei un nuovo designer — hai accesso a vita, quindi puoi tornarci una volta che avrai affinato le tue competenze in quell’area.
9. Elementi Testuali del Design: Font, Tipografia e Spaziatura

Livello di abilità: Principiante
Durata: 13 ore
Costo: Gratis
Questo corso dell’Università del Colorado Boulder è disponibile sul sito web di Coursera. È un corso lungo, durante il quale imparerai a manipolare gli elementi testuali per raccontare una storia con il tuo design. Il corso copre le basi e poi si estende alla spaziatura tipografica, alla scelta dei font, all’abbinamento dei font e altro ancora.
10. Tipografia per Designer & Sviluppatori - Non fare schifo nel Design

Livello di abilità: Intermedio
Durata: 8,5 ore
Costo: 99,99€
Muhammad Ahsan Pervaiz è il creatore di questo corso Udemy sulla tipografia con 4,5 stelle. Se vuoi ricevere una formazione completa sulle basi della tipografia, personalizzazione della tipografia, scelta e abbinamento dei font, e altro, questo è un corso fantastico da seguire. Gli esercizi sono integrati nel corso, quindi avrai anche un’esperienza pratica nell’implementare tutto ciò che impari man mano che procedi.
11. Quando Usare Ciascun Tipo di Font (e Quando No)!

Livello di abilità: Principiante
Durata: 12:55
Costo: Gratis
Molti dei tutorial e dei corsi che hai visto finora in questa lista hanno toccato l’argomento dei tipi di font. Tuttavia, questo tutorial di Envato Tuts+ approfondisce davvero l’argomento, analizzando i diversi tipi e sottocategorie di font. Imparando a identificare le differenze nella struttura di ciascuno, avrai molta più facilità a scegliere gli stili tipografici giusti per i tuoi siti.
12. Come Sapere Se un Font È Buono o Se Fa Schifo?

Livello di abilità: Principiante
Durata: 9:58
Costo: Gratis
Questo tutorial sulla tipografia di Flux riguarda la ricerca di font di qualità per i tuoi siti web. La discussione ruota principalmente su come i web designer possono trovare fonderie di caratteri e siti web di alta qualità da cui procurarsi i font. Perché, anche se capisci il tipo di font di cui hai bisogno, un font mal realizzato (anche se corrisponde a quello stile) potrebbe vanificare tutto il tuo duro lavoro. Questo tutorial ti aiuterà a evitare questo problema.
13. Scegliere Font Web: Una Guida per Principianti

Livello di abilità: Principiante
Durata: 10 minuti
Costo: Gratis
Questa è una guida pratica di Google Design su come determinare quali font web sono quelli giusti per ogni sito web che costruisci. Il tutorial ti guiderà attraverso una serie di fattori, come l’ambito del progetto e il design multilingue, e poi ti indirizzerà verso i Google Fonts che soddisfano le esigenze del tuo progetto.
14. Come Scegliere i Font per i Tuoi Design

Livello di abilità: Principiante
Durata: 7:35
Costo: Gratis
In questa guida passo-passo di Satori Graphics, riceverai consigli pratici e suggerimenti sulla scelta dei font per i tuoi progetti. Anche se c’è una forte enfasi qui sul design grafico, puoi applicare gli stessi cinque passi per scegliere e abbinare i font per qualsiasi cosa su cui lavori, che sia un sito web, un’app, un logo o qualche altro tipo di materiale di branding.
15. Come Scegliere i Font

Livello di abilità: Principiante
Durata: 9:41
Costo: Gratis
Questo tutorial YouTube di Flux ti insegnerà come allontanarti dal fare scelte di font basate su supposizioni o su ciò che ti dice il tuo istinto. Invece, affronterai la selezione dei font basandoti sull’utilitarismo. E riceverai anche un aiuto per trovare fonderie di caratteri che forniscono campioni grafici, così, di nuovo, non ti baserai solo su ciò che il tuo istinto ti dice su quanto bene apparirà un font.
16. Guida Tascabile per Combinare i Caratteri Tipografici

Livello di abilità: Principiante a Intermedio
Durata: 1 ora
Costo: Gratis
L’abbinamento dei font è decisamente un’arte. Quindi, se vuoi imparare a farlo, dovresti farlo da uno dei leader nel settore del design. Questa guida tascabile è stata creata da Tim Brown, il capo della tipografia per Adobe Typekit Adobe Type. Questa guida ti insegnerà come capire quali compiti devono svolgere i tuoi caratteri, come scegliere un carattere di base, come identificare i caratteri che lo completano e poi giudicare oggettivamente il tuo abbinamento.
17. Come Cambiare il Font in un Tema WordPress (Qualsiasi Tema)

Livello di abilità: Principiante
Durata: 10 minuti
Costo: Gratis
Questo semplice tutorial di ThemeIsle ti darà due opzioni per cambiare i font in WordPress. Puoi selezionare i web font dal Personalizzatore di WordPress. Oppure puoi installare il plugin Easy Google Fonts e impostare i Google Fonts usando il Personalizzatore. Anche se c’è un’opzione bonus inclusa, è meglio usare le impostazioni universali dei font di WordPress piuttosto che cambiare i font per blocco o pagina.
18. Tecniche CSS Moderne per Migliorare la Leggibilità

Livello di competenza: Intermedio-Avanzato
Durata: 11 minuti
Costo: Gratis
Edoarda Cavazza ha scritto questo fantastico articolo per Smashing Magazine che tratta l’uso del CSS per migliorare la leggibilità e l’accessibilità della tipografia del tuo sito web. Nello specifico, questo tutorial approfondisce l’uso della spaziatura per creare il miglior tipo di esperienza di lettura per i visitatori. Se non hai ancora imparato nulla sul kerning, l’interlinea o il tracking o non hai una conoscenza base del CSS, inizia dall’inizio di questa lista di tutorial sulla tipografia e torna a questo più tardi.
19. Introduzione ai Font Variabili sul Web

Livello di competenza: Intermedio-Avanzato
Durata: 20 minuti
Costo: Gratis
I font variabili sono una cosa relativamente nuova, ma stanno rapidamente guadagnando supporto in tutti i browser, il che significa che è ora che designer e sviluppatori inizino a usarli (se non lo avete già fatto). Come spiega il team di Google Developers in questa guida ai font variabili, sono super preziosi quando si tratta di prestazioni del sito web poiché ti permettono di salvare diverse variazioni di un font in un unico file. Per imparare a farlo, avrai bisogno di qualche conoscenza di CSS.
20. Impara a Usare i Caratteri — Critica al Manuale di Tipografia

Livello di competenza: Principiante-Avanzato
Durata: 30:14
Costo: Gratis
Questo è un tutorial interessante perché non è proprio un tutorial. Nel corso di 30 minuti, guarderai mentre The Futur valuta la tipografia utilizzata nella creazione del loro Manuale di Tipografia. Anche se stanno valutando il manuale stampato, è comunque un esercizio utile da seguire poiché ti insegnerà come rivedere il tuo lavoro e abituarti a fare scelte più intelligenti per la tua tipografia fin dall’inizio.
Padroneggia l'Arte della Tipografia e Migliora l'Esperienza dei Tuoi Utenti
Una volta che avrai passato un po’ di tempo con questi tutorial di tipografia e avrai una buona padronanza degli elementi essenziali, è ora di mettere tutto in pratica.
Una cosa da tenere a mente è che la tipografia, come tutto il resto nel design, si evolverà nel tempo. I principi e le linee guida di base rimarranno gli stessi, ma in termini di gusti delle persone nella tipografia, aspettati che cambino.
Quindi, assicurati che, oltre a padroneggiare le basi della tipografia, ti tenga anche al passo con le tendenze tipografiche.
Originally posted 2021-04-28 11:18:39.
Cerchi contenuti freschi?
Ricevi articoli e approfondimenti dalla nostra newsletter settimanale.
Inserendo la tua email, accetti di ricevere email da Elementor, incluse email di marketing, e accetti i nostri Termini e Condizioni e la Politica sulla Privacy