Largeur de colonne idéale pour les paragraphes en ligne

Question

Il n'y a rien de pire que de tomber sur un site Web avec des paragraphes qui couvrent la largeur de votre résolution d'écran. Ils sont généralement si difficiles à lire, je ne m'embête même pas.

Beaucoup de concepteurs Web utilisent des systèmes génériques de grille et de colonne, mais je ne pense pas que ceux-ci aient été optimisés pour la lisibilité, ils sont plutôt des guides de conception sur l'esthétique générale.

Je suppose que cela se résume à des mots par ligne. Les règles applicables aux supports d'impression sont-elles les mêmes que pour les supports d'écran?

Existe-t-il des directives pour m'aider à dimensionner la largeur des paragraphes à l'écran?

Je veux prendre en considération:

Principaux visages de polices Web (par exemple Arial, Verdana, Géorgie, Times)
Une plage de tailles de police (c'est-à-dire 8px-24px)
Espace entre les colonnes

srcspider · Accepted Answer

La longueur de ligne idéale est raisonnablement courte ou raisonnablement longue; ce qui est généralement agréable à lire sur le plan esthétique est généralement une bonne indication.

Les colonnes dans un contexte Web n'ont de sens que si vous vous concentrez sur un contenu très compact; ce qui va à l'encontre de l'utilisation des colonnes au-delà de l'embellissement. La raison pour laquelle ils n'ont pas de sens autrement n'est pas parce qu'ils sont mal pris en charge, mais à cause du défilement; sauf si vous créez une disposition horizontale comportant des colonnes, vos utilisateurs peuvent faire défiler vers le haut et vers le bas. Je peux également voir quoi que ce soit au-delà de deux colonnes aussi déroutant que cela affecte la mémoire des utilisateurs lorsqu'ils prennent une petite pause de lecture - réfléchissez à la façon dont les colonnes ajoutent un deuxième axe.

Trop long - si une ligne de texte est trop longue, l'œil du visiteur aura du mal à se concentrer sur le texte. En effet, la longueur rend difficile de se faire une idée du début et de la fin de la ligne. De plus, il peut être difficile de continuer à partir de la ligne correcte dans de grands blocs de texte. - Christian Holst

Trop court - si une ligne est trop courte, l'œil devra revenir trop souvent, brisant le rythme du lecteur. Les lignes trop courtes ont également tendance à stresser les gens, les obligeant à commencer sur la ligne suivante avant de terminer la ligne actuelle (donc sauter des mots potentiellement importants). - Christian Holst

De plus, vous voudrez peut-être être très conscient de la taille de votre contenu. Pour un contenu plus long, préférez des lignes plus longues; avec un contenu court, préférez des lignes plus courtes. Prenez généralement la taille des paragraphes et des sections de votre contenu comme variable selon la longueur de la ligne: vous ne voulez pas de paragraphes d'une ligne, mais vous ne voulez pas non plus de paragraphes de 30 lignes. Choisissez une moyenne heureuse qui rend le contenu facile à visualiser.

Règles générales

Prenez-les avec un grain de sel, ce ne sont que des lignes directrices; n'hésitez pas à les casser. Je le répète, ils ne sont pas "une règle pour tous" que vous devez adopter; juste un Push/indice dans la bonne direction.

12 mots par ligne
39 caractères quelle que soit la taille du texte (alphabet et demi)
multipliez la taille en points par 2 et interprétez-la comme des pics (points-fois-deux)
environ 50-60 à au plus 75 caractères (espaces compris) - c'est généralement la ligne directrice empruntée à nos amis en typographie

"Les éléments du style typographique" de Robert Bringhurst, mentionne les mesures plus spécifiques suivantes

Longueur de ligne de 45 à 75 caractères (mesure); spécifiquement 66, y compris les espaces; Seule colonne
40 à 50 caractères; multi-colonne
85 à 90 caractères; texte discontinu; généreux leader
40 caractères (minimum); justifié
12 à 15 caractères; notes marginales; Anglais

Variables de lisibilité:

taille de police
- plus grand = je l'ai essayé, (certaines) personnes le trouvent ennuyeux. Visez juste la bonne "taille moyenne"
- moyen/standard = plus grande largeur
- plus petit = plus petite largeur
hauteur de la ligne
- grand (1,9+) = plus facile à balayer les lignes, les lignes plus longues deviennent plus acceptables
- normal = lignes plus courtes
- plus petit = lignes très courtes
longueur du contenu
- gros blob = longues lignes + grande hauteur de ligne
- message court = lignes courtes + hauteur de ligne raisonnable

Tant que vous restez fidèle au "bon sens de l'utilisabilité", aucun paramètre ne sera erroné en soi. Contrairement à la plupart des aspects de conception, vous pouvez également le tester sur vous-même, simplement mettre du contenu lisible dans l'élément (pas nécessairement ce qui est supposé y aller, et de préférence frais!) Et voir si vous pouvez le lire confortablement. Si vous le pouvez, tant mieux; Sinon, ajustez-le jusqu'à ce que le paramètre corresponde à votre contenu (testez-le avec quelques polices, pas seulement votre police principale).

Nikita Prokopov · Answer

Consultez également ce lien: http://www.informationarchitects.jp/en/100e2r/ .

Concevoir penché avec votre visage collé à l'écran est mauvais pour votre dos; essayez de vous pencher en arrière et de continuer à concevoir dans une position détendue. Vos créations seront plus détendues, et vous aussi.

Pour savoir à quel point le texte est petit sur de nombreux sites Web, comparez-le à un livre que vous vous sentez à l'aise de lire, puis modifiez la taille de la police jusqu'à ce que le type sur le livre et l'écran soit à peu près de la même taille:

La hauteur de ligne HTML par défaut est trop petite. Si vous augmentez la hauteur de la ligne, le texte devient plus lisible. Pour le type à l'écran, l'interlignage à 140% est une bonne référence.

Ils proposent d'avoir une taille de police de 100% (la valeur par défaut du navigateur), de 10 à 15 mots par ligne (généralement 50% d'une fenêtre de navigateur avec une police par défaut), une hauteur de ligne de 140% - ce qui semble assez raisonnable pour moi.