Fondamenti della tipografia web moderna
Come tutti quanti avrete ormai notato da tempo, la tipografia sul web si è evoluta costantemente, raffinandosi sempre di più a pari passo con le tecnologie dei display. Se negli anni 90 era normale utilizzare dei paragrafi con un font-size a 11 o addirittura 10 a causa della scarsa densità di pixel nei nostri monitor, ora non è più così: un corpo a meno di 16px è considerato, nella maggior parte dei casi, “piccolo”. Stiamo vivendo un’epoca in cui i monitor sono sempre più nitidi e con un numero di pixel inimmaginabile fino a solo qualche tempo fa, e il design tipografico sta diventando sempre più importante anche per il digitale.
Lo sapevate che il nuovo Apple Watch di 7° generazione ha una risoluzione superiore a quella del primo iPhone? Questo, semplificando, significa che in uno schermo così piccolo c’è una densità di pixel superiori a quella del primo iPhone (che dal punto di vista della superficie, risulta essere più grande). Quindi, sebbene le regole visive sono più o meno invariate dall’invenzione della stampa ad oggi, tutto quello che è invece legato all’aspetto tecnologico è un costante mutamento, anche se ormai sembra aver trovato degli standard molto solidi.
Quindi, l’argomento non è banale e ad oggi ci sono moltissime pubblicazioni e studi riguardo al ruolo che ha e che deve avere la materia. Inoltre, vista la grande importanza della materia, occorre che tutti i professionisti del settore, non solo i designer ma anche i developer, acquisiscano competenza in materia, a partire da come abbinare i font.
Prima di iniziare, però, ecco una frase che potrebbe essere illuminante:
La tipografia è la forma di user interface più basilare che possa esistere.
I caratteri sono strumenti per veicolare un messaggio. Combinandoli con pesi, contrasti e altre famiglie di font, si ottiene quella che è definita gerarchia visiva.
Classificazione dei font nella tipografia web
Facciamo una rapida carrellata delle tipologie più comuni, in modo da ripassare un paio di concetti chiave. Partiamo dicendo che il termine font è correttamente usato quando di parla di un file singolo, come ad esempio Roboto.ttf.
Se invece parliamo di Typeface, ci stiamo riferendo a un gruppo di stili, solitamente separati in font: Roboto-regular.ttf, Roboto-italic.ttf e via dicendo.
Altra cosa importante: quando ci riferiamo al contrasto dei caratteri, non ci riferiamo alla differenza fra esso e lo sfondo o gli elementi circostanti, ma proprio al contrasto fra le varie staffe. Con un esempio pratico, un carattere ad alto contrasto avrà delle staffe sottilissime e altre molto spesse, mentre uno a basso contrasto sembrerà tutto fatto con lo stesso spessore di linea.
Font Serif
Chiamati anche Roman per via della loro ispirazione ai caratteri maiuscoli romani, sono caratteri con grazie e si dividono a loro volta in altri gruppi.
Old Style
A casusa della tecnica non proprio rifinita della cesellatura dei caratteri, questi font avevano basso contrasto e grazie non rifinite. Es. Garamond, Bembo e Jenson.
Transitional
Caratteri di transizione fra l’Old Style e il Neoclassicismo, con contrasti più elevati rispetto ai predecessori. Es. Baskerville, Bulmer e Georgia.
Neoclassical
Stile nato con il tipografista italiano Bodoni, ha un contrasto fra le lettere elevatissimo. Es. Bodoni e Marconi.
Slab
Stile nato nel 19esimo secolo, fondamentalmente per la pubblicità. Es. Roboto Slab e Rockwell.
Font Sans Serif
Caratteri senza grazie che hanno avuto una maggiore diffusione durante l’epoca dei monitor a bassa risoluzione: i dettagli delle grazie si perdevano nei pochi pixel, così si optò per l’utilizzo dei Sans Serif. Anche loro hanno diversi gruppi.
Grotesque
Il primo font di questa famiglia ad emergere nel tardo 19esimo secolo. Es. Helvetica, Akzidenz e Univers.
Geometric
Typeface nati utilizzando forti e precise forme geometriche, con un contrasto praticamente nullo. Es. Futura, Avenir e Montserrat.
Humanist
Molti esperti considerano questo il più leggibile dei font Sans. Es. Frutiger, Gill Sans e PT Sans.
Display
Una categoria di tipografia fra le più curiose e affascinanti, che come utilizzo principale ha quella di dare peso alle lettere quando hanno grandi dimensioni. Al suo interno ci sono tantissimi sottogruppi con forme che vanno da pesi elevatissimi, pesi leggerissimi o addirittura particolari redesign delle lettere dell’alfabeto. Vi basterà fare un giro su Google Fonts o un altro sito collettore per vedere l’incredibile varietà.
Best practice di tipografia per il web design
Partiamo subito dando un enorme delusione a chi è alla ricerca di una regola esatta da applicare ad ogni occasione: una regola magica per la tipografia web non esiste.
Tuttavia, quello che è possibile fare a costo zero e dedicandoci l’attenzione necessaria, è comprendere come fanno gli altri. Sembra una banalità, ma badate bene che ho scritto “comprendere” e non “vedere“.
Nella scelta tipografica occorre farsi domande sul perché di una scelta piuttosto che un’altra. Quello che c’è da tenere a mente è nella prefazione di questo articolo, dove è stato scritto che la tipografia serve a veicolare un messaggio. La gerarchia dei contenuti fa da chiave al ragionamento e segue dei parametri precisi.
Di solito, i titoli vengono suddivisi in stili chiamati Title1, Title2, Title3, Title4, Title5 e Title6 (non sempre presente, quest’ultimo), dove 1 sta per la misura più grande della nostra scala tipografica e 6 quella più piccola.
Attenzione però perché in HTML i tag H1, H2, H3, etc definiscono l’importanza semantica di un titolo: questo significa che H1 è il titolo più importante della pagina, ma potrebbe non essere sempre associato a un Title 1. Nella pagine di secondo livello, può capitare benissimo che si utilizzino dei Title 3, ma che questi abbiano la classe corrispondano magari a degli H1.
Dopo i Title, ci sono i lead che sono quelli che vengono considerati i sottotitoli e infine i paragrafi che sono il vero e proprio blocco di lettura. Oltre a questi 3 elementi principali, ci sono in aggiunta le didascalie, gli indici e tutto quello che può essere di contorno e veicolare al meglio le informazioni senza fare confusione con il resto degli stili.
Un appunto importante: per i paragrafi, così come i lead, andrebbero nominati anche loro con una scala numerica. In questo caso, non cadete nell’errore di credere che Paragraph 1 sia però più grande di Paragraph 2. In realtà, a differenza dei titoli, dove la logica è proprio questa, qua abbiamo l’1 che rappresenta il più usato e il 2 quello meno usato. Quindi potrebbe anche essere che il Paragraph 2 sia più grande rispetto all’1.
Ecco un esempio della mia scala tipografica con i pesi e i nomi degli stili.
Ora che abbiamo chiarito gli stili, concentriamoci solo sulla gerarchia e la disposizione degli elementi. Quindi, in questa fase non è importante sapere se useremo un sans serif o un display.
Ecco una homepage che chiunque ha visto, almeno una volta nella sua vita. Come veicola Apple il suo messaggio attraverso la tipografia? Utilizza un H1 per fare in modo che l’utente si accorga subito di cosa stiamo parlando: il nuovo iPhone 13 Pro.
Subito dopo, un Lead con una breve frase che qualifichi il prodotto e infine due link, uno per saperne di più e uno per comprare il nuovo telefono.
Immaginate ora se lo stile H1 fosse stato applicato a Scopri di più e e il link ad iPhone 13 Pro. Il messaggio sarebbe stato completamente frainteso e l’enfasi non sarebbe più stata sull’iPhone ma su un generico link.
Ma il nostro esempio sulla tipografia di Apple non finisce qua: cosa succede se andiamo a selezionare il link Scopri di più?
È qua che avviene un cambio del messaggio e di conseguenza di come questo viene comunicato.
Siamo attualmente nella pagina dedicata all’iPhone 13 e questo ci viene ricordato anche dalla piccola intestazione in alto a sinistra. Non era quindi necessario porre l’attenzione sul prodotto con l’H1, così Apple ha invertito i ruoli e ha posto l’accento sulla frase Oh. So. Pro.
Il tasto per comprare è stato collocato in alto in una navigazione fissata e persistente, di conseguenza il link d’acquisto sarebbe risultato ridondante ed è stato rimosso.
Queste pagine d’esempio per far capire il concetto di quanto il messaggio sia vincolato al contesto e che la stessa intestazione, in base alla pagina in cui siamo, assume un significato completamente diverso.
Ma quindi, alla fine, una regola sulla tipografia web la riusciamo ad estrapolare?
Una regola, come già sottolineato, no. Tuttavia, possiamo dedurre dei punti interessanti.
- Lo stile H1 è quello dove l’attenzione si concentra maggiormente e non è fondamentale che ci sia un lead o che il lead sia collocato sopra o sotto di esso.
- Nel caso di più titoli all’interno di una pagina, come ad esempio un articolo (come questo), gli stili H1 dovrebbero essere usati soltanto nel titolo, mentre i capitoli H2, le intestazioni dei paragrafi H3 e via dicendo, sempre più nel dettaglio. I titoli servono anche per dettare il ritmo di lettura e facilitare l’individuazione degli argomenti di interesse. Provate a immaginarvi un articolo senza spazi verticali e con tutti i testi con lo stesso typeface a 16px.
- Il lead deve avere un contrasto inferiore rispetto al suo corrispettivo H1 (o H2, H3 ecc). Il ruolo del lead è quella di rafforzare il concetto espresso nel titolo, di conseguenza dovrebbe contenere informazioni aggiuntive, ma non quelle principali.
- I link servono per navigare, quindi è corretto che abbiano un colore diverso rispetto ai testi, ma non devono essere impattanti dal punto di vista dello spazio. Per questo, a volte, un’altra soluzione valida sono i link a forma di bottone.
Paragrafi, guida segreta alla leggibilità
Forse questa guida sulla leggibilità della tipografia non è proprio così segreta, considerando che siamo su internet, però possiamo dire con certezza che spesso i paragrafi sono il tasto più dolente della tipografia sul web.
Come mai? Perché spesso viene posta più attenzione ai titoli che al contenuto vero e proprio?
Semplicemente per due motivi:
- viene ritenuto superfluo, dando per scontato che l’utente, una volta avuta la sua attenzione, leggerà ogni dettaglio della pagina (spoiler: non è così)
- non ci sono le conoscenze di base su come gestire i paragrafi e si crede che il web, desktop o mobile, sia l’equivalente di un libro o di un giornale, trattando i contenuti allo stesso modo (questo è un errore gravissimo).
Come leggiamo
Partiamo dicendo che l’essere umano, a parte quando impara a leggere lettera per lettera in tenera età, per il resto legge sempre parola per parola. Questo significa che i nostri occhi eseguono costantemente movimenti attraverso i blocchi di testo, da sinistra a destra (nel caso della lettura all’occidentale), e questo fattore è da tenere in conto quando si imposta una lunghezza corretta del paragrafo.
Gli studi hanno dimostrato che un paragrafo, perché sia leggibile, dovrebbe contenere dalle 45 alle 80/85 battute, in base alla dimensione del font. Più il nostro typeface ha caratteri grandi e più le battute dovrebbero scendere verso le 45, mentre più le dimensioni sono piccole e più è corretto spostarsi verso le 85.
Non è una regola fissa, perché il paragrafo che state leggendo è sui 94 di media, quindi ricordatevi sempre di studiare il typeface in questione perché potreste trovare un modo valido per rompere le regole.
Dimensioni corrette
Possiamo affermare che generalmente la regola da adottare è quella di partire con 16px di dimensione come misura base e poi riadattare in base alle esigenze (e alla larghezza del paragrafo). Occorre però tenere ben presente che non tutti i font sono uguali, quindi 16px per il Roboto e per il Merriweather risulteranno in due dimensioni totalmente differenti.
Sperimentate e provate, testando i vostri font con contenuti abbozzati, compresi i numeri e simboli speciali – è facile trovarsi con dei numeri che rompono completamente il ritmo verticale perché allineati diversamente rispetto alle lettere (esempio classico il Raleway e il suo 3 fuori asse).
Una volta individuato il font giusto, incominciate a valutare le dimensioni di base e, nel caso di dubbio, andate a vedere come fanno sui blog più famosi. Non è sbagliato copiare le cose buone dagli altri, ma è sbagliato fare un paragrafo full-width su desktop.
E l’interlinea?
Questo argomento è forse il più spinoso perché la maggior parte degli addetti del settore non ci pensa. La distanza fra la riga superiore e quella inferiore contribuisce non solo alla leggibilità del testo ma trasmette un senso di equilibrio e leggerezza. Anche qua, non esistono regole specifiche, ma una generale che si può usare è partite sempre da un line-height a 120% e poi aumentate.
Io personalmente utilizzo questo valore in pixel perché difficilmente uso tanti typeface diversi e quindi non mi serve quella flessibilità che può dare la percentuale su diversi caratteri e stili. In ogni caso, considerate che strumenti come Figma eseguono la conversione in automatico, quindi sia che vi troviate su una strada piuttosto che un’altra, non preoccupatevi dell’output per gli sviluppatori perché ci sono entrambi.
Le 50 sfumature di grigio della tipografia
Un ultimo punto prima di farvi vedere un’immagine di quello che è definibile un paragrafo perfetto: il nero non si deve usare mai all’interno di un paragrafo.
Va benissimo un grigio scuro come #212121 oppure un colore come il verde scurito fino a quasi farlo sembrare nero, ma mai il nero. Come mai? Semplicemente perché i testi non sono solo contrasti fra le dimensioni ma anche fra i colori e un grigio detta inevitabilmente un ritmo più scandito.
Inoltre stanca meno gli occhi durante una lettura prolungata.
Ecco un paragrafo perfetto
Tipografia responsive: desktop vs mobile
Per fortuna il mobile è più semplice: già impostando il font a piena larghezza dello schermo, con 16px di corpo e la famosa interlinea a 120% dovrebbe essere leggibile nel 90% dei casi. Ricordatevi però il volume di traffico che generano i cellulari: non impostate questi dati a occhi chiusi ma testateli bene prima e su più schermi
Risorse utili
Dopo aver visto come la tipografia web sia cambiata negli anni, come un titolo possa veicolare un messaggio importante e infine come si costruisce un paragrafo, è il momento di lasciarvi qualche riferimento utile affinché i vostri studi possano proseguire.
- Type Wolf è il sito di riferimento per il font pairing e le risorse nel mondo della tipografia web, gestito e curato da Jeremiah Shoaf, con un traffico di circa 350.000 utenti al mese per la bontà dei suoi contenuti.
- Better Web Type è il sito di Matej Latin che ha scritto l’ottimo Better Web Typography for a Better Web. Acquisto consigliatissimo e sito da salvare nei preferiti subito. Al suo interno troverete un approfondimento ai concetti base che abbiamo visto e moltissimi esempi da prendere e salvare come riferimento.
- Google Fonts – nel caso non lo conosceste – è un sito dal quale si possono trovare, abbinare, scaricare e implementare centinaia di font, molti dei quali famosi e perfetti. Vi segnaliamo anche la sua controporte made in Adobe, estremamente curata e piena di font: Adobe Font.
Siamo giunti alla fine di questa infarinata sulla tipografia web e non abbiamo la pretesa di aver risolto tutti i vostri dubbi. Quindi approfondite autonomamente, sperimentate e soffermatevi a fare domande: Cosa voglio trasmettere? Qual è il mio obiettivo? Chi visiterà la pagina e su cosa dovrà concentrarsi?
Spesso la risposta è in un bold o un’interlinea maggiore. E ricordatevi che:
la tipografia è un bellissimo gruppo di lettere e non un gruppo di bellissime lettere.