Existe-t-il une taille de police optimale?
Pour la plupart des projets de sites Web auxquels j'ai participé, la taille de la police du texte en vrac est généralement de 12 pixels à 13 pixels, mais je me demande si c'est une bonne taille. Je me souviens d'avoir lu un article disant que les tailles de police sur les sites Web devraient être beaucoup plus grandes, environ 17 pixels pour que le texte en vrac corresponde aux tailles de police imprimées.
Existe-t-il une taille de police optimale. Quand quelque chose est-il trop grand/petit pour l'utilisateur moyen?
Existe-t-il des avantages/inconvénients pour les tailles de police petites/moyennes/grandes?
Mise à jour:
Je voudrais avoir votre expérience avec les réactions réelles des utilisateurs de tests, etc. C'est facile pour cela, ceci et cela est trop grand ou trop petit, mais j'ai appris que les utilisateurs surprennent parfois et réagissent différemment de avis d'experts.
La possibilité de changer la taille des polices est également une bonne discussion, mais ce n'est pas ce qui est demandé ici. Ce que je souhaite en savoir plus, c'est comment les utilisateurs réagissent aux différentes tailles de police, et non comment ils devraient pouvoir le changer.
C'est un sujet largement débattu. L'une des meilleures façons dont j'ai vu cela expliqué est à partir de la présentation Conception pour les développeurs: faire en sorte que vos frontaux soient moins efficaces par Idan Gazit.
Cela avait la diapositive suivante: 
C'est du texte 16px sur un écran normal et du texte 12pt dans un livre. Le message est que 12 pt est excellent pour un livre, mais est généralement aussi beaucoup plus proche du lecteur qu'un écran. Compte tenu de la distance, les 16 pixels sur l'écran et 12 pt dans le livre semblent à peu près de la même taille. 12 pt sur papier = 16 px à l'écran
Il existe toutes sortes d'exceptions, où le texte plus petit est préféré. Mais pour une lisibilité optimale du texte plus long, je suis d'accord avec 16px.
Il est conseillé de changer les unités évolutives comme em ou % que les unités de taille fixe comme pt ou px. En savoir plus: taille de police CSS: em vs px vs pt vs percent
Une taille de police optimale n'existe pas. En chercher un signifie que vous oubliez quelque chose d'important: la lisibilité du texte n'est pas uniquement un produit de taille.
J'ai construit une douzaine de sites Web en tant que concepteur d'interface utilisateur au cours des cinq dernières années, et ils ont tous eu des publics différents. L'une des choses que j'ai trouvées est que la taille n'est pas le facteur le plus important. C'est une combinaison de différents aspects liés à l'affichage du texte:
- contraste
- famille de polices
- hauteur de la ligne
- position sur la page
La combinaison de ces éléments conduit à une métrique approximative pour lisibilité globale et j'ai trouvé que c'était la cible de conception la plus importante pour le texte.
À titre d'anecdote sur les tests (puisque vous l'avez demandé): J'ai travaillé sur un site communautaire avec 700 000 visites mensuelles où le public principal était des utilisateurs non avertis en informatique. Nous avons utilisé 12px Verdana pour le type de corps et 14px-16px Arial pour les titres. Parfois, nous tombions à 11px Verdana en gris pour un texte moins important. Lors des tests d'utilisabilité sur le site, nous avons reçu des commentaires non pas sur la taille du texte, mais sur la façon dont les couleurs environnantes du design donnaient l'impression que vous regardiez une lampe. Nous avons interprété cela comme un site trop lumineux et ajusté le contraste de l'ensemble du design pour qu'il soit moins lumineux. En partie à cause de ces changements et en partie à cause des changements dans la structure de navigation, nous avons constaté une augmentation mensuelle significative des pages vues par visiteur.
Une chose à retenir sur les petites tailles de police est qu'elles ont un but: quand vous avez besoin que quelque chose soit plus petit que quelque chose d'autre (duh!). Mais en tant que concepteur d'interface utilisateur, il est important de se rappeler que votre travail consiste à créer de la clarté et de la convivialité (entre autres) dans l'interface, et que en mettant l'accent sur certains éléments de l'interface utilisateur, vous pouvez améliorer sa convivialité. C'est à vous de décider quels éléments doivent être réduits et quels aspects du texte doivent être modifiés (à partir de ma liste ci-dessus).
12px semble fonctionner correctement pour la plupart des gens. Avoir quelque chose à 17px le rend plus difficile à lire, tout comme l'avoir en dessous de 10px. Je pense que 12-13px est une bonne ligne directrice.
Mais vraiment, vous devez définir la taille de votre texte sur quelque chose comme 1em. En effet, certains navigateurs ne permettent pas aux utilisateurs de redimensionner le texte s'il est défini en pixels. Quelle que soit la taille du texte, les personnes aux yeux vifs le réduiront afin de pouvoir lire davantage, et les personnes malvoyantes agrandiront le texte.
Réglez simplement les choses sur 1em et laissez les gens et leurs navigateurs s'occuper du reste.
Il est cependant bon de tester votre page avec différentes tailles de police pour voir si la mise en page reste gérable.
Selon des preuves scientifiques récentes:
- 18 et 22 points conduiront à une lisibilité objective considérablement améliorée (mesurée avec eye-tracker)
- 10 et 12 points conduiront à une compréhension considérablement altérée (mesurée avec des questions de compréhension)
- le plus grand sera le mieux, car la lisibilité objective s'améliore continuellement avec l'augmentation de la taille de la police.
Ne prenez pas ma parole pour ça. Lisez les détails dans le article scientifique .
La taille de police optimale est individuelle et est définie par le système d'exploitation/navigateur des utilisateurs. Alors ne le changez pas.
Si vous avez besoin d'agrandir la police (par exemple les titres), faites-le relativement (par exemple 200% ou 2em).
Ne réduisez jamais la taille de la police et conservez toujours un bon contraste pour maintenir la lisibilité.
Non.
... pas en px, de toute façon.
Les bonnes unités pour exprimer une taille optimale, s'il y en a une, seraient angle sous-tendu sur la rétine.
Si vous regardez px, vous ne regardez que l'un des trois facteurs nécessaires pour déterminer la lisibilité1:
px
distance de lecture
Le pas de point, ou la définition correcte de la "résolution" (pixels/distance), est la façon dont vous convertissez de px en distance réelle.
La distance de lecture dont vous avez besoin, bien sûr, car les caractères de la même dimension ne sont pas également lisibles partout.
... et bien sûr la lisibilité augmente avec:
- px supérieur
- pas de point supérieur (ou résolution inférieure)
- distance de lecture plus faible
1Il y a aussi la couleur du texte, la couleur d'arrière-plan, la police, etc. (le texte en gras noir sur blanc nécessite une taille plus petite que le texte en italique jaune sur orange), mais px, pas de point et distance de lecture vous avez besoin d'une décision basée uniquement sur dimension.
Vous ne devez pas essayer de définir une taille de police. Vous pouvez utiliser + N pour indiquer "rendre cela plus grand que la ligne de base" (ou -N pour faire plus petit). Toute taille que vous spécifiez sera erronée dans certaines circonstances; la seule option réalisable qui ne nécessite pas que les utilisateurs prennent des mesures correctives sur votre site est de laisser le navigateur décider.
Vous devez jamais utiliser des pixels pour les tailles de police. Essayer de lire des polices 14px sur un écran de 12 "prenant en charge la résolution Full HD vous donnera du texte en caractères de 1 à 2 mm de haut (et un mal de tête en beaucoup moins d'une heure).
12px, c'est bien, mais ce qui est également important, c'est que les utilisateurs ont la possibilité d'augmenter la taille de la police eux-mêmes et que votre site n'est pas interrompu lorsque cela se produit.
Il y a quelques messages étranges et idées fausses dans ce fil. Il semble que beaucoup de gens veulent ignorer la science et les aspects bien documentés de la façon dont nous lisons et comprenons le texte. En l'occurrence, je suis en train de rechercher de nouvelles normes sur ce même sujet, alors voici un peu l'état de l'art actuel:
La science de l'art
Les recherches existantes ont défini que la vitesse de lecture optimale pour les personnes normalement voyantes, avec une police à contraste maximum, est une hauteur x comprise entre 0,2 ° et 2 ° d'angle visuel. La hauteur X est la taille verticale réelle du x minuscule d'une police. Évidemment, la taille réelle de la police variera en fonction de la distance de visualisation, mais heureusement, le pixel de référence CSS - px - est basé sur l'angle visuel. Un angle visuel de 0,2 ° est connu comme la taille d'impression critique, car c'est le point où la vitesse de lecture maximale est atteinte. (Au-dessus de 2 °, il redescend.)
Un px correspond à 0,0213 degrés ou 1,278 minutes d'arc. Ceci est basé sur un appareil avec une densité de pixels de 96 dpi à une distance de 28 pouces. Les fabricants d'appareils peuvent ainsi utiliser le px de référence pour définir une taille basée sur la distance visuelle prévue/attendue. Ceci est discuté sur les normes CSS du W3C. Les fabricants d'appareils utilisent le px de référence pour définir la taille de tramage réelle en fonction de la distance de visualisation prévue. 16 pixels ne correspondra pas nécessairement à 16 pixels de l'appareil. Sur un iPhone avec un rapport de 2: 1, ce serait par exemple 32 pixels de l'appareil.
Ainsi, la taille d'impression critique pour le Web est une hauteur x de 9,4 pixels. En fonction de la conception de police spécifique, cela concerne une police comprise entre 17 pixels et 20 pixels. Cela a abouti à des normes d'accessibilité qui indiquent que 18px est la taille de police minimale souhaitée.
Mais attendez, il y a plus
Il existe également un niveau critique contraste. Les tailles de police mentionnées ci-dessus se rapportent à un contraste maximum. Mais qu'en est-il pour les contrastes inférieurs? De nombreux concepteurs ont un impact sérieux sur la lisibilité de leurs sites en utilisant des couleurs à faible contraste. Cela est dû en partie à l'échec des WCAG 2.0 dans la spécification des contrastes corrects par rapport à la fréquence spatiale. 4,5: 1 est plus que nécessaire pour un gros gros titre, mais 4,5: 1 est insuffisant pour un petit corps de texte mince.
Pour une vue normale, le contraste critique peut être aussi bas que 10% pour les gros titres gras au sommet de la fonction de sensibilité au contraste. Mais aux fréquences spatiales très élevées des petites polices fines, le contraste doit être 20 fois plus élevé. Voir le diagramme suivant, où tout le texte est dans la même couleur CSS (et cela ne traite même pas de la façon dont l'anticrénelage réduit le contraste du texte au-delà de toute reconnaissance).
Ainsi, la taille de la police ainsi que le contraste et un certain nombre d'autres fonctionnalités de conception fonctionnent ensemble pour fournir un texte "plus lisible". Quoi qu'il en soit, une taille de police de 12 pixels que de nombreuses affiches de ce fil recommandent est scandaleusement trop petite, et où ils ont trouvé ce chiffre est à deviner. Vous pouvez utiliser quelque chose comme 12px pour peut-être un avis de droit d'auteur ou quelque chose que vous ne voulez pas que quiconque lise, mais 12px n'est en aucun cas une taille appropriée pour le texte du contenu.
Les glyphes l'ont
La recommandation officielle est la taille minimale de 18 pixels, néanmoins certaines polices telles que Verdana (une police conçue pour une utilisation Web) peuvent fonctionner jusqu'à 16 pixels. Mais Times New Roman ne devrait jamais être réglé à moins de 18px car il a une très petite hauteur x et une mauvaise lisibilité généralement (merci Microsoft, ugh). Pour une autre police que Microsoft a mutilée, essayons de ne jamais utiliser "Courier New", où Microsoft a pris ce qui était une police à espacement fixe généralement lisible et l'a rendu beaucoup trop mince et léger. Genre, à quoi pensaient-ils?
Pour quelques considérations générales sur le choix des polices pour l'accessibilité et la lisibilité, j'ai ce PDF sur mon compte de porte de recherche que vous pouvez télécharger gratuitement: https: //www.researchgate. net/publication/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability
Un mot de clôture le plus important
Plus important que ce que vous définissez comme taille de police, vous autorisez les utilisateurs à ZOOMER le texte à la taille souhaitée sans casser le contenu. La norme actuelle spécifie un zoom à 200% sans rupture, mais cela est insuffisant. 500% est beaucoup plus raisonnable du point de vue de l'utilisateur.
CONSIDÉRER:
20/20 est une vision moyenne. Les tailles de police que je mentionne ci-dessus (18px) sont basées sur cet utilisateur moyen 20/20. 20/40 a besoin de deux fois cette taille pour la même perception. Les utilisateurs 20/200 ont besoin de DIX FOIS de cette taille (c'est-à-dire qu'ils peuvent vouloir zoomer 1000%). Je mentionne 500% au minimum car cela tient compte des implications du fait que la page a des polices plus grandes, ainsi que de la taille physique de l'appareil.
Une technologie qui fait actuellement défaut dans la recherche est le zoom vers le haut sur les polices les plus petites, mais le zoom sur les polices plus grandes moins, afin que les gros titres ne deviennent pas trop gros pour être lisibles.
En attendant, considérez simplement qu'une grande partie des personnes qui lisent votre site n'ont pas un moniteur aussi bon que le vôtre et n'ont pas une vue aussi bonne que la vôtre. Si vous voulez avoir une idée de la façon dont votre site pourrait être vu par certains moins fortunés, procurez-vous un moniteur bon marché, junky, petit et basse résolution (vous pourriez en avoir un en stockage), et placez-le à 3 à 4 pieds (c.-à-d. Plus d'un mètre). Pouvez-vous lire votre site? Zoomez maintenant sur le texte - votre site se casse-t-il à cause des limites du petit moniteur?
C'est le genre de problème que de nombreux utilisateurs rencontrent avec de nombreux sites. Ce n'est pas parce que vous avez une vision 20/15 et un bel écran rétine 32 "que vos utilisateurs ont presque ce niveau d'accommodation visuelle.
-Andy
Je suis d'accord avec Erik, 16pt semble être le meilleur standard en termes de lisibilité . En savoir plus ici: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/