CSS e tipografia

Come giustamente ricordava Sofia Postai, la gente legge il Web, e dunque un buon trattamento tipografico è il segreto di un sito piacevole da leggere e in cui il visitatore ama tornare spesso. In questa sezione affronteremo il dettaglio la tipografia con i CSS, cercando di illustrare alcune tecniche che permettono di ottenere dei buoni risultati a livello di chiarezza testuale.

Tipi di font

Come abbiamo visto in precedenza, esistono cinque famiglie generiche di font:

1. serif
2. sans-serif
3. monospace
4. cursive
5. fantasy

Le famiglie generiche di font vengono specificate come ultima alternativa nella proprietà 'font-family' nel caso in cui l'utente non disponga sul suo computer dei font specificati per primi. Nella pratica del Web, i font più usati appartengono alle prime tre categorie.

I font serif (1) (o "con grazie") sono quei font i cui caratteri presentano dei tratti terminali con rifiniture. Esempi di font serif sono il Times New Roman, il Georgia, il Palatino e il Book Antiqua. Di contro, i font sans-serif (2) (o "senza grazie") sono quei font che presentano dei caratteri con dei tratti terminali netti e senza rifiniture. Esempi di font sans-serif sono l'Arial, l'Helvetica, il Verdana, il Geneva, il Tahoma e il Lucida. I font monospace (3) (o "monospaziati") sono quei font a spaziatura fissa, il cui aspetto ricorda i caratteri usati nei terminali di computer o nella dattilografia. Esempi di font monospace sono il Courier New, l'Andale Mono, il Monaco e il Lucida Console.

Quando si offre una scelta di font, è bene proporre una scelta che comprenda font con caratteri simili. Per esempio:

body {font-family: Georgia, Palatino, serif}
p {font-family: Arial, Helvetica, sans-serif}
code {font-family: "Andale Mono", "Courier New", Courier, monospace}

piuttosto che:

p {font-family: Verdana, Helvetica, Arial, sans-serif}
body {font-family: Georgia, "Times New Roman", Times, serif}

Poichè ogni font ha una grandezza e un tratto di carattere diverso, occorre operare una scelta tra quei font che presentano caratteristiche simili. Per esempio, il Georgia e il Palatino hanno caratteristiche simili, ma non il Georgia ed il Times New Roman, che si differenziano soprattutto nella grandezza dei caratteri. La stessa cosa si può dire per il Verdana e l'Arial: il primo presenta dei caratteri molto larghi, mentre il secondo tende ad avere caratteri più slanciati. In questo senso sono più simili tra loro il Verdana ed il Geneva, o il Tahoma e il Verdana. Offrire una vasta scelta di caratteri è sempre una cosa raccomandata, ma questi caratteri devono essere selezionati con un criterio basato su una similitudine esistente, per quanto limitata ed imperfetta.

Scelta del tipo di font

La scelta del tipo di font si basa sul criterio della leggibilità. Questo criterio è relativo all'accessibilità della pagina e alla sua fruibilità. Secondo questo criterio, occorre usare dei font sans-serif per il corpo del testo, in quanto sullo schermo i font sans-serif risultano di più facile lettura. Questo è indubbiamente vero, ma occorre anche tener presente le particolari esigenze di layout. Si ponga il caso in cui dobbiamo realizzare una pagina che emuli l'aspetto di una testata giornalistica. In questo caso per restare fedeli allo spirito del layout originale dovremo usare dei font serif. La leggibilità sarà pregiudicata? In linea di massima no, in quanto la leggibilità del testo delle pagine web dipende anche da altri fattori, quali:

• l'interlinea (proprietà 'line-height')
• la spaziatura tra le lettere e le parole (proprietà 'letter-spacing' e 'word-spacing')
• la spaziatura tra i blocchi di testo (proprietà 'margin' e 'padding')
• la lunghezza dei blocchi di testo
• allineamento del testo (proprietà 'text-align')

In genere una soluzione di compromesso consiste nell'utilizzare i font sans-serif per il corpo principale del testo, e i font serif per i titoli. Ma nulla vieta di effettuare l'operazione inversa, a patto di scegliere con cura il tipo di font. Per esempio, tra il font Georgia ed il Times New Roman sceglierrò il Georgia, in quanto a parità di dimensioni ('font-size') il primo appare più grande del secondo, in quanto i suoi caratteri hanno misure maggiori.

