Scrivere è comunicare

Il blog per scrittori, blogger e copywriter

Come migliorare la leggibilità di un post

Come migliorare la leggibilità di un post

In 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ù approfonditamente. Si tratta di alcuni accorgimenti che miglioreranno la leggibilità dei post.

Prima di iniziare a scrivere per un blog, dobbiamo pensare che ciò che scriviamo sarà letto. E se vogliamo che i lettori aumentino, dobbiamo fare in modo che riescano a leggere i nostri post senza alcuna difficoltà.

Spaziatura fra paragrafi

Una delle regole della scrittura online è usare i paragrafi anziché mostrare il testo in un unico blocco. Ma non basta separare brani di testo coi paragrafi, occorre anche che fra paragrafo e paragrafo ci sia il giusto spazio.

Io lascio 10 pixel, così il lettore trova dei piccoli blocchi di testo che non spaventano, ma soprattutto consentono di mantenere il segno e non perdersi fra le righe.

Indentatura

L’indentatura si usa nella carta stampata. La prima parola risulta rientrata verso destra a inizio paragrafo. Forse in questo caso è utile perché non esistono spazi tra i paragrafi e il rientro comunica al lettore che sta iniziando un nuovo periodo.

Io la uso anche nei miei testi online, perché credo spezzi ancor più il testo, dando una sorta di apparente movimento contro la staticità dei blocchi simmetrici.

Interlinea

L’interlinea è lo spazio fra riga e riga. Si capisce benissimo che righe troppo vicine rendano quasi incomprensibile il testo, così come righe troppo distanti siano un’esagerazione che rischia di disorientare il lettore.

Non uso sempre lo stesso valore per l’interlinea, perché dipende dal tipo di font che uso e dalla sua grandezza. Occorre quindi fare delle prove fino a trovare il valore che ci sembra più adatto.

Colore del testo e sfondo della pagina

Su questo punto sono molto rigido e categorico: nero su bianco. È la combinazione di massima leggibilità, anche se nelle versioni accessibili di molti siti viene usata la combinazione giallo su nero, ma a me, sinceramente, dà proprio fastidio agli occhi leggere su sfondi neri.

Per questioni di grafica uso anche altre combinazioni, come testo bianco su fondo rosso come nel menu principale o bianco su blu come nella barra laterale, ma si tratta di piccoli elementi della pagina e non del contenuto. Ma anche in quel caso ho usato valori ad alta leggibilità. A questo proposito vi consiglio di fare delle prove con lo strumento Color Contrast Checker.

Colore dei link

Un link è un collegamento fra una pagina e un’altra, rappresenta quindi un invito all’azione per il lettore. Dunque deve essere distinguibile all’interno della pagina. Di solito preferisco il colore blu, classico, che ricorda i primi tempi del web.

Il consiglio è di trovare un colore che sia comunque abbinato alla grafica del sito e che abbia un ottimo contrasto con lo sfondo. Un link deve essere visibile, deve colpire l’occhio del lettore.

Dimensioni e colore dei titoli

I titoli hanno una funzione importante nella pagina, perché definiscono delle aree ben determinate. Il titolo principale deve distinguersi su tutto e avrà una grandezza maggiore rispetto al testo e ai sottotitoli.

Questi avranno anch’essi una grandezza maggiore del testo, ma credo sia preferibile anche un colore differente. Secondo me rende più chiara la funzione del sottotitolo, che è quella di separare i “capitoli” del post.

Spaziatura fra titoli e paragrafi

Abbiamo visto quanto sia preferibile lasciare uno spazio fra i paragrafi. Alla stessa maniera dobbiamo lasciarne fra titolo e paragrafo, con lo spazio maggiore sopra il sottotitolo e non sotto, per rendere più marcata la separazione dei sottoargomenti del post.

Formattazione delle liste

Per le liste, o elenchi puntati, va usata una tipografia che li renda riconoscibili e nettamente distinti dai paragrafi. Vediamo come impostare un elenco non numerato e come strutturare il testo delle voci degli elenchi.

Immagini o punti?

Raramente nei miei siti e blog lascio gli elenchi puntati con i simboli standard, quindi dei classici punti neri, che trovo tristi. Preferisco creare un’icona che sia a tema col mio blog e qui ho scelto una matita blu.

Testo non giustificato

Non ha senso giustificare il testo in un elenco, perché è appunto un elenco, anche se spesso i miei sono corposi. Lasciando il testo allineato a sinistra si rende meglio la differenza fra elenco e paragrafo.

Rientro maggiore rispetto al paragrafo

Accentuo la diversità aumentando il rientro degli elementi della lista. In questo modo si ha quasi l’impressione che sia un elenco appuntato sulla pagina come promemoria.

