Existe-t-il un rapport taille de police / hauteur de ligne optimal?
Lors du style du texte sur les pages Web, la taille de la police et la hauteur de la ligne peuvent être définies. Par exemple, le texte de ce message sera affiché en utilisant un font-size de 14px et un line-height d'environ) 18px, défini à l'aide de la valeur 1.3em.
En regardant d'autres sites Web, il semble qu'un ratio autour de 1,2 soit une pratique courante.
Quelle est la meilleure pratique à ce sujet? Quelles sont les bonnes ressources à partir desquelles je peux en savoir plus sur le sujet?
Vous souhaitez consulter des sites tels que W3.org pour obtenir des conseils à ce sujet.
De nombreuses personnes souffrant de troubles cognitifs ont du mal à suivre les lignes de texte lorsqu'un bloc de texte est à simple interligne. Un espacement compris entre 1,5 et 2 leur permet de démarrer une nouvelle ligne plus facilement une fois la précédente terminée.
Directives d'accessibilité du W3C 1.4.8 état (soulignement le mien):
Présentation visuelle: Pour la présentation visuelle de blocs de texte, un mécanisme est disponible pour atteindre les objectifs suivants: (Niveau AAA)
Les couleurs de premier plan et d'arrière-plan peuvent être sélectionnées par l'utilisateur.
La largeur ne dépasse pas 80 caractères ou glyphes (40 si CJK).
Le texte n'est pas justifié (aligné à la fois sur les marges gauche et droite).
L'espacement des lignes (interligne) est d'au moins un espace et demi dans les paragraphes, et l'espacement des paragraphes est au moins 1,5 fois plus grand que l'espacement des lignes.
Le texte peut être redimensionné sans technologie d'assistance jusqu'à 200% d'une manière qui n'oblige pas l'utilisateur à faire défiler horizontalement pour lire une ligne de texte sur une fenêtre plein écran.
Un article Hauteur de ligne optimale dit:
Les références typographiques mettent systématiquement la hauteur de ligne idéale à 1,2 ems (une mesure de type équivalente à la hauteur de la lettre ou à la taille en points d'une police).
L'idée principale de définir une hauteur de ligne correcte est de laisser un paragraphe de texte solide et agréable à lire (si vous choisissez une hauteur de ligne plus grande, la différence entre les paragraphes et les lignes deviendra indiscernable et difficile à lire). La hauteur de la ligne dépend également de la longueur de la ligne (du même article):
Les dessins nécessitent des longueurs de ligne (ou mesure) notablement plus longues que celles recommandées dans les références typographiques. La longueur de ligne accrue exige une hauteur de ligne accrue pour faciliter le suivi des yeux.
En fait, c'est subjectif, donc, par exemple, Amazon Kindle vous permet de choisir la hauteur de ligne parmi un certain nombre de variantes (et augmentera respectivement les espaces entre les paragraphes).
Pas de réponse unique
Malheureusement, il n'y a pas de valeur unique de line-height ( interligne ) optimal pour toutes les situations. Une plage optimale est probablement d'environ 1,3 à 1,7, mais pour sélectionner une valeur optimale, nous devons examiner la police spécifique utilisée et la largeur des lignes de texte (entre autres).
Dans l'excellent article de Troy Templeman Règles de base d'une bonne typographie , il dit (soulignement le mien):
L'interlignage (ou hauteur de ligne) est la quantité d'espace vertical entre les lignes de type. L'interligne par défaut dans les programmes de mise en page est généralement suffisant, mais certains facteurs peuvent nécessiter qu'il soit ajusté. Une police peut avoir de longs ascendants et descendants qui se touchent entre les lignes de type, provoquant une distraction. Si une police a une hauteur x élevée, elle réduit l'espace négatif entre les lignes de type qui donne l'illusion d'un interligne serré . Un interligne serré rend difficile pour le lecteur de trouver le début de la ligne de texte suivante, qui est particulièrement visible sur les longues lignes de texte. Par conséquent, pour les colonnes de type large, une hauteur de ligne généreuse se traduit par une meilleure lisibilité . Pour la copie du corps, je règle généralement l'interligne de sorte que la hauteur des lettres capitales s'adapte parfaitement entre les lignes de texte, ce qui représente environ 1,5 fois la taille de la police.
Deux polices de même taille ne semblent pas nécessairement avoir la même taille. Pour le texte en casse mixte, la taille apparente de la police est fortement influencée par la hauteur x, comme le montre le graphique suivant:
Lorsqu'une police a une hauteur x plus grande, elle semble avoir moins d'espace entre les lignes, elle aura donc besoin de plus en tête pour lire confortablement. (Comme vous pouvez le deviner, pour le texte défini dans toutes les majuscules, la hauteur de la majuscule est ce qui compte, pas la hauteur x.)
Le deuxième aspect à considérer est la largeur des lignes de texte, également connue sous le nom de mesure . Lorsque l'œil se déplace de gauche à droite le long d'une ligne de texte, lorsqu'il atteint la fin d'une ligne, il doit revenir au début de la ligne suivante. À mesure que la largeur de la ligne s'allonge, nos yeux ont plus de mal à trouver correctement le début de la ligne suivante si la hauteur de la ligne est serrée. (Autrement dit, nous faisons plus d'erreurs, comme commencer à lire deux fois la même ligne ou sauter une ligne.)
L'article de Mark Boulton Cinq étapes simples pour une meilleure typographie déclare:
Votre avance devrait augmenter proportionnellement à votre mesure. Petite mesure, moins menant. Large mesure, plus leader. C’est une règle simple mais efficace.
(Si vous êtes curieux de continuer à lire, il explique plus tard comment les choix de couleurs affectent également la hauteur de ligne optimale.)
Comme vous pouvez le voir, il est impossible de choisir une seule hauteur de ligne optimale. Au contraire, vous devez principalement considérer la hauteur x de votre police et la longueur des lignes dans votre texte. Assurez-vous de lire l'excellente réponse d'Alan Gilbertson à une question très similaire sur le site Q&A de la conception graphique.
Je pense que cela est influencé par les préférences personnelles et la largeur du bloc de texte. Plus le bloc de texte est large, plus la hauteur de ligne doit être grande afin de garder les yeux sur la même ligne pendant la lecture.
Personnellement, j'aime que la hauteur de ligne soit 1.5em ou 1.6em.
Ce guide interactif de la typographie des blogs a ne section sur la hauteur de ligne qui suggère également une hauteur de ligne de 1.5em.
Voici un extrait d'un très pratique article à ce sujet:
Malheureusement, il ne suffit pas de connaître la hauteur de ligne optimale pour une taille de police donnée.
Les trois dimensions typographiques (taille de police, hauteur de ligne et largeur de ligne) s'influencent mutuellement. Par conséquent, vous ne pouvez pas parler de hauteur de ligne ou de taille de police sans tenir compte de la largeur de ligne.
Sur la base de ce raisonnement, il doit également y avoir une largeur de ligne optimale qui correspond à la hauteur de ligne optimale de l'équation ci-dessus.
Le problème est que vous ne connaissez pas la relation exacte entre la largeur et la hauteur de ligne. Tout ce que vous savez avec certitude, c'est que la largeur de la ligne est nettement supérieure à la hauteur de la ligne.
Avec l'aide de la modélisation mathématique de base, vous pouvez faire une supposition éclairée que la relation entre la hauteur de ligne optimale et la largeur de ligne est exponentielle.
Cela devient beaucoup plus compliqué, alors voici un lien vers une calculatrice qui gère les mathématiques pour vous. http://www.pearsonified.com/typography/
Veuillez vous référer à cet article: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect- paragraph/ - un très intéressant, décrivant également certains autres aspects du texte sur les sites Web .
N'oubliez pas que cela dépend toujours de l'appareil également, en raison de la résolution, de la taille de l'écran et de la distance à laquelle l'utilisateur regarde l'écran (beaucoup plus proche dans le cas des téléphones portables que dans le cas des ordinateurs de bureau, tout en utilisant un écran plus petit). RWD (Responsive Web Design) est crucial ici.
Vous trouverez ici de très bonnes ressources sur ce sujet:
Meilleure ressource:https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Très bon exemple pour voir la différence entre toutes les valeurs et pourquoi il est préférable d'utiliser une valeur numérique.
https://codepen.io/anon/pen/ObxKjJ
À mon avis, je préfère utiliser entre 1,5 et 2 parce que fournir un espacement entre 1,5 et 2 leur permet de commencer une nouvelle ligne plus facilement une fois qu'ils ont terminé le précédent.
Je trouve cet article par Information Architects inc. très intéressant.
Selon lui (cf. section 3) 1.4em est une bonne valeur pour la lisibilité.
La plupart des réponses que je vois ici sont davantage axées sur l'impression que sur le Web. La lecture de documents imprimés est différente de la lecture sur le Web.
En ce qui concerne les tailles de texte, au lieu d'utiliser des tailles de police fixes, vous devriez toujours laisser les utilisateurs décider avec les valeurs par défaut qu'ils ont définies dans leur navigateur. 1,5 est une bonne hauteur de ligne lisible lors de la lecture de texte sur un écran. Cela permet aux personnes malvoyantes qui utilisent des loupes d'écran de lire plus facilement le contenu de votre site.
Lorsque les développeurs Web vont à l'encontre des normes Web, ils rendent la navigation sur leurs sites plus difficile, voire impossible. Il y a beaucoup de gens qui ont des capacités différentes qui utilisent des technologies d'assistance pour faire l'expérience de vos sites et en adhérant aux normes Web, ils s'assurent que ces gens peuvent réellement utiliser votre site. Les gens accèdent au Web et l'utilisent de différentes manières et aller à l'encontre des normes vous fait non seulement ressembler à un hack qui ne connaît pas son métier, mais vous restreignez également votre audience sur le Web, et ce n'est vraiment pas le but de être sur le web pour toucher le public le plus large possible?
La meilleure taille de police est la taille de police par défaut. Faites confiance au navigateur qui a choisi cette valeur en fonction du moniteur DPI et de leurs études internes.
font-size: medium;
De : smashing magazine :
Notez que 1,5 est une valeur qui est couramment recommandée dans les livres typographiques classiques, donc notre étude confirme cette règle empirique.
Selon étude d'Eric Meyer , essayez également d'éviter d'ajouter des unités, utilisez uniquement les valeurs absolues.
line-height: 1.5;
1.5em est le minimum que vous devriez avoir. La plupart des polices font du bien à 1.6em. Mais cela dépend principalement de la famille de types. Certains ont besoin de plus tandis que d'autres ont besoin de moins. Parfois, la hauteur de ligne peut être aussi élevée que 1.8em.