Lunghezza ideale per una riga di contenuto
Traduzione dell'articolo originale "Ideal line length for content" di Russ Weakley.
15 Novembre 2008
Esiste una lunghezza ideale per una riga di contenuto?
Riprendendo un passaggio da “Web Style Guide – Principi di base per creare siti web”:
La lunghezza ideale per una riga di testo è indicata dalla fisiologia dell’occhio umano… Ad una distanza di lettura normale l’arco del campo visivo è ampio soltanto pochi centimetri – circa la larghezza di una colonna di testo ben disegnata, o circa 12 parole per riga. Alcune ricerche dimostrano che la lettura si fa più difficoltosa quando la lunghezza inizia a superare la larghezza ideale, in quanto il lettore inizia ad utilizzare i muscoli dell’occhio e del collo per passare dalla fine di una riga all’inizio della successiva. Se l’occhio deve attraversare una grande distanza sulla pagina, il lettore può perdersi facilmente e deve ricercare l’inizio della riga successiva. Alcuni studi quantitativi mostrano che una lunghezza moderata delle righe aumenta la leggibilità del testo.
Web Style Guide - Basic Design Principles for Creating Website
Patrick J. Lynch e Sarah Horton
2a edizione, pagina 97.
La sfida
Vorrei disegnare un sito che utilizzi una lunghezza ottimale per le righe. Vorrei anche che la lunghezza delle righe rimanga ottimale indipendentemente dalla dimensione del font impostata dall’utente nel proprio browser. E’ possibile?
Metodi per impostare la struttara di un sito web
Molti siti web dispongono il testo utilizzando o una larghezza fissa (impostata con una misura assoluta) o con una larghezza flessibile (impostata con una percentuale dello schermo, che varia al variare delle dimensioni della finestra del browser). Entrambi questi metodi hanno problemi quando la lunghezza delle righe deve fare i conti con dimensioni dei font diverse da quelle di default.
Colonne con dimensioni fisse possono essere utilizzate se gli utenti utilizzano fonts con i valori di default dei browsers. Un esempio potrebbe essere una colonna larga 420 pixels. Questa potrebbe essere una lunghezza ideale per gli utenti che hanno impostato i fonts ad una dimensione di 14-16px, ma risulterebbe tutt’altro che ideale se utilizzassero fonts più grandi o più piccoli. I pixels sono misure assolute che non prendono in considerazione le dimensioni dei font.
Anche colonne con dimensione flessibile hanno i loro problemi. Non potete controllare la finestra del browser degli utenti, quindi la larghezza delle colonne può variare notevolmente da utente ad utente. Spesso questa è prospettata come una soluzione ottimale, visto che l’utente ha pieno controllo sulla dimensione del proprio browser e quindi ha la possibilità di decidere da solo la lunghezza delle righe con la quale si trova a proprio agio. Ma ci sono due problemi con questo approccio.
Il primo problema consiste nel dover continuamente variare le dimensioni della finestra del browser ogni volta che si passa da un sito ad un altro. Sebbene possa sembra un problema banale con il tempo potrebbe diventare veramente fastidioso. E poi perché un utente dovrebbe modificare la dimensione delle proprie finestre per vedere un sito?
Il secondo problema consiste nel conferire responsabilità all’utente. Alcuni utenti non sanno che possono modificare la finestra del proprio browser, e potrebbero pensare che devono leggere lunghe righe di testo. Tutto ciò è lontano dall’essere ideale.
Una soluzione
La soluzione potrebbe essere quella di impostare la larghezza delle colonne utilizzando gli em. Per capire perché gli em possono creare una larghezza di riga ideale dobbiamo prima spiegare esattamente che cosa è un em.
Nella tipografia tradizionale, un em è definito come la larghezza della lettera maiuscola “M” con il font attuale. Nella sua rappresentazione sullo schermo, un em è più propriamente definito come la dimensione del font utilizzato. Per esempio, con una dimensione del font di 12 pixels, un em equivale ad una distanza di 12 pixels.
Nei CSS, un em è una misura relativa di lunghezza che eredita informazioni delle dimensioni dall’elemento parente. Se l’elemento parente è il BODY allora la dimensione dell’elemento è effettivamente determinata dalle impostazioni da parte dell’utente del font del browser. Quindi in una installazione standard di Internet Explorer (dove la dimensione base del font è 16px) 1em corrisponderà ad una lunghezza di 16px.
Utilizzando del testo standard, come ad esempio “Lorem ipsum…” sembra che la lunghezza ideale in em sia di circa 30-35ems. Ciò è espresso con la regola CSS:
width: 30em;
La bellezza di questo metodo risiede nel fatto che la misura è collegata alla dimensione del font dell’utente. Se andate su un sito con una dimensione impostata del font più piccola o più grande, la dimensione della colonna avrà sempre una dimensione ottimale.
Qui c’è un esempio di una colonna definita con gli EMs. Se cambiate la dimensione dei font del vostro browsers (o cliccate sul link sulla sinistra presente nella pagina di prova), la colonna scalerà automaticamente con la dimensione del font.
Non suggerirei di utilizzare questo metodo per blocchi contenenti la navigazione o per strutture di siti con molti dettagli, ma per dei siti dove il contenuto è la parte più importante questa soluzione potrebbe essere considerate ideale.
Un ulteriore miglioramento
Per migliorare questo metodo, si potrebbe impostare la larghezza della colonna in modo tale che rimanga sempre all’interno di un certo intervallo. Questo permetterebbe all’utente un certo grado di controllo sulla lunghezza della linea, ma non permetterebbe che si superi un lunghezza confortevole per la lettura.
Questo miglioramento potrebbe essere definito con le seguenti regole:
min-width: 25em;
max-width: 33em;
Ti è piaciuto questo articolo? Aggiungilo a: del.icio.us
