Réflexions sur le webdesign, les nouvelles technologies, la vie ...

Sérif VS Sans Sérif, que fait la Police

1247424432_preferences-desktop-fontRécemment, j’ai vu un blog changé toute sa police Arial en Georgia. Figure de style ou juste suiveur de tendance, je pense que le débat est un peu plus graphique. Pour ma part, je pense que les polices sérif sont excellentes dans un contexte de TITRE. Dans les paragraphes, quand le contenu du site est clairement axé magasine, ou pour le site d’un journal, bref quand la relation avec la presse est évidente.

Les polices de caractères avec sérif se remarquent grâce à leur base plus marquée, renforcée par les « pieds » des caractères. L’œil peut donc se déplacer horizontalement.

1] Combiner les polices de caractères

Sans sérif et sérif peuvent être combinés sur une même page. Quand on combine plusieurs polices de caractères, il est important de décider à l’avance comment elles vont s’intégrer, s’harmoniser ou contraster. En général, il ne faut pas utiliser plus de deux polices de caractères sur une même page, pour garder une cohérence et ne pas « gêner » la lecture. Une excellente typographie est invisible et elle n’entrave ni la lecture, ni l’information. Un surplus de polices de caractères sur une même page distrait le lecteur, crée une intrusion visuelle qui casse le rythme de lecture.

2/ Considérer la qualité de l’affichage

La qualité de l’affichage varie énormément : affichage sur un portable 15# 1024×780, 22# en 1680×1050, etc… Dans le choix de la police de caractères, de sa taille, de ses variations, il faut prendre en compte le média de parution final et son effet sur la lisibilité. L’italique généralement gênante sur les écrans, peut être très lisible sur support papier. A l’inverse, avec une mauvaise qualité d\’impression, les petites sérifs peuvent être illisible sur papier, ou les très petites lettres en gras peuvent ressortirent pleines.

3/ Espacement des lettres

Quand les lettres sont rapprochées elles sont moins lisibles. Quand les lettres sont trop espacées, le regroupement des lettres et leur compréhension devient difficile. L’espacement varie en fonction des lettres qui l’encadre. L’espacement optimal n’est pas mesurable, il doit être au moins égal à un pixel ou à la largeur du trait du caractère.

4/ Espacement des mots

De même pour les mots quand ils sont trop proches, ils sont difficiles à distinguer les un des autres, et donc sont moins lisibles. Idem quand ils sont trop espacés. Quand l’espace est plus grand entre les mots qu’entre les lignes, l’œil du lecteur se dirige vers le bas de la page au lieu de parcourir la ligne.Pour une bonne lecture, il est très courant et conseillé d’utiliser l’attribut « letter-spacing » en CSS, surtout sur le web.

5/ Espacements des lignes

L’espace entre les lignes du texte doit être proportionnel à la taille des caractères. Les ascendants d’une ligne et les descendants de la ligne précédente ne doivent pas se toucher. Il faut donc au minimum deux pixels entre chaque ligne. Il est conseillé d’utiliser l’attribut « line-height » pour espacer les lignes. On peut aussi améliorer la lisibilité en augmentant l’espace entre les lignes en fonction de la largeur de la colonne.

6/ Longueur des lignes

La longueur correcte d’une ligne est celle permettant à l’œil de passer facilement d’une ligne à l’autre sans confusion et de continuer à lire les lignes suivantes. Pour une page affichée sur un écran, il est conseillé de faire des lignes de 60 à 80 caractères maximum.

7/ Justifié ou aligné à gauche

Traditionnellement, les textes sont présentés justifiés en particulier dans la presse écrite car cela permet au regard de glisser sur la page pour ne s’arrêter que sur les titres. Mais une colonne justifiée peut avoir des espaces inégaux entre les mots, créer des « rivières » ou des espaces blancs verticaux à l’intérieur des paragraphes. Les « rivières » font que l’œil se déplace vers le bas de la page au lieu de continuer sur la ligne. De plus une colonne justifiée à un contour rectangulaire qui ne permet pas au lecteur d’utiliser les bords pour se repérer facilement d’une ligne à l’autre. Si les colonnes doivent être justifiées, il faut mieux qu’elles soient relativement larges, car plus elles sont courtes plus les espaces risquent d’être déformés.

8/ Contraster une police

Accentuer une police permet de faire ressortir un mot ou un passage important dans un texte. Il y a trois manières de base pour accentuer une police :

  • Gras ou italique + gras
  • Italique : l’italique étant plus difficile à lire, il est conseillé d’augmenter la taille pour les passages longs
  • MAJUSCULE : l’utilisation des majuscules pour souligner n’est pas habituellement une bonne idée, car les mots en majuscule forment un ensemble qui a pour conséquence de rendre plus difficile pour l’œil la différentiation entre les groupes de lettres

9/ Polices de caractère décoratives

Les polices décoratives ont un graphisme particulier qui s’ajoute à la forme de la lettre. Elles doivent être utilisées avec précaution. Ces polices transmettent un message, un style ou une idée dans leurs formes. Il faut donc que ce message soit bien celui que l’on veut faire passer avec le texte. De plus, leurs formes particulières les rendent beaucoup moins lisibles.

10/ Blanc sur noir ou noir sur blanc : contraste positif ou négatif

Le blanc sur noir est moins lisible que le noir sur blanc. Pour une même taille, les lettres blanches apparaissent plus petites que celles qui sont en noires. Il est donc préférable d’utiliser un contraste positif ce qui diminue également les problèmes de reflet sur les écrans. De même que les contrastes trop accentués type : fond bleu / texte rose, sont à bannir dans un contexte d’article ou de long paragraphe, pour des besoins de visibilité.

Exemples de polices :
- sans sérif : http://www.dafont.com/fr/
- avec sérif : http://www.dafont.com/fr/

Pas de commentaire pour “Sérif VS Sans Sérif, que fait la Police”

Ajouter un commentaire

Combien font 5 + 6 ?
Please leave these two fields as-is: