La tipografia – Scrittura per il web #7

La tipografia

Nella scrittura per il web bisogna tenere presente anche la “grafica del testo”, ossia la sua presentazione grafica, che ne influenza la lettura e la comprensione. Di solito, chi realizza un sito o apre un blog pensa a curare la grafica della struttura, del sito o blog quindi. Ma anche quella del testo va pensata.

Un testo è racchiuso all’interno di una struttura e dovrà adattarsi a questa. Soprattutto dovrà essere leggibile e comprensibile nella struttura in cui è contenuto.

In questo articolo si parla di stili tipografici del testo. La tipografia di una pagina web prevede la presentazione grafica dei vari elementi che compongono la pagina, affinché l’intero testo risulti non solo leggibile, ma anche efficace.

Anatomia di una pagina web

Occorre innanzitutto individuare le parti che compongono una pagina web. Un testo per il web non deve essere visto come un blocco uniforme di parole, come può capitare in una rivista cartacea. Ma anche in questo caso – se la rivista è impaginata da professionisti – il testo sarà curato adeguatamente.

“Anatomicamente” una pagina web è composta da un titolo – che avete già imparato a scrivere (vero?) – e da un certo numero di paragrafi. I paragrafi sono costituiti da un insieme di parole, fra le quali possiamo trovare dei link. Alcuni testi contengono anche degli elenchi.

Individuate queste parti, questi elementi, si dovrà assegnare a ognuna di esse delle precise caratteristiche grafiche, in funzione del ruolo che hanno, affinché non solo i vari elementi siano riconoscibili nella pagina, ma risultino anche leggibili.

Titolo della pagina

Il titolo della pagina va rappresentato con una grandezza di carattere maggiore del testo dei paragrafi, sia perché ha un’importanza rilevante all’interno della pagina stessa, sia perché sia riconoscibile. Anche la scelta del colore va curata, per rendere più evidente lo stacco col resto dello scritto.

Per i sottotitoli va fatto lo stesso discorso. Avranno una grandezza minore del titolo, ma maggiore del testo. Potranno anche avere un colore differente dal titolo principale.

Paragrafi e caratteri

I paragrafi sono dei semplici contenitori di testo, che racchiudono uno o più periodi. Graficamente c’è poco da dire sui paragrafi, di cui parleremo approfonditamente nel prossimo articolo, dedicato all’impaginazione.

Tenete presente soprattutto il tipo di carattere da usare per i vostri testi. Non ha importanza quello che usate quando scrivete in locale. Ma quando dovete riportare quel testo nel web, allora dovrete considerarne la leggibilità.

Usate caratteri standard, come Times New Roman o Verdana, i più comuni. Non ricercate font particolari che potrebbero risultare di difficile lettura, come per esempio un carattere gotico.

Curate anche la spaziatura e l’interlinea, perché renderanno il testo più presentabile, leggibile, accattivante. La spaziatura è lo spazio bianco, vuoto, fra un carattere e l’altro, mentre l’interlinea è lo spazio compreso fra due righe. Due elementi che possono influenzare la lettura di una pagina web.

Il colore del testo

Che colore dare al testo di una pagina web? La leggibilità maggiore, il contrasto migliore quindi, è il classico nero su bianco. Mi è capitato di vedere siti che avevano un colore di fondo per la pagina bianco e un testo grigio medio. Risultato: si leggeva a fatica.

State scrivendo per il web – occorre sempre ricordarlo – e i vostri testi saranno letti in poco tempo e velocemente anche. Nessuno resta per mezz’ora su una stessa pagina web. Date quindi al lettore la possibilità di leggere chiaramente i vostri testi.

Il colore dei link

Un link è un collegamento a un’altra pagina web, interna o esterna al sito, quindi è una risorsa per i lettori. Ne consegue che sia un elemento importante in una pagina.

I link all’interno della pagina web vanno evidenziati rispetto al testo. Per evidenziarli non c’è che un modo: renderli con un colore differente da quello del testo. Il colore del link deve anche adattarsi alle tendenze cromatiche del sito, ma fate sempre in modo che sia un colore in contrasto netto con il bianco della pagina.

Io sconsiglierei la sottolineatura, perché risulta troppo attaccata al testo e non facilita la lettura. Può apparire sottolineato al passaggio del mouse, ma in quel caso il lettore ha già potuto leggere la parola o frase linkata.

Conclusione

L’aspetto grafico di una pagina web è quindi rilevante e non deve essere sottovalutato. Il testo deve essere presentato in modo leggibile e non con un aspetto trascurato.

Non è necessario essere dei grafici creativi, ma semplicemente coscienti del fatto che una pagina web va letta di fretta il più delle volte. Valutate quindi colori e aspetto che abbiano il giusto contrasto e rendano facile e veloce la lettura.

