Larghezza della colonna ideale per i paragrafi online

Question

Non c'è niente di peggio che imbattersi in un sito Web con paragrafi che coprono la larghezza della risoluzione dello schermo. Di solito sono così difficili da leggere, non mi preoccupo nemmeno.

Molti web designer usano sistemi generici di griglia e colonna, ma non credo che questi siano stati ottimizzati per la leggibilità, sono più una guida alla progettazione sull'estetica generale.

Immagino si tratti di parole per riga. Le regole che si applicano ai supporti di stampa sono le stesse per i supporti per schermi?

Esistono tipi di linee guida per aiutarmi a dimensionare la larghezza dei paragrafi sullo schermo?

Voglio prendere in considerazione:

Principali volti di caratteri Web (ad esempio Arial, Verdana, Georgia, Times)
Dimensioni di un intervallo di caratteri (ovvero 8px-24px)
Spazio tra le colonne

srcspider · Accepted Answer

La lunghezza della linea ideale è ragionevolmente corta o ragionevolmente lunga; ciò che è generalmente esteticamente piacevole da leggere è generalmente una buona indicazione.

Le colonne in un contesto Web hanno senso solo se ti concentri su contenuti molto compatti; che vanifica lo scopo di usare le colonne oltre l'abbellimento. La ragione per cui non hanno senso altrimenti non è perché sono scarsamente supportati, ma a causa dello scorrimento; a meno che non si stia realizzando un layout orizzontale con colonne, è possibile che gli utenti scorrano su e giù. Riesco anche a vedere qualsiasi cosa oltre le due colonne sia confusa in quanto mette a dura prova la memoria degli utenti quando prendono una piccola pausa dalla lettura: considera come le colonne aggiungono un secondo asse.

Troppo lungo - se una riga di testo è troppo lunga, l'occhio del visitatore avrà difficoltà a concentrarsi sul testo. Questo perché la lunghezza rende difficile avere un'idea di dove la linea inizia e finisce. Inoltre, può essere difficile continuare dalla riga corretta in grandi blocchi di testo. - Christian Holst

Troppo corto - se una linea è troppo corta l'occhio dovrà tornare indietro troppo spesso, rompendo il ritmo del lettore. Le linee troppo corte tendono anche a stressare le persone, facendole iniziare sulla riga successiva prima di finire quella attuale (saltando quindi le parole potenzialmente importanti). - Christian Holst

Inoltre, potresti voler essere molto consapevole delle dimensioni del tuo contenuto. Per contenuti più lunghi preferisci linee più lunghe; con contenuti brevi preferiscono linee più brevi. In genere prendi la dimensione di paragrafi e sezioni nei tuoi contenuti come variabile in base alla lunghezza della riga: non vuoi paragrafi di 1 riga, ma allo stesso modo non vuoi paragrafi di 30 righe. Scegli una media felice che renda il contenuto facile da visualizzare.

Regole generali

Prendi questi con un granello di sale, sono solo linee guida; sentiti libero di romperli. Ripeto, non sono "una regola per tutti" che devi adottare; solo un Push/indizio nella giusta direzione.

12 parole per riga
39 caratteri indipendentemente dalla dimensione del tipo (alfabeto e mezzo)
moltiplica la dimensione in punti per 2 e interpretala come picas (points-times-two)
da circa 50-60 a un massimo di 75 caratteri (spazi inclusi) - questa è di solito la linea guida presa in prestito dai nostri amici in tipografia

"The Elements of Typographic Style" di Robert Bringhurst, menziona le seguenti misure più specifiche

Lunghezza della riga da 45 a 75 caratteri (misura); in particolare 66 spazi inclusi; Colonna singola
Da 40 a 50 caratteri; più colonne
Da 85 a 90 caratteri; testo discontinuo; leader generoso
40 caratteri (minimo); giustificato
Da 12 a 15 caratteri; note marginali; inglese

Variabili nella leggibilità:

dimensione del font
- large = L'ho provato, (alcune) persone lo trovano fastidioso. Punta solo alla felice "taglia media"
- medio/standard = larghezza maggiore
- più piccolo = larghezza più piccola
altezza della linea
- grande (1.9+) = più facile da scansionare le linee, le linee più lunghe diventano più accettabili
- normale = linee più brevi
- più piccolo = linee molto brevi
lunghezza del contenuto
- blob grande = linee lunghe + altezza della linea grande
- messaggio breve = linee corte + altezza della linea ragionevole

Fintanto che rimani fedele al "buon senso dell'usabilità", nessuna impostazione sarà di per sé sbagliata. A differenza della maggior parte degli aspetti del design, puoi anche testarlo su te stesso, semplicemente inserire un contenuto leggibile nell'elemento (non necessariamente ciò che si suppone che ci vada, e preferibilmente fresco!) E vedere se riesci a leggerlo comodamente. Se puoi, fantastico; in caso contrario, modificalo fino a quando l'impostazione corrisponde al tuo contenuto (testalo con alcuni caratteri, non solo quello principale).

Nikita Prokopov · Answer

Dai un'occhiata anche a questo link: http://www.informationarchitects.jp/en/100e2r/ .

Progettare piegati con il viso incollato allo schermo fa male alla schiena; prova a rilassarti e continua a progettare in una posizione rilassata. I tuoi disegni saranno più rilassati, e anche tu.

Per capire quanto è piccolo il testo su molti siti Web, confrontalo con un libro che ritieni comodo leggere, quindi modifica le dimensioni del carattere fino a quando il tipo sul libro e lo schermo non hanno le stesse dimensioni:

L'altezza della riga HTML predefinita è troppo piccola. Se si aumenta l'altezza della linea, il testo diventa più leggibile. Per il tipo sullo schermo, il 140% in testa è un buon punto di riferimento.

Propongono di avere una dimensione del carattere del 100% (impostazione predefinita del browser), 10-15 parole per riga (in genere il 50% di una finestra del browser con carattere predefinito), altezza della linea 140% - il che suona abbastanza ragionevole per me.