Quel est le meilleur nombre de largeur de paragraphe pour la lisibilité?
Étant donné que mon projet actuel comporte beaucoup de contenu texte/paragraphe, je considère la lisibilité du site Web.
J'ai vu et essayé d'inspecter tous les sites qui, selon moi, ont une bonne lisibilité, tels que medium.com, Quora.com, etc.
Leur largeur du paragraphe se situe toujours entre 500 et 700 px.
Ma question est, quel est le meilleur nombre de largeur de paragraphe pour la lisibilité? En particulier sur la vue de bureau.
Selon les études, la longueur de ligne ne doit pas dépasser 70 caractères. Gardez donc la largeur de votre paragraphe entre 50 et 70 caractères.
Donc, en fait, vous ne devriez pas vous soucier de la largeur en pixels, mais plutôt de la largeur en ems (la largeur par rapport à la taille de la police). Alors optez pour 30-50em.
Aussi wikipedia dit:
Certaines études ont montré que 100 cpl peuvent être lus plus rapidement que les lignes de 25 caractères, mais le niveau de compréhension reste le même. Pour que le texte à l'écran ait à la fois la meilleure vitesse et la meilleure compréhension possible, environ 55 cpl doivent être utilisés. Comme avec du texte imprimé, si les lignes sont trop longues ou trop courtes, la lecture sera plus lente. Si les lignes sont trop longues, il est difficile pour le lecteur de revenir rapidement au début de la ligne suivante (saccade) alors que si les lignes sont trop courtes, plus de défilement ou de pagination seront nécessaires. La recherche suggère que des lignes plus longues sont meilleures pour un balayage rapide, mais des lignes plus courtes sont meilleures pour la précision. Des lignes plus longues doivent être utilisées lorsque les informations seront probablement numérisées, tandis que des lignes plus courtes doivent être utilisées lorsque les informations doivent être lues attentivement. La conception Web est souvent destinée à être lue en entier plutôt qu’écrémée, donc des lignes plus courtes doivent être utilisées lorsque cela est possible.
La largeur de paragraphe idéale n'est pas basée sur les pixels en soi, mais sur caractères par ligne.
Cela dépend bien sûr de la taille et de l'espacement de votre type de police. Le projet sur lequel je travaille a une largeur de paragraphe de 540 pixels. Il y a de la place pour 70 caractères par ligne.
La longueur de ligne optimale pour votre corps de texte est considérée comme étant de 50 à 60 caractères par ligne, espaces compris ("Typographie", E. Ruder). Autre sources suggère qu'un maximum de 75 caractères est acceptable.
Source: lisibilité: la longueur de ligne optimale
Vous pouvez en savoir plus à ce sujet (arguments sur des lignes trop longues ou trop courtes) en cliquant sur la source mentionnée ci-dessus.
tl; dr
Une moyenne de 60 à 70 caractères est idéale pour la visualisation desktop.
40-50 est plus réaliste sur mobile.
La longueur de ligne ( mesure dans le langage typographique) est un facteur important pour une lisibilité confortable, surtout si vous vous attendez à une lecture prolongée (assez rare à l'écran). James Craig l'a bien dit dans Conception avec type:
La lecture d'une longue ligne de texte provoque de la fatigue: le lecteur doit bouger la tête à la fin de chaque ligne et rechercher le début de la ligne suivante.… Une ligne trop courte décompose des mots ou des phrases qui sont généralement lus comme un tout.
Mesurer n'est pas tout
Exemple tiré de Pocket mobile. Remarquez la mesure relativement courte.
La mesure doit être envisagée à la lumière d'autres facteurs d'importance égale ou supérieure.
Les principaux facteurs déterminants lors de la conception pour la lisibilité sont:
- Police de caractères
- Taille de police
- L'espacement des lettres*
- Espacement des mots *
- Contraste avant-plan/arrière-plan
- Mesure
- Interlignage (espace entre les lignes)
* Note latérale sur l'espacement des lettres et des mots:
Cela ne devrait pas être une grande préoccupation, tant que vous utilisez une bonne police de caractères et la définissez à la bonne taille. Ces facteurs sont généralement pris en compte dans la police elle-même et nécessitent rarement un ajustement.
Le cas pas si spécial du mobile
Compte tenu de tous les facteurs, vous constaterez que la lisibilité mobile est meilleure avec une mesure plus courte. Ce n'est pas nouveau. Historiquement, les mesures dans la gamme 30-50 ont été courantes pour les mises en page à plusieurs colonnes comme les magazines et les journaux (vous vous souvenez de ces choses?).
Dans ces contextes, plusieurs colonnes nécessitent un rétrécissement de la ligne - mais vous ne pouvez pas simplement continuer à réduire le type. Il est préférable d'avoir une taille de texte lisible (et un interligne) et de vivre avec une mesure plus courte. Ce format entraînerait la fatigue du lecteur dans une lecture "immersive" étendue, mais ce n'est pas un problème pour le type de lecture occasionnel qui se produit ici.
Mobile correspond au même scénario.
Ressources
Smashing Mag a ne excellente amorce abordant spécifiquement les facteurs de longueur de ligne et la conception réactive . Lisez tout cela avant de prendre d'autres décisions.
Il y a aussi un long en cours de travail pour traduire le classique de Robert Bringhurst Elements of Typographic Style vers une ressource Web: Richard Rutter's The Elements of Style typographique appliqué au Web . ???? Ce lien vous mènera à la section sur le choix de la bonne mesure. Une grande observation de cette page que vous voudrez peut-être considérer:
… La beauté et l'avantage du Web en tant que média est que les lecteurs peuvent adapter leur environnement de lecture à leurs propres besoins. Il s'agit d'un concept qui doit être reconnu et adopté, et intégré à la conception des sites Web à partir de zéro.
je me suis adressé ne question similaire ici il y a quelque temps.
Certaines ressources que j'ai trouvées peuvent vous aider davantage:
La longueur de ligne optimale pour votre corps de texte est considérée comme étant de 50 à 60 caractères par ligne, espaces compris ("Typographie", E. Ruder). D'autres sources suggèrent qu'un maximum de 75 caractères est acceptable.
Un conteneur d'articles de 560 pixels de large, nous nous retrouvons avec environ 70 caractères par ligne.
source: https://baymard.com/blog/line-length-readability
65 caractères (2,5 fois l'alphabet romain) sont souvent appelés la mesure parfaite. Dérivé de ce nombre est la gamme idéale que tous les concepteurs devraient s'efforcer d'atteindre: 45 à 75 caractères (y compris les espaces et la ponctuation) par ligne pour l'impression.
source: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
Toutes les ressources parlent de caractères par ligne , car selon la police et la taille de police, la largeur ne dit pas grand-chose sur la lisibilité.