Nonostante larga consenta la diffusione di contenuti audio/video, il Web continua (per fortuna!!!, la televisione esiste già) ad essere un medium principalmente fondato sul testo. Dunque, che il vostro sito sia più o meno ricco di contenuti testuali, un'efficace gestione del testo può avere un impatto decisivo.
In questo articolo guarderemo al testo dal punto di vista tipografico e lo faremo con una specie di gioco. Nella sua Guida all'usabilità pubblicata su HTML.it, Emanuela Gugnelli affronta in uno dei capitoli finali l'argomento "Scrivere per il web". Si tratta di una semplice serie di consigli su come approntare testi leggibili e usabili. Ciò che faremo sarà riprendere le 10 regole e vedere come i CSS possono aiutarci a metterle in pratica, rivelandosi nel compito uno strumento ben più potente ed efficace del semplice HTML.
1. Controllare sintassi e grammatica
Mmmmhhh... Mi sa che su questo i CSS non possono aiutarvi. Andiamo avanti.
2. Rendere il testo "percorribile con lo sguardo"
Ricordiamo un fatto: HTML è un linguaggio nato per definire la struttura di un documento. A cosa servono, infatti, i tag <h1>, <h2>? La h sta per "heading", titolo, intestazione. E allora usiamoli per creare una struttura intelligente di titoli e sottotitoli per una migliore leggibilità.
I CSS ci consentono di personalizzare tutte le proprietà di questi elementi: aspetto dei font, dimensioni, colore. Nell'esempio proposto siamo intervenuti anche sui margini, per "compattare" la sezione dei titoli e separarla dal paragrafo con uno spazio bianco di respiro. Un uso accorto dei tag heading rende anche superfluo quello del grassetto per evidenziare i titoli. Limitiamo quest'ultimo alla formattazione di parole all'interno di paragrafi e lunghe porzioni di testo.
3. Separare il testo
È uno dei punti cruciali. La regola suggerisce: "Ci sono due modi di separare il testo, spaziare o indentare". Entrambe le cose possono essere facilmente realizzate con i CSS.
Per spaziare elementi strutturali (titoli, sottotitoli, paragrafi o blocchi più ampi) si usa la proprietà margin. Essa può essere applicata a tutti i lati del blocco o ai singoli lati. Se scriviamo:
p { margin: 10px; }applichiamo un margine di 10 pixel in alto e in basso, a destra e a sinistra. Per applicare solo un margine inferiore mi basterà usare questa regola:
p { margin-bottom: 10px; }A questo riguardo, tenete presente che, se correttamente implementata, la definizione di margini superiori e inferiori subisce il cosiddeto "collasso". In pratica, se definisco questa regola:
p {margin-top: 10px; margin-bottom: 15 px; }
due paragrafi adiacenti non saranno separati da 25 pixel di spazio bianco, ma solo da 15. Se volete quindi definire un margine di 25 pixel, non fate questo tipo di somma, ma usate la giusta misura.
L'ampiezza del margine può essere espressa ovviamente con tutte le unità di misura, assolute e relative, usate nei CSS. Nell'esempio è evidente come la spaziatura tra i due paragrafi renda il testo più leggibile e chiaro.
Passando all'indentazione, essa si definisce nei CSS con la proprietà text-indent, che definisce la distanza dal bordo per la prima riga di un blocco di testo. Può essere espressa con tutte le unità di misura. Personalmente, e dall'esempio dovrebbe risultare chiaro, ritengo che l'indentazione non sia un mezzo molto efficace su schermo, soprattutto se, come è giusto, non si usa la giustificazione.
In effetti, se si osserva l'esempio successivo, giustificando il testo l'indentazione si rivela più efficace ed elegante. Ma torneremo sull'allineamento del testo più avanti.
Finora abbiamo parlato della separazione tra blocchi di testo o elementi strutturali. Con i CSS possiamo però intervenire (finalmente) anche sullo spazio tra le righe di un paragrafo. La proprietà che ci consente di settare l'interlinea è line-height. Semplice da comprendere e applicare (vedi l'esempio), va incontro a una serie di problemi dipendenti dall'unità di misura adottata. Personalmente uso con successo e senza particolari problemi gli ems.
4. Allineamento del testo
La proprietà text-align consente di modificare l'allineamento per qualunque blocco di testo. I possibili valori sono quelli classici, presenti in qualunque word processor: left, center, right, justify. Se allineate sempre a sinistra non dovrete nemmeno preoccuparvi di questa proprietà: left è infatti l'impostazione di default.
Abbiamo visto nell'esempio precedente come si può impostare la giustificazione del testo. È una cosa che spesso facciamo nei documenti destinati alla stampa e che compare in tutti i libri stampati e nei giornali. Perchè non usarla anche nelle nostre pagine, magari con l'aiuto dei CSS? La risposta che leggerete nelle guide sull'usabilità è: il testo giustificato "stanca". La risposta di chi usa i CSS è: la giustificazione è difficile da implementare. Per due motivi:
- quando si giustifica il testo viene forzato in modo tale che tutte le righe abbiano la stessa lunghezza. Per fare ciò i vari browser operano sullo spazio tra le parole o tra le lettere, allungando e accorciando secondo le necessità. Visto che i comportamenti dei browser sono diversissimi, l'uso della giustificazione può trasformarsi in risultati molto lontani dalle proprie aspettative.
- i CSS non gestiscono l'andata a capo. La soluzione del problema precedente potrebbe essere una corretta applicazione di questo processo. Invece di stiracchiare le parole, quando è il momento tronco la parola e vado a capo. Con i CSS ciò non è possibile, soprattutto per la difficoltà di creare un meccanismo che si adatti alle regole delle varie lingue. Dunque, per blocchi di testo ampi, l'allineamento a sinistra è quasi obbligato.
5. Ampiezza delle righe
Insieme alla spaziatura è l'elemento più importante per offrire un testo chiaro e leggibile. Una pagina in cui il flusso del testo scorre da un lato all'altro del monitor risulta effettivamente di difficile lettura, senza parlare dell'effetto estetico. È quindi fondamentale far respirare il testo creando intorno ad esso spazi vuoti. Come si fa? Vi suggeriamo un paio di metodi.
- Usare i margini. Con un uso appropriato dei margini si può ottenere questo risultato. Nell'esempio, notate, i margini destro e sinistro sono calcolati in percentuale. Ciò garantisce fluidità e previene i problemi derivanti dalla diversità di risoluzione. Provate a ridimensionare la finestra o a passare ad un'altra risoluzione: i margini saranno sempre del 25%. La percentuale, come sempre nei CSS, è relativa all'elemento parent. In pratica, se applicate la regola ad un paragrafo inserito in una cella di 200 pixel, il margine sinistro sarà di 50 pixel (25% di 200). Chiaro?
- Usare la proprietà width. Se volete la precisione assoluta potete accoppiare alla definizione dei margini l'uso della proprietà width, tramite cui è possibile settare la larghezza di un blocco (vedi esempio).
6. Non esagerare con lo scrolling
Questione annosa: quanto testo è bene mettere in una pagina? A voi la scelta. Qui i CSS non possono aiutarvi.
7. I colori per il testo
Il colore del testo è espresso tramite la proprietà color. La scelta è discrezionale, ma valutate sempre la combinazione colore testo/colore sfondo. E soprattutto badate alla resa dei colori dei link (cfr. Articolo «Più CSS in una stessa pagina»).
8. Scrivere per tutti
Vedi punto 1.
9. Caratteri
La guida di Emanuela Gugnelli suggerisce l'uso di due font: Verdana e Georgia, perchè presenti su tutte le piattaforme. Oggi questo suggerimento può essere disatteso grazie ai Web Fonts
>> Leggi come usare i Web Fonts con @font-face
Quando si definisce il font nei CSS è però opportuno usare la cosiddetta font-family. Si tratta di specificare un gruppo di caratteri, di cui il primo è quello base, mentre gli altri sono, diciamo così di scorta, nel caso il primo non fosse presente sul sistema dell'utente.
Oltre ai caratteri specifici è buona norma specificare alla fine della dichiarazione una famiglia generica. In questo modo, se nessuno dei font specificati viene rintracciato, il browser ricorrerà al primo font disponibile per quella famiglia. Ecco un esempio di font family:
p { font-family: Verdana, Arial, Helvetica, sans-serif; }Sugli aspetti, fondamentali, relativi alla dimensione dei font si veda l'articolo «Stabilire le dimensioni dei font in un CSS: vantaggi, problemi e soluzioni».
10. Evitare le parole scritte in maiuscolo
Nulla da eccepire. Ma se qualche volta è necessario mettere in maiuscolo una porzione di testo? E magari avete scitto in minuscolo? No problem. Ci sono i CSS. La proprietà text-transform agisce sul testo modificandone l'aspetto relativamente a tre aspetti:
| Aspetto | Trasformazione |
|---|---|
lowercase |
tutto in minuscole |
uppercase |
tutto in maiuscole |
capitalize |
trasforma in maiuscola la prima lettera di ogni parola |
Anche per questo punto potete vedere l'esempio allegato.
