3

La tipografia web: concetti base e regole

La tipografia l’arte di organizzare i caratteri in maniera leggibile e con un design esteticamente interessante ed appropriato per il layout della pagina web. Sul web, tuttavia, gli utenti possono adattare le impostazioni del proprio browser per aumentare o diminuire la dimensione del font di default o cambiare i colori per aumentare il contrasto. Di conseguenza, si potrebbe pensare che una tipografia efficace non sia possibile da ottenere sul web. Ma essa non solo è possibile, ma il web ha anche delle potenzialità superiori alla tipografia tradizionale! Ciò, ovviamente, non significa che come designer non si avranno responsabilità nel presentare dei caratteri posizionati in modo attento ed appropriato! Esistono delle regole a cui nessuno si può sottrarre. Così oggi vedremo una carrellata delle nozioni di base e delle regole principali della tipografia web.

Cosa sono i caratteri web?

Fino a poco tempo fa, si era costretti ad usare sempre gli stessi tipo di carattere, comuni a tutti i browser e computer. Le scelte erano l’Helvetica (o Arial su un PC), Georgia, Times, Verdana o qualche versione di Courier. Senza dimenticare il tanto discusso Comic Sans! Questa tavolozza di caratteri strettamente limitata ha portato ad una omogeneizzazione deprimente della tipografia sul web, privando i web designer delle gioie (o degli orrori!!) di una serie completa di caratteri tra cui scegliere! Per fortuna tutto questo è cambiato negli ultimi anni con l’arrivo di servizi come Typekit, Google Web Fonts e FontDeck. Per la prima volta, una vasta gamma di font viene resa disponibile per l’uso sul web e, di conseguenza, il web design si sta evolvendo per trarne il massimo vantaggio.

web fonts

Quindi, dato che c’è una vasta gamma di font web disponibili, come si fa a scegliere quello più adatto? Qui ci sono alcuni indicatori….

  • minimalismo: scegliete un tipo di carattere di base e un carattere del display. Poi cercate di attenervi il più possibile alla vostra scelta, usandone il meno possibile. Solo perché ci sono migliaia di font disponibili, non significa che dovete usarli tutti nel vostro disegno!
  • scegliere caratteri appropriati al progetto: assicuratevi di scegliere i font che sono appropriati per il progetto da eseguire. Un font script potrebbe funzionare bene per rappresentare una lettera scritta a mano, ma non darà al design un aspetto professionale, specialmente se lo si userà su un sito web aziendale.

Leading, tracking e kerning

Un’ottima tipografia dovrebbe essere di facile lettura. Nella stampa ci sono molti modi per controllare il carattere e il modo in cui le singole righe, parole e caratteri interagiscono tra di loro. Queste opzioni includono la possibilità di impostare il leading (lo spazio tra le righe), tracking (lo spazio uniforme tra le lettere attraverso un passaggio di testo) e il kerning (la spaziatura tra due caratteri specifici). Tutte le proprietà tipografiche sono più impostati in unità relative, come lo SME, al fine di consentire scenari in cui viene ridimensionato il testo da parte del lettore. Sul web, ci sono i controlli simili sia per il tracking e il leading, ma il kerning non è direttamente controllabile tramite CSS. Per impostare il leading, bisogna utilizzare la proprietà CSS dell’altezza della linea. Per controllare il tracking, utilizzare la spaziatura fra le lettere. È inoltre possibile controllare lo spazio tra le parole utilizzando la proprietà “spaziatura parola”, che consente di aprire il vostro testo senza aumentare il tracking.

Funzione “span”

Se si desidera applicare la crenatura (kerning) tra i singoli caratteri, l’unico modo pratico per farlo è quello di “avvolgere” i caratteri con il tag <span>. Sarà quindi possibile applicare le proprietà CSS per l’intervallo, controllando la crenatura. Questo potrebbe generare un grande lavoro molto rapidamente, ma va utilizzato con parsimonia! Considerate inoltre l’utilizzo di una griglia per allineare le linee di base del vostro carattere in una struttura chiara, così da facilitare sia la leggibilità che migliorare la coerenza del design.

Larghezza colonna

La larghezza di una colonna di testo può avere un impatto forte sulla sua leggibilità. Nella stampa, le colonne sono in genere impostate per contenere qualsiasi cosa compresa tra i 45 e i 75 caratteri (che è di circa 9-15 parole di larghezza). Questo è considerata la larghezza ideale per il testo, consentendo al lettore di muoversi facilmente tra le linee senza perdere il “filo”. Le stesse regole generali si applicano al web, con lo scopo di impostare il tipo di colonne con non più di 80 caratteri (circa). Ricordate che potete impostare la larghezza delle colonne in em, utilizzando il codice CSS: larghezza: 80em;

Allineamento tipografico

Proprio come nella stampa, sul web è possibile impostare il carattere “giustificato”. Utilizzate la proprietà di “allineamento testo“. Esso permette un controllo preciso del testo giustificato, per distanziarlo e “riempire” così la linea. Sfortunatamente, il supporto del browser è ancora molto impreciso al momento!

Condividi suShare on Facebook0Tweet about this on TwitterShare on Google+0Share on Reddit0

Michele D'Ippolito

3 Comments

  1. I concetti espressi in questo articolo sono molto interessanti ed utili per gli addetti ai lavori

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


*