Perché la tipografia è la prima cosa che i designer sbagliano
La maggior parte delle persone pensa che la tipografia riguardi la scelta dei font. Non è così. La tipografia riguarda spaziature, ritmo e gerarchia — la struttura invisibile che guida l'occhio del lettore prima che decida consciamente dove guardare. Un font bellissimo rovinato da un leading sbagliato, tracking errato o nessuna gerarchia comunica meno efficacemente del Times New Roman usato correttamente. Questi 8 concetti spiegano perché.
Gli 8 fondamentali
Tracking
Spaziatura tra le lettere applicata globalmente a una parola o blocco di testo. Aumentala sulle etichette maiuscole; riducila sui titoli display.
Il testo tutto maiuscolo necessita di tracking +10–20% per respirare. Il corpo in minuscolo quasi mai.
Kerning
Spaziatura tra due specifiche coppie di caratteri. 'AV', 'To', 'WA' sono troppo distanti di default — il buon kerning corregge questi gap invisibili.
Il kerning automatico gestisce la maggior parte dei casi. Disattivalo nella demo per sentire esattamente cosa sta correggendo.
Leading
Lo spazio verticale tra le righe di testo. Troppo stretto e il testo soffoca. Troppo largo e l'occhio perde il filo tra le righe.
Sweet spot per il corpo: 1.4–1.6× la dimensione del font. I titoli display possono essere più stretti, circa 1.0–1.2×.
Peso del Font
Lo spessore del tratto — da thin (100) a black (900). Il peso crea gerarchia prima che il lettore legga consciamente una singola parola.
Limitati a 2 pesi per design: uno per il corpo, uno per le intestazioni. Più di 2 crea caos.
Serif vs Sans-serif
I serif hanno piccoli tratti terminali sulle lettere. I sans-serif no. I serif aiutano la lettura lunga su carta; i sans-serif vincono sugli schermi a dimensioni piccole.
Per il testo web sotto 18px, il sans-serif vince quasi sempre in leggibilità.
Allineamento
Come le righe si dispongono nel contenitore — sinistra, centro, destra, giustificato. L'allineamento a sinistra è corretto per quasi tutto il corpo del testo.
Non giustificare mai il corpo su web. Crea gap irregolari tra parole chiamati 'fiumi' che rompono il flusso di lettura.
Scala Tipografica
Il rapporto di dimensioni tra i livelli di intestazione. Un moltiplicatore costante (1.25×, 1.414×, 1.618×) crea ritmo visivo e armonia in tutta la pagina.
Scegli un rapporto e applicalo costantemente. Le dimensioni di intestazione arbitrarie sono la principale fonte di caos visivo nei design amatoriali.
Contrasto
La differenza visiva tra gli elementi — dimensione, peso, colore, stile. Senza contrasto non c'è gerarchia. Senza gerarchia, nulla viene letto.
Se due elementi sembrano vagamente simili, rendili identici o rendi il contrasto drammatico. La via di mezzo si legge come un errore.
Non leggerlo — sentilo
Ogni concetto sopra ha una demo live e interattiva nella nostra pagina Learn. Trascina gli slider per tracking e leading, alterna serif e sans-serif, modifica il peso in tempo reale. La tipografia si capisce quando la muovi — non quando la leggi.
AaApri la lezione interattiva →Vuoi un designer che applichi questi principi al tuo sito?
Parliamone →About
Patrick Chen — sviluppatore indipendente e web designer di Sublimearts.io. Ho costruito la lezione sui Fondamenti di Tipografia perché ogni corso di design passa 2 ore sulla teoria del colore e 10 minuti sulla tipografia. Mi sembrava sbagliato.