La typographie sur le web

Bonne Année 2019 à vous tous ! Toute l'équipe de Com'Arte vous souhaite ses meilleurs voeux.

La typographie est un élément essentiel dans l’identité graphique d’une marque, sur le web c’est la même chose, elle a une place importante dans le webdesign. Mais la typographie sur le web s’avère plus compliquée à gérer.

lecture sur écran

La lecture sur un écran

Pour bien gérer la typographie sur le web, il faut d’abord comprendre comment se comporte votre lecteur sur une page web. La lecture sur un écran est différente de celle sur le papier.

D’abord, l’écran, par ses caractéristiques propres, comme les reflets, la brillance, la taille de l’écran, rendent la lecture plus difficile et fatiguent plus vite les yeux de votre lecteur que sur un support papier.

Ensuite, la lecture est plus longue sur un écran. En moyenne, un adulte va lire environ 220 mots par minutes. Sur un écran, il mettra 6% plus de temps pour lire la même quantité de mot.

Pour finir, si sur papier la lecture se fait en forme de Z, sur l’écran, elle est plus linéaire, en forme de E. Sur une page web, le lecteur balaie d’abord les premiers mots du texte avant de se lancer dans la lecture. Si vos premiers mots ne l’ont pas convaincu, il passe à autre chose.

C’est pour ces raisons que vous devez faciliter la lecture de vos textes sur les écrans ! Et l’élément essentiel pour une lecture facile, c’est la TY-PO-GRA-PHIE !

typographie machine à écrire

Les éléments essentiels de la typographie

La typographie est votre alliée pour travailler la lisibilité de vos textes sur le web. Et contrairement à ce que l’on pense, la typographie ce n’est pas juste la police utilisée. La typographie regroupe 4 catégories majeures :

1- La taille des caractères

La taille des caractères d’un texte est essentielle. Cet élément est primordial car il permet d’optimiser la lisibilité. Il ne faut pas oublier que l’oeil n’est pas habitué à lire sur un écran, il faut donc lui faciliter la tâche. Il vous faut alors choisir un corps de texte suffisamment élevé pour que lecteur n’ait pas à forcer sur ses yeux. Ainsi, on évite de descendre sous les 10px, même pour les légendes.

Retenez qu’une taille de 16px sur un écran équivaut à une taille de 11pt sur le papier ! Basez-vous sur cette comparaison pour comprendre la difficulté de la lecture sur le web. D’ailleurs, le 16px est le corps de défaut pour un paragraphe sur un navigateur. Pourtant, dans la majorité des cas, on a tendance à réduire cette valeur, et c’est un mauvais réflexe !

 

2- La justification des textes

La justification est, en fait, la longueur des lignes. On connait tous les textes justifiés où les lignes ont toutes la même longueur. Si vous êtes observateur, vous verrez que peu de site web opte pour des textes justifiés. Vous vous demandez pourquoi ? Déjà, la justification automatique est mal gérée par le web ensuite la CSS a essayé d’arranger ça, en vain. Pour finir, certaines études ont montré que les textes justifiés sont moins lisibles sur un écran. Voilà la recette pour faire disparaître les textes justifiés du web !

Mais si les textes ne sont pas justifiés, la justification existe quand même ! Et vous avez le choix entre petite et grande justification.

Justification de texte
https://buzut.fr/une-histoire-de-polices/#visual

Il faut bien gérer vos justifications pour rendre votre lecture lisible et agréable. Une trop grande justification peut perdre le lecteur en allongeant de trop le rythme de lecture, rendant le texte plus mou. Des justifications très petites ne sont pas agréables pour l’oeil, elles coupent la lecture. Les petites justifications doivent être réservée aux textes très courts comme les légendes ou les apartés. Le mieux est une justification qui affiche entre 50 et 75 signes par ligne.

3- LES INTERLIGNES

L’interligne est l’espace entre les lignes de votre texte. Elle est essentielle pour que votre texte soit lisible et agréable. La taille de votre interligne est fixée selon la taille de vos caractères (définie dans le 1 si vous avez bien lu), et la justification choisie (c’est le 2, vous suivez jusque là ?). Si vos caractères sont gros et votre justification longue, il faudra aérer avec un interlignage important, vice-versa. Les petites interlignes sont difficiles à lire, notamment sur les petits écrans comme les smartphones, alors n’en abusez pas !

interligne texe
https://buzut.fr/une-histoire-de-polices/#visual

Optez pour une interligne assez élevée de manière générale. Ne descendez pas sous les 1.2, le mieux est de rester dans la fourchette des 1.3 à 1.6. Enfin, tout dépendra de votre police (ça c’est le point 4, on y arrive ! ). Ça a l’air d’être du chinois, mais si vous mettez la main à la pâte, vous allez vite comprendre, promis.

 

 

4- Les polices

Arial, Helvetica, Times sont des polices d’écriture, c’est à dire des polices qui rassemblent l’ensemble des fontes de caractères de la même famille : Arial Bold Italic, Arial Bold, Arial Light font partis de la police Arial.

Les polices se séparent en 3 grandes familles : les polices avec sérif, les polices sans sérif et les polices manuscrites

Les polices avec sérif

H avec sérif

Appelées aussi polices à empâtements, les polices avec sérif donneront un aspect plus formel à votre texte. Elles sont symboles de tradition et de chic. D’un autre côté, elles symbolisent aussi l’autorité, alors elles sont à utiliser avec parcimonie.

Attention cependant, elles ont la réputation d’être difficile à lire sur un écran. Evitez donc les utiliser sur de trop longs textes.

 

Les polices sans sérif

H sans sérif

Les polices sans empâtements sont le symbole par excellence de la modernité. Simples et efficaces, elles créent une ambiance détendue et informelle.

Sur l’écran, elles sont très agréables à lire. Privilégiez ces polices là ! Vous simplifierez vos textes, ils seront plus aérés et plus agréables. Vos lecteurs vous remercieront !

 

Les polices manuscrites

H manuscrit

Les polices qui imitent l’écriture à la main sont très esthétiques. Elles sont le symbole du raffinement. Rappelant les signatures, elles invoquent dans les esprits la confidentialité, la préciosité.

Malheureusement, elles sont difficiles à lire sur un écran. Alors, il est hors de question de rédiger tout un paragraphe avec ces polices là. Cependant, elles peuvent être très design pour vos titres par exemple !

 

 

Vous pouvez bien entendu combiner ces différentes types de polices mais vous devez veiller à être cohérent pour que le texte reste agréable. Essayez d’avoir des polices avec la hauteur de la lettre minuscule x semblables, cela permettra d’uniformiser vos textes et cela donnera de la cohérence. Des polices cohérentes permettent de ne pas gâcher les 3 premiers éléments essentiels : taille, justification et interligne.

 

Parce que la typographie n’est qu’un élément du webdesign, allez jeter un oeil aux tendances 2019 en webdesign !

check it out grace helbig GIF by This Might Get

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *