Relation entre la taille de police et la largeur du conteneur
Existe-t-il des études qui nous indiquent la relation entre la taille de la police et la largeur optimale du conteneur dans laquelle ils se trouvent?
Par exemple, la taille de police 12px sera trop petite dans un conteneur de largeur 1920px, car lorsque votre œil revient sur le côté gauche, il pourrait facilement perdre la ligne sur laquelle il se trouvait. Quelle est donc la largeur optimale pour une police 12px?
Existe-t-il une formule mathématique pour une lisibilité maximale?
Sur la base de cette partie de la question
"Lorsque votre œil revient sur le côté gauche, il pourrait facilement perdre sur quelle ligne il se trouvait"
J'ai reformulé la question comme
"Quelle est la longueur de ligne optimale pour lire du texte en ligne"?
Mes excuses si j'ai mal interprété la question.
Il existe plusieurs façons de mesurer la longueur d'une ligne. Dans cette réponse, la longueur de ligne est mesurée en caractères par ligne (cpl).
Il existe une excellente revue de la littérature dans Visible Language .
Un ancien et moins approfondi examen par HFI est ici et disponible gratuitement - contrairement au premier examen.
Ce résumé ne tient pas compte des décennies de recherche sur la lecture sur papier peut ne pas être pertinent pour la lecture sur un écran d'ordinateur, une tablette ou un smartphone.
Ce sont les recommandations pour la lecture en ligne.
- Longueur de ligne moyenne de 55 cpl pour faciliter la lecture, une meilleure compréhension et de meilleurs taux de lecture pour le texte à l'écran par rapport aux lignes de 25 cpl ou 100 cpl.
- La largeur de ligne optimale pour une seule colonne de texte varie de 45 à 75 cpl. Pour plusieurs colonnes, la longueur de ligne doit être de 30 à 50 cpl.
- La longueur de la ligne doit être environ 30 fois (entre 20 et 40) la taille du type de police
- Les lecteurs préfèrent les lignes courtes d'environ 8 à 10 mots ou 45 à 60 caractères
- Faites un espacement des lignes d'au moins 1/30 de la longueur de la ligne pour donner un angle vers le bas de 2 degrés pour trouver la ligne suivante.
- Les lignes contenant plus de mots doivent avoir un espace supplémentaire entre elles. L'espacement des lignes supplémentaire permet une longueur de ligne plus longue sans sacrifier la lisibilité
Ces recommandations touchent à certains des autres facteurs pertinents pour la question, mais chacun de ces facteurs doit également être pris en compte lors du réglage de la longueur de ligne.
- Interligne
- Espacement des mots
- Justification du texte
- Longueur du passage du texte
- Nombre de colonnes de texte sur une page
- Angle visuel formé par une ligne de texte
- Taille de l'écran
- Résolution d'écran
Chris Pearson a une analyse mathématique très détaillée sur ce sujet dans son article de blog intitulé Symphonie secrète: le guide ultime de la typographie Web lisible .
Il déclare que les trois aspects de la typographie Web - taille de police, hauteur de ligne et largeur de ligne - sont mieux reçus lorsqu'ils sont proportionnels.
Il fait valoir que:
- La taille de la police et la hauteur de la ligne sont proportionnellement liées.
- Pour toute taille de police, la hauteur de ligne doit augmenter à mesure que la largeur de ligne augmente.
- Lorsque la nature a besoin d'une proportion pour relier les choses et pour mettre de l'ordre à n'importe quelle échelle, elle a tendance à utiliser le nombre d'or.
- Si la largeur de votre ligne est plus courte que la largeur optimale, alors la hauteur de votre ligne correspondante doit être inférieure au nombre d'or. Inversement, si la largeur de votre ligne est plus longue que la largeur optimale, la hauteur de votre ligne correspondante doit être supérieure au nombre d'or.
- La typographie Golden Ratio peut être utilisée pour affiner la typographie de n'importe quel support!
Voici un graphique qu'il utilise pour illustrer ce concept pour les tailles de police courantes:
Dans le poste, il entre dans une analyse très détaillée des mathématiques derrière. Par exemple, si vous aviez une police de 16 pixels dans un conteneur de 550 pixels de large, voici l'équation pour résoudre la hauteur de ligne:
Heureusement pour nous, il a fait une calculatrice en ligne qui vous permet d'entrer les valeurs vous-même pour obtenir les valeurs dont vous avez besoin pour votre cas d'utilisation: Calculatrice de typographie Golden Ratio
user17574368792549525a a une excellente réponse :) Juste une note supplémentaire ...
Il s'agit d'une ancienne question de conception qui est bien antérieure au Web, vous pouvez donc trouver plus de réponses dans les cercles de typographie et de composition. De la section 2.1.2 des Les éléments du style typographique :
Tout élément de 45 à 75 caractères est généralement considéré comme une longueur de ligne satisfaisante pour une page à une colonne définie dans une face de texte empatté dans une taille de texte. La ligne de 66 caractères (comptant à la fois les lettres et les espaces) est largement considérée comme idéale. Pour un travail sur plusieurs colonnes, une meilleure moyenne est de 40 à 50 caractères.
Voir aussi TEOTS As Applied to the Web .
C'est une question d'angles.
Cela dépend aussi de la vue du lecteur et de la taille de la police.
La longueur de la ligne doit être telle qu'elle n'oblige pas les lecteurs à trop bouger les yeux sur le côté. C'est la contrainte naturelle.
Il y a aussi une limite inférieure en ce sens que les lignes ne doivent pas être trop courtes pour exiger trop de mouvements oculaires.
Lors de la lecture d'un livre, nous adoptons une position telle qu'une ligne perpendiculaire au papier au milieu de la ligne coupe notre visage entre nos yeux. Les lignes qui s'étendent entre les yeux jusqu'aux extrémités de la ligne forment un triangle isocèle.
Cet angle est ce qui doit être contrôlé. Je ne veux pas dire mesuré, sauf en essayant de lire le texte et en vérifiant si une ligne trop longue produit une fatigue oculaire en forçant les lecteurs à balayer trop de largeur, avec l'ajout du problème de parallaxe de retour au début de la mauvaise ligne. Quelque chose entre 30 ° et 45 ° est OK.
L'angle supérieur du triangle isocèle dépend à la fois de la largeur de la ligne et de la distance de lecture.
La distance de lecture, en supposant que les lecteurs peuvent la contrôler, dépend de la vue du lecteur et de la taille de la police. Par exemple, les personnes âgées ont généralement besoin de polices plus grosses pour pouvoir lire en tout confort.
Dans les écrans de bureau ou d'ordinateurs portables, avec les écrans larges actuels et les configurations par défaut, nous avons tendance à nous asseoir de sorte que l'angle des côtés de l'écran soit trop élevé. La moitié de cette largeur serait une longueur de ligne raisonnable.
Les lecteurs plus âgés définissent des polices plus grandes mais devraient toujours balayer le même angle, de sorte que les lignes finiraient par contenir moins de mots.
Ces lecteurs pourraient ne pas être en mesure de lire à la même distance qu'un jeune homme, dans ce cas, la page devrait être élargie.
Tu peux l'essayer. Ouvrez un livre dans Acrobat Reader et réglez le zoom sur la largeur.
Agrandissez ensuite la fenêtre: vous devez augmenter la distance de lecture. D'un autre côté, si vous réduisez la largeur de la fenêtre, vous voudrez être plus proche.
Comme vous pouvez l'apprendre de la recherche HFI citée par l'utilisateur 17 ... il y a un autre facteur: la conception de la police.
Certaines polices sont plus lisibles que d'autres. Cela semble être lié à la police xHeight .
Je peux dire tout de suite que, en supposant que ce soit du texte, un le conteneur de 1920 pixels est beaucoup trop large pour une lecture confortable.
- Regarde droit devant.
- Placez votre index gauche devant votre œil gauche.
- Placez votre index droit devant votre œil droit.
- Regardez la distance entre votre index gauche et droit.
La valeur de l'étape 4 est en fait la largeur que vous pouvez lire à tout moment avant de devoir tourner vos globes oculaires, ce qui nécessite un effort physique qui s'additionne. Multipliez ladite valeur par deux pour la largeur maximale approximative approximative d'une colonne de texte.
Vous pouvez utiliser un facteur de trois si vous voulez vraiment pousser les choses, mais je ne le recommanderais pas. Oubliez les unités web comme les ems, les pixels et les pourcentages: il est préférable de penser en termes d'unités réelles comme les pouces et les centimètres lorsque vous testez la largeur est trop large.
J'ai lu des articles de blog de typographes qui disent que pour une colonne de texte donnée, la meilleure taille de police est celle qui convient généralement à 70-80 caractères sur une ligne, par exemple l'alphabet anglais imprimé trois fois. Je pense que les 50 caractères sont très bien si vous avez une plus grande taille de police.