Do's & Don'ts de la Typographie

L'essentiel du contenu disponible sur le web est du texte, il est donc fondamental de comprendre les principes de base d'une bonne typographie. Un rappel en illustrations par Sam Jones.

Par

L’essentiel du contenu disponible sur le web est du texte, il est donc fondamental de comprendre les principes de base de toute bonne typographie. Cette connaissance permet aux designers de communiquer plus efficacement, de créer de meilleurs sites web, plus faciles à utiliser.

Pour les designers expérimentés, la mise en forme du texte peut paraître naturelle, mais pour ceux qui commencent dans ce domaine, j’ai dressé une liste des choses à faire (Do’s) et à ne pas faire (Don’ts). Ce sera un bon outil pour apprendre, mais aussi une checklist à garder sous le coude pour vos futurs projets. Allons-y !

DO: établir une hiérarchie typographique

On peut établir une hiérarchie typographique par divers moyens, que ce soit la taille de la police (font-size), sa graisse (font-weight), la couleur et le contraste. Son but est donner une structure à la page et de guider l’utilisateur à travers le contenu. Notre regard parcourt rapidement un texte tel un scan pour en comprendre la structure, et sans une claire hiérarchie, le texte devient beaucoup plus difficile à scanner et donc à lire. Dans l’exemple ci-dessous, le texte de gauche est établi dans une taille et une graisse uniques, du coup on fait difficilement la distinction entre le titre et le corps du texte. Le même texte à droite fait apparaître une hiérarchie typographique claire qui rend aisée la distinction entre ses différents composants. Ici, je n’ai utilisé que la taille et la graisse pour établir une hiérarchie, mais vous pouvez aussi expérimenter la couleur et le contraste.
Un texte sans hiérarchie claire


DON’T: N’utilisez pas un texte trop petit

Tout le monde n’a pas 12/10 chez l’ophtalmo, il faut vous assurer que votre texte est suffisamment grand pour pouvoir être lu confortablement. Personnellement je recommanderais de ne pas descendre en-dessous de 14pt (1).
Un texte écrit trop petit


DO: Choisissez une police appropriée pour le corps du texte

C’est un autre facteur important pour la lisibilité de votre texte. Une police de caractères comme Satisfy pourrait être en accord avec l’esthétique de votre site, mais son utilisation pour le corps de votre texte aura un impact négatif sur vos utilisateurs parce qu’elle est beaucoup plus difficile à lire que votre police sérif ou sans-sérif habituelle. Regardez les exemples ci-dessous et vous remarquerez que la lecture du texte de gauche vous demande plus d’effort que celle du texte de droite.
Satisfy, une police fantaisiste à gauche, et PT Sans une police lisible à droite


DON’T: n’utilisez pas trop de polices dans une même page

Ce n’est pas parce que des services comme Typekit ou Google Fonts vous donnent accès à des milliers de polices que vous devez les utiliser sans discernement. Comme le montre l’exemple suivant, si elle n’est pas réalisée à bon escient l’utilisation de polices multiples peut brouiller un message. Je recommande habituellement de ne pas en utiliser plus de 2 ou 3.
L’abus de polices nuit à votre santé


DO: faites respirer votre texte

L’absence d’espace entre les lignes de votre texte affecte sa lisibilité car le parcours de vos yeux d’une ligne à l’autre est plus difficile. Ce problème est aisément résolu en augmentant la hauteur de ligne (line-height), mais attention à ne pas exagérer car trop d’espace entre les lignes complique également la lecture.
à gauche une hauteur de ligne de 20pt contre 24pt à droite


DON’T: n’utilisez pas les majuscules en continu

Nous ne sommes pas habitués à lire de longs morceaux de textes en lettres capitales, c’est en réalité plus difficile à lire qu’un texte en bas de casse. De plus, un texte tout en lettres capitales a une connotation agressive ou bruyante (QUELQU’UN QUI CRIE !) et si vous l’utilisez dans un email il sera considéré comme un spam. Il est donc important de bien considérer comment et quand vous utilisez les mots en lettres capitales et de ne le faire qu’avec modération.
exemple de texte en majuscule, ’est agressif


DO: Essayez de limiter vos paragraphes à 40-60 caractères par ligne

Si une ligne est trop longue, le lecteur perd progressivement sa concentration et peut avoir des difficultés à passer d’une ligne à l’autre. Si elle est trop courte, l’oeil fait des allers-retours trop fréquents ce qui crée un mauvais rythme. Le lecteur peut aussi commencer à lire la ligne suivante trop tôt et perdre des mots en cours de route. C’est pour cela que l’on considère que la longueur de ligne optimale se situe entre 40 et 60 caractères par ligne. (2)
une ligne trop longue est difficile à lire


DON’T: n’utilisez pas trop de textes centrés

Un texte centré est difficile à lire parce que les bords de chaque ligne sont inégaux et du coup plus compliqués à scanner par l’oeil car chaque ligne commence à un endroit différent. Les blocs de texte centré sont également plus compliqués à aligner avec d’autres objets dans la page et sont souvent considérés un peu amateurs. Tout comme les textes en lettres capitales, il faut donc les utiliser avec modération et choisir plutôt le texte aligné à gauche comme votre standard.
un texte centré, c’est cheap


DO: assurez-vous d’avoir un contraste suffisant entre texte et background

Le contraste est un aspect de la typographie qui affecte la lisibilité. S’il n’y a pas suffisamment de contraste entre votre texte et le background, le contenu peut devenir illisible.
le contraste aide l’accessibilité


NdT:

(1) 14pt correspondent à 19px. On voit souvent recommandé 16px comme taille idéale, parfois 18px. Cela dépend aussi de la police, certaines polices ne deviennent réellement lisibles que vers 20-24px. En tout cas, ne descendez jamais en-deçà de 14px !
(Retour à l’article)

(2) D’autres auteurs considèrent plutôt la fourchette 45-75 voire 45-90 comme la longueur idéale du texte par ligne.
(Retour à l’article)


Intéressé par la typographie ? Sur la Cascade vous pouvez retrouver beaucoup d’autres articles et ressources sur la typographie.


original paru le dans Webdesigner Depot.

Sur l’auteur : est designer freelance, ses domaines d’activité sont le Brand Identity, le design et les illustrations web, le design pour l’impression. Il a son propre studio de design, Silvioco, et est conseiller pour Mostash. Vous pouvez le suivre sur Twitter.

Traduit avec l’aimable permission de Webdesigner Depot et de l’auteur.
Copyright Webdesigner Depot 2013.