Dimensione dei font

L'importanza della dimensione dei font è sempre in relazione alle nostre esigenze di layout. Di norma, sullo schermo le dimensioni dei font dovrebbero essere sempre espresse usando unità relative e non assolute (em, percentuali). I pixel costituiscono un caso a parte, in quanto sono ridimensionabili su tutti i browser eccetto Internet Explorer Windows. Quindi la scelta cade giocoforza su em e percentuali. La ridimensionabilità dei font è un aspetto importante del design con i CSS: solo garantendo una totale scalabilità al nostro layout possiamo venire incontro alle esigenze dei vari utenti.

Secondo alcuni, per garantire una buona leggibilità la dimensione dei font non dovrebbe mai essere inferiore al 100%/1em nelle pagine web, il che, tradotto in pixel, equivale a circa 16px. Questo principio tuttavia non tiene conto delle reali esigenze di layout: infatti, se è vero che in un layout a tutta pagina il valore 100%/1em/16px può andare bene, lo stesso non si può dire in un contenitore largo il 50% della pagina, in cui un font di quella dimensione apparirebbe senza dubbio sproporzionato.

Si potrebbe essere tentati di usare le parole chiave assolute e relative ('xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'larger', 'smaller'), ma queste vengono interpretate in maniera diversa dai browser i quali, purtroppo, usano un fattore di scalamento diverso da browser a browser.

Quindi la scelta si restringe ad em e percentuali. Gli em non dovrebbero mai essere usati per impostare la dimensione del font sull'elemento html o body, in quanto in Internet Explorer 6 Windows si verificherebbero dei ridimensionamenti fuori controllo, esageratamente grandi o piccoli.

Usando le percentuali per impostare la dimensione del font per la pagina ci imbattiamo nuovamente nel problema del diverso fattore di scalamento usato dai browser. Se per esempio volessimo impostare una percentuale che sia equivalente al valore 12px, in teoria dovremmo procedere alla soluzione di una proporzione il cui risultato non sarebbe uniforme tra i vari browser. Owen Briggs, sviluppatore attivo da molti anni, sul suo sito The Noodle Incident ha dedicato un'intera sezione allo studio del dimensionamento dei font con i CSS. I risultati sono confluiti in questo template da cui risulta che tutti i browser interpretano il valore 76% per l'elemento body in modo uniforme. In altre parole, Owen ha scoperto che questo valore costituisce il punto d'accordo su cui basare un'implementazione cross-browser delle dimensioni dei font. Esempio:

body {font: 76%/1.5 Verdana, Geneva, sans-serif}

h1 {font-size: 2em}
h2 {font-size: 1.6em}
h3 {font-size: 1.4em}
h4 {font-size: 1.2em}

#contenitore {font-size: 1.1em}

Se invece volessimo usare un approccio diverso, ossia partendo dal valore 100% per poi usare un valore inferiore sul corpo principale della nostra pagina, dobbiamo tenere presente il diverso fattore di scalamento usato dai browser. Per esempio, se volessimo dare al nostro contenitore il valore 80%, noteremo una visualizzazione simile in Firefox ed Internet Explorer, ma non in Opera, in cui il font risulterebbe leggermente più piccolo. Per ovviare a questa situazione occorre dare alla misura iniziale un valore leggermente superiore a 100% per compensare il fattore di scalamento diverso. Esempio:

body {font-size: <strong>100.01%</strong>}

#contenitore {font-size: 80%}

Interlinea

L'interlinea, gestita dalla proprietà 'line-height', garantisce la spaziatura tra le righe necessaria ad una lettura confortevole. Questa proprietà accetta valori di lunghezza, percentuali e valori interi. In particolare l'ultimo tipo di valori, proprio perchè indipendente da un unità di misura, si rivela particolarmente indicato alla gestione dell'interlinea. Esempio:

body {font-size: 76%; line-height: 1.5}

In questo caso l'interlinea sarà uguale ad una volta e mezzo il valore di 'font-size'. Anche se avessimo specificato un valore in pixel (per esempio 12px) il risultato sarebbe stato lo stesso. In genere un valore accettabile per la proprietà 'line-height' è di circa 1.5/1.6. Il valore 'normal' (predefinito) garantisce una leggibilità discreta, ma può non essere adatto se la dimensione e il tipo di font sono tali da ridurre lo spazio tra le righe.

Spaziatura tra le lettere e le parole

La spaziatura tra le lettere e le parole, gestita rispettivamente dalle proprietà 'letter-spacing' e 'word-spacing', aumenta il grado di leggibilità delle nostre pagine, oltre a fornire un preciso controllo all'interno e fuori dalle parole. I font, a parte quelli monospaziati, tendono ad avere una spaziatura tra le lettere che dipende dall'ampiezza e dalla forma dei singoli caratteri. Un font come il Tahoma, ad esempio, presenta dei caratteri più ravvicinati rispetto al Verdana, e questo a volte può creare dei problemi, specie se i blocchi di testo sono ravvicinati e le righe sono molto lunghe. Per ovviare al problema possiamo usare la proprietà 'letter-spacing':

p {font-family: Tahoma, sans-serif; letter-spacing: .1em}

Il valore .1em presenta l'indubbio vantaggio di essere scalabile, in quanto si tratta di una misura relativa. I valori delle proprietà sopra indicate possono essere negativi, e questo può essere usato per creare un effetto tipografico particolare che si rivela molto utile nella formattazione dei titoli. Esempio:

h2 {
font: bold 1.6em/0.95 Arial, sans-serif;
color: #33bd00;
background: #fff;
letter-spacing: -2px;
}

Sui titoli i valori negativi sono utili, ma ovviamente non lo sono assolutamente sui normali blocchi di testo, in cui pregiudicherebbero la leggibilità del testo, in quanto in genere i titoli non si estendono su più righe come i blocchi di testo.

Allineamento del testo

Come sappiamo, la proprietà 'text-align' accetta quattro valori: 'left' (testo allineato a sinistra), 'right' (testo allineato a destra), 'center' (testo centrato) e 'justify' (testo giustificato). Nella pratica del Web, il criterio della leggibilità sopra menzionato prevede che il testo sia sempre allineato a sinistra per il corpo principale o al limite centrato per i titoli. Il testo giustificato viene apertamente sconsigliato, in quanto dipende da un calcolo arbitrario eseguito dal browser che aggiunge spazi bianchi tra le parole. Ancora una volta, tuttavia, questo criterio si scontra con le esigenze particolari di layout, che a volte possono esigere l'uso di testo giustificato. Occorre fare un ragionamento teorico: il browser aggiungerà degli spazi bianchi in modo arbitrario solo se non vi sono altre dichiarazioni che regolino il sopracitatto spazio tra le le lettere e le parole. Ma, come sappiamo, possiamo forzare il browser a non usare un criterio arbitrario utilizzando la proprietà 'letter-spacing'. Per esempio:

p {
text-align: justify; 
letter-spacing: .1em; 
margin: 1em 10%; 
font: 80%/1.6 Verdana, sans-serif;
}

Grazie alla proprietà 'letter-spacing' riusciamo ad addomesticare la giustificazione del testo, rendendola leggibile. Il valore .1em serve a garantire il funzionamento della spaziatura anche aumentando la dimensione del font. Inoltre, come detto in precedenza, per ottenere una buona leggibilità sono necessarie anche un'adeguata interlinea (1.6) ed una giusta marginazione (1em 10%). Nel caso del testo giustificato, occorre sempre calcolare la larghezza del blocco di testo e regolarla per vedere i risultati anche a risoluzioni di schermo maggiori o minori. L'uso di unità relative ci permette di ottenere un'ottima flessibilità, altrimenti difficilmente raggiungibile.

Blocchi di testo

Normalmente i titoli ed i paragrafi sono separati dalla marginazione verticale, ed in questo modo risulta semplice separare i vari atomi di lettura. In genere, per venire incontro alle esigenze degli utenti con problemi nella lettura, si è stabilito che la lunghezza massima di un paragrafo non possa superare le dieci righe e che le righe non debbano a loro volta essere eccessivamente lunghe. Tuttavia, come si è visto, a volte le esigenze di particolari tipi di layout ci impongono una modifica alla norma.

Si supponga ad esempio di dover ricreare l'effetto tipografico di un libro. Nei libri spesso i paragrafi sono separati tra loro solo dall'indentazione della prima riga di testo, e questo è un effetto che possiamo ricreare tramite la proprietà 'text-indent'. Inoltre i libri spesso non presentano una marginazione verticale tra i titoli ed i paragrafi, ma si viene a formare un flusso continuo di lettura interrotto solo dagli spazi bianchi della pagina in alto ed in basso. Detto questo, possiamo abbozzare una prima struttura (X)HTML:

<div class="blocco">
  <h2>Titolo</h2>
  <p>...</p>
</div>

Quindi passiamo ad applicare gli stili CSS:

body {
background: #fff; 
color: #000; 
font: 100%/1.5 Georgia, serif;  
margin: 1em 0; 
padding: 0; 
}
h2, p {margin: 0;}

div.blocco {
margin: 0 10% 1em 10%; 
padding-bottom: 1em; 
border-bottom: 2px outset #ccc;
}

h2 {
font: 1.4em/1 "Times New Roman", Times, serif; 
color: #666; 
background: transparent; 
padding-left: 0.5em;
border-left: 0.5em solid; 
}
p {
text-indent: 1.5em; 
letter-spacing: .1em; 
background: url("bull.gif") no-repeat 0 0.45em; 
}
p:first-letter {
font-weight: bold; 
line-height: 1; 
color: #800; 
background: transparent;
}

Azzeriamo subito i margini delle intestazioni e dei paragrafi. Quindi creiamo il blocco contenitore delle singole sezioni testuali assegnandogli un selettore di classe (.blocco). Diamo alla classe appena creata un posizionamento centrale impostando i margini orizzontali sullo stesso valore (10%). Il bordo inferiore della classe, separato dal testo tramite padding inferiore, serve da separatore visuale tra le sezioni, evitando così l'uso di un elemento hr, il cui aspetto è stato ricreato tramite la dichiarazione border-bottom: 2px outset #ccc. Alle intestazioni delle singole sezioni assegniamo un bordo sinistro per differenziarle nettamente dal resto del testo. Quindi passiamo alla formattazione dei paragrafi.

Per migliorare la leggibilità, oltre all'interlinea, all'indentazione del testo e alla spaziatura tra le lettere, abbiamo assegnato uno stile alla prima lettera dei paragrafi tramite lo pseudo-elemento :first-letter. Purtroppo questa soluzione non funzionerà in Internet Explorer 5 Windows, che non supporta tale pseudo-elemento. Per ovviare al problema abbiamo inserito un'immagine di sfondo sulla prima riga del paragrafo che simula l'effetto di un marcatore. Questa soluzione permette una più facile identificazione dell'inizio di un nuovo paragrafo ed è compatibile anche con Explorer 6 Windows.

Titoli (o intestazioni)

I titoli rappresentano un punto cruciale in una pagina web. Sono tra le prime cose che vengono viste da un lettore, che poi assocerà il titolo con il resto del contenuto. Gli esperti di usabilità e di architettura dell'informazione definiscono i titoli come una sorta di etichette del contenuto, e per questo motivo consigliano la massima chiarezza, contestualizzazione, coerenza e concisione possibili. Noi tratteremo i titoli solo sotto l'aspetto tipografico, ma a titolo informativo ricorderemo che:

• I titoli devono essere autoesplicativi, ossia devono chiarire subito la natura del contenuto che seguirà, senza con questo spiegare tutto. Devono insomma invogliare alla lettura, senza fuorviare l'utente.

• I titoli non dovrebbero essere troppo lunghi e difficili da memorizzare.

Ai CSS spetta il compito di rendere i titoli più attraenti da un punto di vista grafico, restando fedeli al loro compito, che è quello di definire la presentazione di una pagina Web. Negli esempi che seguono useremo un elemento h2, ma le regole di stile si possono applicare a tutte le intestazioni (X)HTML:

h2.vecchiostile {
font: bold small-caps 1.8em/0.9 Georgia, serif; 
color: #525259;  
background: #ffffe6; 
border-top: 6px solid #999; 
padding: 2px 0 2px  0; 
border-bottom: 1px solid #ccc;
letter-spacing: .1em;
}

Questo stile può essere applicato a quei titoli che ricordano le vecchie pubblicazioni cartacee. Lo sfondo e i bordi superiore ed inferiore emulano le decorazioni testuali di alcuni quotidiani. Da notare la proprietà 'font-variant' impostata su 'small-caps' per simulare un maiuscoletto che, purtroppo, non è pienamente supportato da Internet Explorer Windows. L'interlinea è ridotta, in quanto i titoli in genere non si estendono su più di una riga. Importante invece la spaziatura tra lettere, pari a 0.1em.