Existe-t-il des recherches sur la façon dont le poids de la police affecte la lisibilité?
Existe-t-il des recherches sur la façon dont le poids de la police affecte la lisibilité?
Évidemment, il y a une certaine relation, mais j'ai du mal à prendre une décision basée sur des faits.
J'ai créé un jsFiddle qui illustre mon problème ou vous pouvez voir la capture d'écran ci-dessous.
Personnellement, je préfère le titre avec font-weight:100; car il est plus lisse, moderne, etc., mais je crains que d'autres ne puissent pas le lire très bien quand il y a beaucoup de ces wrappers sur une page. En outre, il me semble que le "texte de contenu" sous le titre est plus lourd et détourne le regard du titre.
J'ai l'impression que vous avez des questions très différentes ici.
Pour répondre à votre première question:
existe-t-il des recherches sur la façon dont le poids de la police affecte la lisibilité?
Oui il y a. Vous devez d'abord comprendre que le type/les polices sont jugés par leur "lisibilité" (avec quelle facilité les mots, les phrases et les paragraphes peuvent-ils être lus par un lecteur moyen) et leur "lisibilité" (avec quelle facilité les lettres peuvent-elles être distinguées les unes des autres) .
Des études ont montré que la lisibilité a tendance à augmenter lors de l'utilisation d'un poids de police "normal" ou "régulier" (c'est-à-dire 400). La raison en est que lorsque les mots et les phrases sont capables de lire rapidement, les yeux du lecteur ralentissent en fait leur taux de clignotement normal, ce qui permet à l'utilisateur de ne pas se lasser de lire pendant de longues périodes. Pourtant, lorsque des poids plus légers ou plus lourds sont utilisés dans de gros blocs de texte, les lecteurs ont tendance à clignoter davantage car ils doivent se concentrer davantage pendant la lecture. Des poids de type plus légers introduisent plus d'espace négatif et des poids de type plus lourds introduisent plus d'espace positif. Les deux exigent que les lecteurs se concentrent davantage.
Pour les titres, votre objectif doit être la lisibilité mais aussi la lisibilité. Des études ont montré que les polices de caractères avec des hauteurs x plus élevées sont plus lisibles.
Sources:
- Lisibilité et lisibilité - Logo Talks: Magazine en ligne pour les concepteurs de logos et de types
- "C'est une question de lisibilité" - Fonts.com
Pour répondre à votre deuxième question:
Voici donc le violon sur lequel je travaille http://jsfiddle.net/T7b6E/
Personnellement, je préfère le titre avec un poids de police: 100 (plus lisse, moderne, etc.)
La première chose à retenir est que l'utilisation de font-weight: 100; en HTML ne crée pas réellement une police plus claire . Le poids doit être dans la police. La plupart des polices standard sont disponibles en 2 poids (4 styles): Regular, Italic, Bold et Bold Italic. En HTML, c'est font-weight: 400 et font-weight: 700. Si la police à laquelle vous essayez d'appliquer un poids de police différent n'a pas ce poids, le navigateur va essayer d'approximer à quoi il ressemble pourrait. Et cela pourrait se tromper. Et selon les systèmes d'exploitation et même les navigateurs, cela pourrait sembler assez différent.
Il y a tellement d'excellents services de fonderie de type Web qui offrent aujourd'hui des types de poids multiples, j'examinerais cela.
La règle générale que j'utilise avec les poids de type est la suivante: plus le type est grand et court (c'est-à-dire les titres), plus il est facile d'utiliser des poids plus légers. Plus le type est long et petit, mieux il est préférable d'utiliser des poids réguliers et d'utiliser des poids plus lourds pour mettre l'accent. Cette approche est également conforme aux études qui montrent les gens ne lisent pas, ils numérisent des copies en ligne.
La réponse de Hynes est excellente, je veux juste ajouter quelque chose.
Accessibilité
Les directives d'accessibilité des WCAG 2.0 pour le Web contiennent certaines spécifications que vous devez suivre pour que votre site Web soit entièrement accessible aux personnes ayant un certain nombre de handicaps. L'une de ces spécifications concerne le contraste de couleur de la police par rapport à sa couleur d'arrière-plan: Détails complets ici
La règle stipule:
1.4.3 Contraste (minimum): La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1, à l'exception des éléments suivants: (Niveau AA)
- Grand texte: le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d'au moins 3: 1;
- Incident: le texte ou les images de texte qui font partie d'un composant d'interface utilisateur inactif, qui sont de la décoration pure, qui ne sont visibles par personne, ou qui font partie d'une image qui contient un autre contenu visuel important, n'ont aucune exigence de contraste.
- Logotypes: le texte faisant partie d'un logo ou d'une marque n'a pas d'exigence de contraste minimum.
(c'est moi qui souligne)
La police à grande échelle est définie comme une police de 18 pt ou une police en gras de 14 pt .
Cela signifie qu'une police 14 pt en gras a essentiellement la même lisibilité qu'une police standard 18 pt. Dans le même lien, W3 dit:
Le texte plus volumineux et doté de traits de caractères plus larges est plus facile à lire avec un contraste plus faible. Le contraste requis pour un texte plus grand est donc plus faible. Cela permet aux auteurs d'utiliser un plus large éventail de choix de couleurs pour le texte volumineux, ce qui est utile pour la conception des pages, en particulier des titres.
Gardez à l'esprit que dans différents moteurs de rendu, le résultat sera différent.
Dans cet environnement, le résultat est clairement différent de votre résultat.