Jamboo's Webs and Blogs

Quando si parla di creare un sito per il Web, si pensa soprattutto alla progettazione e alla realizzazione dell’aspetto grafico. Si dimentica spesso che anche la tipografia, ovvero la tecnica della disposizione dei caratteri, ha un valore visivo, e non solo verbale: infatti il lettore prima scansiona le forme nella pagina e poi eventualmente decide di leggere il contenuto. In questo senso l’utente stabilisce quasi inconsciamente se approcciare la lettura del testo o meno in base alla convenienza e l’attrazione del testo, ovvero secondo la sua “usabilità.”

Le stesse tecniche e convinzioni della tipografia che sono applicate per la stampa vengono adottate anche per Internet, però il risultato finale, come viene reso il testo, è diverso poiché diverso è il mezzo usato. Per quanto riguarda riviste e giornali, il testo è reso minimamente a 1200 dpi (dots per inch), mentre lo schermo può mostrarlo a 72-o 96-dpi. Per questo motivo alcuni font sono più o meno adatti per essere letti sullo schermo o stampati su carta. Ad esempio alcuni font come Times, Times Roman, Helvetica, Arial sono stati propriamente creati per la stampa, mentre altri, come Verdana, Georgia, Times New Roman, Geneva and New York, sono stati ottimizzati per essere più leggibili sullo schermo.

La caratteristica più notevole per quanto riguarda la tipografia per il Web è la sua variabilità in quanto il testo viene “ricreato” dall’interazione tra il sistema operativo, il monitor, il browser[ i ], e le impostazioni del browser dell’utente. L’utente potenzialmente non vedrà il sito per come lo si è progettato, né per quanto riguarda il layout né per la tipografia, i quali devono essere considerati come dei suggerimenti su come si dovrebbero visualizzare le pagine. Non si può mai sapere con precisione cosa l’utente vedrà sul suo schermo.

Occorre dunque avere qualche base sulla tipografia in generale per potere sfruttare al massimo le potenzialità del testo come oggetto usabile di un sito, forse il più importante di una pagina Web in quanto informativo per eccellenza.

Il significato di un font

Il tipo di font che si utilizzerà per il testo molto spesso già porta con sé del significato. Il lettore spesso ha già associato già un significato al tipo di carattere che viene utilizzato. Nell’esempio che segue, si crea un certo disagio nella lettura perché la nostra cultura ha già associato un certo significato a questi due tipi di font, cioè perché l’esperienza passata ha associato questo tipo di carattere a un concetto. Il significato semantico della parola è in forte contrasto con il significato connotativo dei caratteri.

In modo simile un carattere può suggerire qualcosa di meno legato alla cultura e più pertinente alla cognizione dell’uomo. Un carattere con forti aste o messo in grassetto stimola sensazioni diverse rispetto a uno dai contorni più sotti

li. Una lettera con le grazie provoca uno stimolo diverso rispetto ad una senza. Vari associazioni vengono fatte secondo le tante differenze: forma, contorno, spessore, simmetria, e così via.

Classificazione dei font: Le famiglie

Storicamente vi sono vari tipi di classificazioni dei tipi di caratteri, ma quello che interessa maggiormente a noi è quella per quanto riguarda i caratteri per il Web, ovvero i font. Il W3C[ i ] ha genericamente raggruppato i font in cinque famiglie, cioè un gruppo di font che hanno delle caratteristiche simili, sebbene delle variazioni di stile:

Serif: con le grazie, o i tratti ornamentali ai piedi delle aste del carattere. Spesso hanno sia dei tratti spessi sia sottili. e.g. Times New Roman, Garamond, Georgia.

Sans-Serif: senza le grazie, quindi tratti geometrici più retti o curvilinei, e spesso i tratti sono sempre dello stesso spessore. e.g. Verdana, Arial.

Cursive: questi caratteri ricordano la scrittura in corsivo, quindi più o meno uniti dall’uno e l’altro glifo. Alcuni font sono sempre cursive, come quelli usati per rendere l’arabo. e.g. Adobe Poetica, Sanvito, Zapf-Chancery.

Fantasy: quei caratteri “fantasiosi” e quindi molto ornamentali e decorativi, sebbene rappresentano sempre delle lettere. Spesso sono utilizzati per titoli, e non per testo. e.g. Allegro BT , Geometrique, Cottonwood.

Monospace: ogni carattere ha una dimensione fissa di larghezza (ad es. nonostante la “i” è più stretta della “M” occuperà lo stesso spazio orizzontale). Rassomigliano molto al testo prodotto dalle macchine da scrivere e vengono usati spesso per rappresentare linguaggi informatici, come l’HTML. e.g. Courier, MS Courier New, Prestige.

Dare enfasi al testo

Un modo facile per attirare l’attenzione dell’utente durante la scansione iniziale di una pagina Web è aggiungendo dell’enfasi tipografica, creando anche un testo interessante da vedere. Se si pone enfasi su molti elementi tuttavia, non molto sarà messo in evidenza. È bene aggiungere un parametro di enfasi alla volta: se si vuole porre enfasi ad un sottotitolo, non bisogna metterlo in una dimensione grande, in maiuscolo o in grassetto. Basta soltanto creare contrasto rispetto al testo.

Il grassetto è un ottimo modo per dare enfasi perché il colore del testo in grassetto contrasta con il testo semplice. Bisogna fare attenzione però a non creare blocchi troppo grandi in grassetto in quanto ciò non crea un buon grigio tipografico. Il grassetto è efficace soprattutto nei titoli e sottotitoli.

Il corsivo attira per il suo contrasto di forma. Convenzionalmente il corsivo viene usato per i nomi di libri o riviste, per parole in lingua straniera, o per mettere enfasi su una parola. Bisogna avere cura a non usare il corsivo con un font di dimensione troppo piccola in quanto spesso, per motivi di risoluzione, non risulta molto leggibile.