Spaziatura fra gli elementi di lista

Come per i paragrafi, anche per gli elementi della lista, quindi per le voci dell’elenco, bisogna stabilire un’adeguata spaziatura, affinché siano ben distinguibili uno dall’altro. Io lascio 10 pixel.

Un box per le citazioni

Le citazioni vanno evidenziate nel testo, per creare uno stacco, visto che non rappresentano una creazione dell’autore, ma sono un pensiero, una frase scritti da altri. Io creo un riquadro, con uno sfondo, dei bordi e un’immagine che rappresenta le virgolette.

Anche per le citazioni è bene sempre tenere presente il maggior contrasto possibile fra testo e sfondo.

Mostrare le immagini

Le immagini inserite devono risultare evidenti nella pagina e allo stesso tempo non devono ostacolare la lettura. In genere le alternative sono due:

  1. immagine allineata a sinistra: lascio un margine fra il bordo destro e quello inferiore della figura e il testo, che deve “scorrere” attorno all’immagine. Discorso simile quando inserisco un’immagine a destra, in quel caso lo spazio va lasciato fra il bordo sinistro e il testo.
  2. immagine centrata: l’effetto migliore si ha quando ha la stessa larghezza del paragrafo. Nel mio blog è di 518 pixel e questo valore imposto sulle immagini centrate.

Altri media: video e slide

Video e slide vanno sempre centrati. I video di Youtube, ma credo anche quelli di Vimeo e di altri servizi di video sharing, si possono ingrandire in proporzione, quindi posso impostare tranquillamente i 518 pixel. Le slide di Slide Share, invece, restano con la loro larghezza fissa.

Come si legge il tuo blog?

Guarda attentamente gli articoli che hai scritto: com’è la leggibilità dei tuoi post? Hai trovato qualche difficoltà leggendo i miei articoli?

