Rechercher
  • Des usages à la conception et autres
  • digressions autour de l'expérience utilisateur.
Rechercher Menu

Discussion autour de la typographie.

Petite discussion concernant la typographie et les choix qui peuvent être faits sur le sujet.

Sérif versus sans sérif.

Les polices de caractères avec sérif ont une ligne de base plus marquée renforcée par les « pieds » des caractères. Ceci aide l’oeil du lecteur à se déplacer horizontalement. Sans sérif et sérif peuvent être combinés sur une même page

  • sérif est souvent plus facile à lire dans le corps du texte.
  • sans sérif peut être utilisé pour créer un contraste.
  • la résolution et la couleur influencent ces choix.

Combiner les polices de caractères.

Quand on combine plusieurs polices de caractères, il est important de décider à l’avance comment elles vont 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. 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 ralentit le processus de lecture.

Contraster par l’engraissement.

Combiner des polices avec différents engraissements peut créer un contraste très pratique. Par exemple entre un Helvetica gras et un Times normal. Mais attention, certaine police avec des engraissements différents peuvent apporter trop de contraste ou une trop grande complexité visuelle.

Considérer la qualité de l’affichage.

La qualité de la publication ou de l’affichage varie énormément : Imprimante laser, vidéo, écran, télévision, etc… Donc 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 illisible sur les écrans informatiques mais peut être très lisible sur support papier. Avec une mauvaise qualité de sortie, les sérifs des petites polices de caractères peuvent disparaître ou les très petites lettres en gras peuvent être pleines.

Espacement des lettres.

Quand les lettres sont trop près, elles sont difficiles à distinguer les unes des autres, et donc sont moins lisibles. Quand les lettres sont trop espacées, le regroupement des lettres devient difficile pour l’oeil. 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.

Espacement des mots.

Quand les mots sont trop proches, ils sont difficiles à distinguer les un des autres, et donc sont moins lisibles. Quand les mots sont trop espacés, le regroupement des mots devient plus difficile pour l’oeil. Quand l’espace est plus grand entre les mots qu’entre les lignes, l’oeil du lecteur se dirige vers le bas de la page au lieu de parcourir la ligne.

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 moins deux pixels entre chaque ligne. On peut aussi améliorer la lisibilité en augmentant l’espace entre les lignes en fonction de la largeur de la colonne.

Longueur des lignes, largeur de colonnes.

La longueur correcte d’une ligne est celle permettant à l’oeil 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.

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’oeil 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.

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 EXTRA gras.
  • Italique : l’italique étant plus difficile à lire, il est déconseillé sur les écrans ou 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 rectangle ce qui a pour conséquence de rendre plus difficile pour l’oeil la différentiation entre les groupes de lettres.

Polices de caractère décoratives.

Les polices décoratives ont un graphisme particulier qui s’ajoute à la forme de la lettre. Par exemples :

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.

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.

Lisibilité versus Visibilité.

La visibilité est bonne si dans une page, on peut trouver ce que l’on cherche. La lisibilité est bonne si on peut lire facilement le texte. La visibilité dépend donc de la mise en forme et du design de la page. Une bonne utilisation de la typographie la rend lisible. La lisibilité est déterminée par :

  • la police de caractères
  • la qualité de l’affichage
  • la longueur des lignes
  • l’espace entre les lettres, les mots et les lignes
  • la justification ou l’alignement à gauche
  • la couleur
  • le mouvement

Auteur :

Lead UX designer en Freelance depuis le dernier millénaire ! J'aide à concevoir des services, des applications en étant centré sur l'utilisateur et ses usages.


Warning: Undefined array key "share-pages" in /home/clients/8d92eb93db207cb7c6158a9c725c2336/web/blocnotes/wp-content/themes/dorayakichild/footer.php on line 77