13 Commenti

  1. Romina
    martedì, 1 Novembre 2011 alle 14:05 Rispondi

    Ops… il mio blog ha lo sfondo colorato!!! Però devo ammettere che ho fatto dei progressi: all’inizio scrivevo in grigio su giallo e con caratteri molto articolati! I commenti però sono rimasti ancora poco leggibili per dei problemi grafici che prima o poi dovrò risolvere! Per il resto, cercherò di seguire i tuoi consigli (ma non so se riuscirò ad abbandonare il mio sfondo!!!).

  2. Daniele Imperi
    martedì, 1 Novembre 2011 alle 20:58 Rispondi

    Lo sfondo va bene, l’importante è che non ci sia il testo sopra, e sul tuo blog non c’è. Il problema del tuo blog sono infatti i commenti :P

    Devi cercare nel foglio di stile la regola chiamata “comment-body” e modificare il carattere :)

  3. Romina
    martedì, 1 Novembre 2011 alle 23:12 Rispondi

    @Daniele: Lo so, so che devo sistemare… magari in nottata risolvo! Fortunatamente posso tenermi il mio sfondo! Grazie!

  4. Enrico
    mercoledì, 2 Novembre 2011 alle 12:39 Rispondi

    La spaziatura e l’interlinea di questo blog è molto buona, infatti riesco a leggere e rileggere gli articoli di questo corso senza stancarmi. Su di una cosa non sono totalmente d’accordo ed è a riguardo dei link. Io credo che invece sia meglio sottolinearli e in tal caso con il colore blu. Se ci fosse negli articoli di questo blog, non credo creerebbe molta difficoltà di lettura (per i motivi citati prima). Userei la classica convenzione per i link perché penso che le numerose persone che frequentano il web, come potrebbero essere i miei inesperti genitori, sono abituati a vedere un link, di cui ignorano il significato, sottolineato in blu e una volta eseguito in viola. Quindi diciamo solo per convenzione, uso comune e per renderlo più comprensibile anche ai meno esperti del mondo web. Spero che questa “critica” sia costruttiva, d’altronde sono qui per imparare come tanti altri :)

  5. Daniele Imperi
    mercoledì, 2 Novembre 2011 alle 21:00 Rispondi

    @Lisa: ma come non ha capito una mazza? :D
    Il contrasto sembra essere a posto (puoi controllarlo con questo strumento: http://www.colorsontheweb.com/colorcontrast.asp). Però si tratta si uno sfondo grigio opacizzato e talvolta il testo finisce sulla foto di fondo.

    Ricorda – e ricordino tutti gli altri – che la leggibilità migliore è nero su bianco. Poi ognuno decide di farsi il sito come vuole :)

  6. Lisa Corradini
    mercoledì, 2 Novembre 2011 alle 20:29 Rispondi

    Ciao Daniele,

    lezione davvero interessante. Quindi dovrei cambiare l’impostazione del mio blog; lo sfondo è quello di una stanza ma tra il testo e lo sfondo c’è una velatura grigia.
    Ci sono affezionata a quello sfondo, mi sembra di entrare in una casa.
    Se ti va di darmi un parere ilrifugiodeicalzinispaiati.blogspot.com

    Lo so, lo so mi avevi consigliato word press ma dopo essermi scaricata la guida on line non ci ho capito una mazza!!!
    Grazie

  7. Lisa Corradini
    giovedì, 3 Novembre 2011 alle 15:27 Rispondi

    @Daniele: in realtà la guida di word press è chiara; sono io che vedendo tutti quei codici da personalizzare ho perso la pazienza. Una dote che ultimamente mi manca.

    Grazie per lo strumento analizza-contrasto.

    p.s. ti ho inserito nel mio blogroll e anche se ancora non ho molte visite per farti pubblicità, apprezzo molto il tuo blog.

  8. Daniele Imperi
    giovedì, 3 Novembre 2011 alle 15:36 Rispondi

    Grazie mille, Lisa :)

    Per WP: piano piano provaci a installarlo.

  9. Romina
    venerdì, 4 Novembre 2011 alle 0:54 Rispondi

    Dopo i commenti, ti ricordi che mi erano rimaste le schede da sistemare? Bene… io ci ho provato, ma quel grigio non si toglie… allora ho provato a risolvere con il colore del testo, cercando di aumentare il contrasto! Non sono ancora pienamente soddisfatta, ma, per ora, lascio così.
    Questa lezione è stata molto produttiva: mi ha fatto fare le “pulizie d’autunno” al blog!

  10. L’impaginazione – Scrittura per il web #8
    martedì, 8 Novembre 2011 alle 4:02 Rispondi

    […] poiché migliora sia la lettura sia la comprensione del testo stesso – e che abbiamo chiamato tipografia – l’impaginazione di un testo ha la funzione di organizzare e strutturare il […]

  11. Evitare gli errori – Scrittura per il web #10
    martedì, 22 Novembre 2011 alle 4:02 Rispondi

    […] nella tipografia e nell’impaginazione dei testi: causati da eccessiva creatività, poca attitudine alla […]

  12. Il meglio di Penna blu – Novembre 2011
    giovedì, 1 Dicembre 2011 alle 5:04 Rispondi

    […] a leggere La tipografia – Scrittura per il web […]

  13. Come migliorare la leggibilità di un post
    lunedì, 30 Settembre 2013 alle 5:01 Rispondi

    […] questo articolo non si parla di regole della scrittura online, ma di tipografia, argomento che ho affrontato nel corso di scrittura per il web, anche se ora ne parlo più […]

Lasciami la tua opinione

Nome e email devono essere reali. Se usi un nickname, dall'email o dal sito si deve risalire al nome. Commenti anonimi non saranno approvati.