21 Commenti

  1. Come migliorare la leggibilità di un pos...
    30 settembre 2013 alle 06:50 Rispondi

    […]   […]

  2. MikiMoz
    30 settembre 2013 alle 09:15 Rispondi

    Ciao baby!^^
    Assolutamente mai trovato difficoltà a leggere i tuoi contenuti, per lo meno da quando li leggo! Non so se prima avevi utlizzato altre soluzioni grafiche, ma così mi pare tutto preciso, leggibile e scorrevole.
    Sei anche molto ordinato.

    Io bene o male seguo le cose che hai scritto, ma riconosco di essere spesso fracassone.
    Con la stagione 8 che arriverà, però, sto già progettando un piano di editing più particolare.
    Innanzitutto torna la soluzione “testo a ridimensionamento”, che ho usato fino allo scorso anno e via via abbandonato: ossia il primo paragrafo inizia con frasi di maggiore grandezza di font, fino a ridursi alla misura normale.
    Non so perché, ma mi è sempre piaciuta…

    Moz-

    • Daniele Imperi
      30 settembre 2013 alle 15:03 Rispondi

      Anche prima quelle impostazioni c’erano. Il primo paragrafo a ridimensionamento l’ho visto nel blog di Chris Brogan. Se ti piace, usalo, certo.

      • MikiMoz
        30 settembre 2013 alle 15:31 Rispondi

        Ho visto il blog di Brogan: io ridimensiono in modo un po’ diverso, usando proprio diverse misure fino a che non si arriva alla grandezza standard :)

        Moz-

        • Daniele Imperi
          30 settembre 2013 alle 16:09 Rispondi

          Mmm… sei sicuro che sia leggibile, così?

          • MikiMoz
            30 settembre 2013 alle 16:27

            L’ho usato per un paio di anni, anche qualcosa nel 2013… non mi sembrava troppo difficoltoso da leggere…
            http://mikimoz.blogspot.it/2013/03/chi-mi-ha-accompagnato.html
            considera però che con il tipo di font attuale lo “scalare dalla misura grande alla piccola” quasi si è perso, perché tale font (che a novembre cambio) non prevede il grassetto…

            Moz-

  3. Sara Salvarani
    30 settembre 2013 alle 10:40 Rispondi

    Anche io seguo quasi tutte le tue stesse regole. Non indento i paragrafi però, non mi piace particolarmente, ma sono gusti molto personali.
    In compenso ho assistito recentemente a una strenua difesa di testi (presentazioni nel caso specifico) gialli fosfo su sfondo blu.
    “Perché il blu rilassa e il giallo si legge bene”. O_o

    • Daniele Imperi
      30 settembre 2013 alle 15:04 Rispondi

      L’indentatura infatti è soggettiva, non migliora la leggibilità.

      Giallo fosfo su blu, eh? Potrei provare, dai :D

  4. Attilio Nania
    30 settembre 2013 alle 11:21 Rispondi

    Ho notato che ti manca la sillabazione, a volte nei tuoi testi giustificati c’è troppo spazio tra una parola e l’altra proprio per questo motivo.
    Ad esempio, in questo post, nel paragrafo “Spaziatura fra titoli e paragrafi”, nella penultima riga gli spazi fra le parole sono eccessivi a causa della mancanza di sillabazione.

    • Daniele Imperi
      30 settembre 2013 alle 15:05 Rispondi

      Vero, la giustificazione del testo crea questo problema. Devo capire come si può rendere online la sillabazione del testo, farò una prova, grazie.

  5. Gioia
    30 settembre 2013 alle 11:23 Rispondi

    Se dovessi mettere dei colori a ciò che scrivo, non mi basterebbero 3 paia di occhiali! Nero su bianco, al massimo se vogliamo esagerare un colore pastello molto tenue.
    Penso che anche la grandezza del carattere sia importante. Proprio oggi, mi è capitato di leggere un posto con i caratteri troppo piccoli. Ho usato lo zoom, ma se la pigrizia ha il sopravvento, come spesso capita, chiudo la pagina avendo letto solo il titolo, l’unico leggibile a primo impatto.

    Per tutto il resto credo, che spaziature, punteggiatura, grassetti e corsivi, dipendano molto da ciò che si voglia comunicare. In un certo senso mimano le nostre pause, i nostri momenti di riflessione e i momenti che vogliamo dare al lettore per afferrare il concetto prima di passare alla frase successiva.

    Si cerca, insomma attraverso ogni mezzo concesso da tastiera e monitor, di spiegare sia a parole sia visivamente il nostro concetto.

    • Daniele Imperi
      30 settembre 2013 alle 15:14 Rispondi

      Capita anche a me di trovate blog con testi molto piccoli, ma ne ho trovati anche con testi enormi e mi sembrava un’esagerazione.

  6. Giuliana
    30 settembre 2013 alle 12:17 Rispondi

    Mi piace come imposti immagini, paragrafi ed elenchi sul tuo blog, risulta tutto sempre molto ordinato. Adoro soprattutto le icone a forma di matitina che usi per evidenziare i punti chiave :D
    Anch’io seguo la maggior parte delle regole che hai elencato. Però, anziché scrivere nero su bianco, preferisco un inchiostro grigio molto scuro, che trovo lievemente più rilassante per l’occhio.
    Odio invece l’inchiostro bianco su nero, sia perché mi rende difficoltosa la lettura, sia perché lascia impressa nella retina per un po’ l’immagine della pagina appena letta.

    • Daniele Imperi
      30 settembre 2013 alle 15:15 Rispondi

      Bianco su nero dà fastidio anche a me, non riesco proprio a leggere in quel modo.

  7. Daniele Imperi
    30 settembre 2013 alle 16:46 Rispondi

    MikiMoz

    L’ho usato per un paio di anni, anche qualcosa nel 2013… non mi sembrava troppo difficoltoso da leggere…
    http://mikimoz.blogspot.it/2013/03/chi-mi-ha-accompagnato.html
    considera però che con il tipo di font attuale lo “scalare dalla misura grande alla piccola” quasi si è perso, perché tale font (che a novembre cambio) non prevede il grassetto…

    Moz-

    Io vedo solo 2 grandezze, o sbaglio?
    Come fa a non prevedere il grassetto? Intendi che inserendo il grassetto la differenza col normale non si nota?

    • MikiMoz
      30 settembre 2013 alle 19:27 Rispondi

      Esatto: quel tipo di font che vedi non fa differenza tra grassetto e normale, è come se già tutto fosse in grassetto.
      Ma da novembre la musica cambia, baby! Anzi, ri-cambia :)

      Moz-

  8. 5 pratiche da evitare nel blogging
    24 novembre 2014 alle 05:01 Rispondi

    […] ai lettori testi monoblocco, cementificati in righe e righe tutte appiccicate una all’altra. Migliorare la leggibilità di un articolo è uno dei compiti del blogger, perché fa parte dell’accoglienza e della buona […]

  9. Domenico Biancardi
    12 gennaio 2016 alle 15:27 Rispondi

    Ma quindi non ami il giustificato sul testo? Per una questione di ordine cosmico delle cose io amo il giustificato (sarà la mia cultura latex).

    • Daniele Imperi
      12 gennaio 2016 alle 15:55 Rispondi

      Una volta sì, nei libri mi piace, ma nel web crea problemi, perché puoi trovare righe con parole molto distanti fra loro.

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.