Per le pagine Web non conviene mai usare la sottolineatura perché potrebbe essere confusa con i collegamenti ipertestuali. La sottolineatura è stata scelta come espediente per denotare un collegamento perché solo il colore blu del testo/link non era ovvio per i daltonici o per persone con schermi monocromatici.

Il maiuscolo (o maiuscoletto) è un pessimo espediente per creare enfasi. Quando si legge una parola o una frase, l’occhio riconosce la forma della parola, e il lettore fa scorrere gli occhi sulla parte superiore della riga. Quando si mette un blocco di testo tutto in maiuscolo non c’è una forma distintiva, quindi diventa meno leggibile

Allineamento del testo e margini

Lo spazio bianco attorno al testo è importante per dare più contrasto al grigio tipografico. Se questi spazi, chiamati margini, vengono usati con consistenza, possono dare struttura alla pagina ma danno anche un interesse particolare mettendo in risalto lo spazio positivo della pagina (testo, grafica) distinguendolo dallo spazio negativo (sfondo).

Blocchi di testo hanno dei margini particolari a secondo il loro allineamento. Molti editori di testo, come MS Word, danno la possibilità di allineare il testo in modo giustificato. In questo modo, con l’utilizzo della sillabazione delle parole, possiamo ottenere un blocco simmetrico e rettangolare di testo. Sebbene è possibile allineare il testo in modo giustificato per uso sul Web, la visualizzazione è lontana dall’essere esteticamente piacevole, in quanto le parole non possono essere sillabate dal browser e spesso viene inserito troppo spazio tra le parole per dare l’effetto dell’allineamento a destra e a sinistra. Per il futuro imminente l’allineamento giustificato sembra poco pratico e poco usabile in quanto la sillabazione automatica non è una priorità per i produttori di browser.

Testi allineati a destra o al centro sono anch’essi difficili da leggere. Durante la lettura da sinistra a destra, l’occhio ha più difficoltà a trovare l’inizio di ogni riga, in quanto i margini a sinistra sono irregolari. L’allineamento a sinistra è il più prevedibile e l’irregolarità del margine destro dà varietà e interesse alla pagina, senza comunque disturbare la lettura.

Per quanto riguardano i titoli, anche essi dovrebbero essere allineati a sinistra per il testo destinato al web per evitare asimmetria o sconforto durante la lettura.

Lunghezza della riga

C’è un motivo fondamentale perché le righe di testo di riviste e giornali sono abbastanza brevi, e questo ha una spiegazione cognitiva. L’area della retina usata per alta acuità visiva è la macula, che costituisce circa il 15 per cento dell’area della retina. Ad una distanza di lettura normale, la larghezza di fuoco acuto dell’occhio è di circa 7-8 cm. Se una riga è superiore a questa larghezza, il lettore deve spostare la testa o sforzare i muscoli oculari per potere scansionare una riga di maggiore lunghezza, ed è possibile oltretutto che perda il segno dell’inizio della riga successiva. Parecchi studi mostrano che una lunghezza di riga minore costituisce maggiore leggibilità del testo.

In questo spirito conviene mantenere le righe del testo a 50-70 caratteri (1012 parole circa) per riga. Il modo più facile per ottenere questo è creare una tabella invisibile (BORDER=”0”) con una larghezza non superiore ai 365 pixel. Lo stesso si può ottenere con i CSS[ i ], stabilendo la larghezza del testo (ad esempio, p {width: 365 px} ). Inoltre con i CSS è possibile anche aumentare l’interlineatura, cioè lo spazio bianco verticale tra una riga e un’altra, che talvolta può aumentare la leggibilità in quanto i discendenti dei caratteri di una riga e gli ascendenti della successiva potrebbero anche confondersi. Se si sceglie di mantenere delle righe di testo più lunghe, è consigliabile aumentare l’interlineatura.

Struttura e presentazione: CSS

Gli inventori dell’HTML erano scienziati che volevano condividere documenti di fisica, e non importava loro se la presentazione fosse esteticamente gradevole o meno. Molta critica è stata fatta sul fatto che non hanno considerato neanche minimamente le tradizioni di tipografia e redazione. Per questo motivo l’HTML risulta molto rigido, e molti web designer non utilizzano i tag[ i ] standard per le intestazioni (H1, H2, etc.) perché sembrano troppo esagerati in dimensioni. L’unica priorità inizialmente era quella di avere una gerarchia nel documento per capire la struttura dell’informazione.

I fogli di stile CSS riconciliano struttura e presentazione. Così ad esempio puoi ridefinire i tag H1, H2 etc. in modo personalizzato, così che si può mantenere la logica visiva senza sacrificare la struttura del contenuto. Inoltre i CSS permettono più controllo tipografico utilizzando meno codice rispetto all’HTML, e aiutano a mantenere una consistenza visiva nel sito intero.

Scegliere il font giusto

Convenzionalmente si sceglie un serif (Times New Roman o Georgia) per il testo e un sans-serif (Arial o Verdana) per titoli e intestazioni. Vari studi sono stati fatti a proposito, ma i risultati sono inconcludenti: non necessariamente questa convenzione deve essere una regola e non sempre presenta una leggibilità ottimale. Si può solo suggerire di provare vari tipi di font nel contesto della pagina e del sito web, e con l’aiuto di altre persone, in particolar modo degli utenti a cui è destinato il progetto, verificare la migliore combinazione tipografica.

In ogni caso non è consigliabile utilizzare troppi font nella stessa pagina: basta una sola famiglia di font con vari dimensioni e spessori per distinguere il testo da un testo con enfasi (i.e. grassetto), e non più di un serif e di un sans-serif per pagina.