La lisibilité sur le web et donc la typographie est l’un des éléments clés dans la conception de votre site web, car elle joue un rôle très important dans la communication de vos produits ou services. Explications !

Pourquoi la typographie web est-elle importante ?

Le contenu d’Internet est essentiellement composé de texte et d’images, il est donc essentiel de maintenir de bonnes pratiques lors du choix d’une police et de structurer correctement le texte pour transmettre l’information de manière claire et concise à l’utilisateur.

N’oubliez pas que le texte est le principal moyen de communication en ligne. Et personne n’achète un produit ou un service sans avoir lu un minimum. Un bon choix de typographie facilitera la lecture, tandis qu’une typographie inadéquate déconnectera l’utilisateur et lui enlèvera l’envie de lire très vite. En optimisant la typographie, vous améliorez la convivialité, l’accessibilité, la lisibilité et l’expérience utilisateur globale.

Comment choisir la meilleure typographie pour votre site web ?

Le choix de la police peut être compliqué, car il y a un large éventail de possibilités et de facteurs à prendre en compte. Il n’y a pas de règle exacte à suivre, mais il existe une série de bonnes pratiques que vous pouvez au moins appliquer pour rendre votre contenu facile et confortable à lire.

Cet article a pour but de vous aider à améliorer la lisibilité de vos textes et aussi de choisir la police idéale pour ce blog ou site web que vous démarrez.

Limitez le nombre de polices au minimum

Ne vous compliquez pas la vie, utilisez au maximum un ou deux types de polices et jouez avec les différents styles. La plupart des polices actuelles ont plusieurs styles, je veux dire l’épaisseur ou le poids de la police. Ce qui est en gras et en italique. Utilisez le poids de la police pour mettre en évidence certains mots, titres, boutons, etc.

👌 SEO tip : L’utilisation d’une seule typographie réduit le nombre de requêtes faites par votre site web, ce qui en améliore la vitesse de chargement.

Choisissez des polices complémentaires

Choisissez des polices standard reconnaissables par tous les navigateurs tels que Google Fonts, conçues et optimisées pour la lecture à l’écran et faciles à implémenter sur le web en utilisant du code HTML et CSS. Les polices sont hébergées directement sur le serveur de Google pour alléger notre site et sont continuellement mises à jour vers leur dernière version.

Beaucoup de leurs polices sont déjà implémentées dans des thèmes WordPress afin que vous puissiez choisir celle qui vous plaît le plus. Vous devez identifier ce que que vous souhaitez transmettre à travers votre site web et choisir la typographie en fonction de celui-ci.

Si vous choisissez d’utiliser plus d’une police, assurez-vous qu’elles se complètent. Chaque caractère véhicule une personnalité ou un état différent :

• élégant,
• décontracté,
• enfantin,
• sérieux,
• moderne,
• futuriste,
• etc.

Comme il n’est pas facile de combiner les typographies, je vais vous laisser quelques outils et astuces pour vous faciliter la tâche.

Outils pour choisir des polices complémentaires

• Si vous saisissez un fichier de typographie Google Fonts https://fonts.google.com/, vous trouverez une description de son origine et du but pour lequel il a été créé. Avec ces informations, vous pouvez vous faire une idée si cette typographie correspond à votre site Web. Une autre bonne chose à propos de Google Fonts est qu’il vous montre les polices complémentaires les plus populaires. De plus, il vous permet d’avoir un aperçu de ce à quoi il ressemblerait avec toutes ses variantes.
• Fontpair.co est un site web où il y a quelques très bonnes combinaisons organisées par type de police : Sans-Serif, Serif, Display, Monospace, etc.

Comment choisir la bonne taille de police pour le web

La taille de la typographie de votre web a beaucoup d’importance dans la lecture. Trop peu de texte signifie que l’utilisateur doit se concentrer davantage et qu’il est plus facile de perdre la ligne sur laquelle vous lisiez. Cela affecte particulièrement les appareils mobiles où l’écran est déjà petit, si vous mettez une petite lettre sur le dessus, éteignez-le et allons-y ! Utiliser un texte trop grand n’est pas bon non plus parce qu’il peut être trop voyant.

Il est également important de prioriser et de dynamiser le contenu pour une lecture plus fluide, vous devez donc définir un guide de style de texte avec les différentes tailles que vous souhaitez utiliser (h1, h2, p…).

Pour définir ces dimensions de manière harmonieuse, on utilise généralement une échelle modulaire. Tout d’abord, choisissez l’échelle (par exemple le nombre d’or 1.618) et multipliez-la par la taille du corps (généralement 16px sur le bureau et 14px sur le mobile) pour obtenir les nombres séquentiels : 16px, 26px, 42px, 68px….

Pour ordinateur de bureau

En général, une taille de police de 16 px est suffisante. En fait, c’est ce que Google recommande. Cependant, cela dépend aussi de la police, car chaque police a une taille différente.

Pour les smartphones

La taille minimale devrait être de 12 px, mais il est recommandé d’avoir au moins 14 ou 16 px. Une fois le corps du texte défini, il est temps de choisir la taille des en-têtes H1, H2, H3….

Pour vous faciliter la tâche, vous pouvez utiliser une astuce qui consiste à régler la taille de la police de façon échelonnée. Choisissez d’abord un rapport, celui qui est normalement utilisé est 1:1.6. Il ne vous reste plus qu’à le multiplier séquentiellement : 16 px (p), 26 px (h3), 42px (h2) 68px (h1). Si vous constatez que vos rubriques sont trop grandes, réduisez le ratio.

Utilisez gridlover.net pour prévisualiser le texte en différentes tailles et voir lequel est le plus beau.

Une autre façon de le faire est de choisir un nombre et d’augmenter la taille de la police proportionnellement. Si vous choisissez d’augmenter la taille de la police de 8 px, vos en-têtes ressembleront à ceci : 16 px (p), 24 px (h3), 32px (h2) 40px (h1). L’important est que vous remarquiez la différence de taille entre les différents en-têtes. Si vous constatez qu’ils sont très similaires, modifiez le ratio.

Sur les téléphones portables, il est conseillé de réduire la taille des en-têtes pour éviter de couper les mots ou de les rendre trop longs en occupant plusieurs lignes.

Alignez le texte vers la gauche

Nous sommes habitués à lire de gauche à droite, aligner le texte vers la gauche facilite la lecture. Pour les yeux, il est facile de trouver le bord de la ligne, ce qui rend la lecture beaucoup plus confortable. Le bord des lignes verticales sert de point de référence lorsque vous terminez la lecture d’une ligne horizontale.

Ne justifiez pas les textes

C’est un sujet qui fait l’objet de beaucoup de discussions, parce qu’il y a encore des gens qui sont déterminés à justifier des textes sur le Web. Voici quelques-unes des raisons pour lesquelles les textes ne sont pas justifiés :

• Il y a des espaces vides qui créent des incohérences dans le texte.
• Il est plus compliqué de suivre les lignes parce que le point de référence est perdu.
• Ils demandent plus d’effort et de concentration.
• Les personnes dyslexiques trouvent cela encore plus difficile.

Les textes sont généralement justifiés sur papier, mais une série de techniques y sont appliquées pour corriger les problèmes mentionnés ci-dessus. Cela n’est pas possible en format numérique, du moins pour le moment.

N’abusez pas des majuscules

Les textes en majuscules conviennent bien dans les contextes qui n’impliquent pas la lecture, mais il est préférable de les éviter si vous voulez que les gens lisent votre contenu. Le texte en majuscules réduit la vitesse de lecture et augmente le niveau de concentration requis. Cela se produit parce que les textes en majuscules deviennent des blocs, visuellement parlant. C’est un effet qui se produit parce que les lettres majuscules sont de forme et de taille similaires.

Vous pouvez utiliser les majuscules pour mettre un mot en surbrillance ou pour les en-têtes ne dépassant pas une ligne (et qui sont courts).

Limitez la largeur des paragraphes

Le fait de ne pas établir une largeur de ligne correcte est l’une des erreurs les plus courantes dans la conception web. Le réglage du nombre correct de caractères par ligne rend la lecture beaucoup plus confortable.

• Si la ligne est trop courte, l’utilisateur devra bouger les yeux trop souvent, perdant ainsi le rythme de la lecture.
• Si la ligne est trop longue, l’utilisateur devra travailler plus fort pour rester concentré sur le texte.

Pour le bureau, un nombre recommandé se situerait entre 60 et 80 caractères. Et pour les mobiles environ 30 – 40 caractères. Pour connaître le nombre de caractères d’une ligne, copiez et collez-les dans cet outil en ligne (qui sert également à optimiser les objectifs).

Attention à certaines polices de caractères

En général, les caractères Sans-Serif ou Serif les plus couramment utilisés ont une bonne lisibilité. Mais soyez prudent lorsque vous utilisez des caractères de script, de l’écriture manuscrite, de l’affichage ou toute autre variante non conventionnelle.

Ce sont des typographies qui peuvent être utilisées pour certains en-têtes ou certains éléments du web, mais qui ne sont pas recommandées pour la lecture de textes.

Utiliser une police de caractères avec des lettres distinctives

Il y a certaines typographies qui ne sont pas très lisibles parce que leurs lettres ne sont pas clairement distinguées. Cela se produit généralement avec le « i » et le « l » minuscules et les lettres majuscules.

Un autre problème avec certaines polices de caractères est le manque d’espacement, qui provoque la « fusion » de certaines lettres.

Essayez d’éviter d’utiliser ces polices sur votre site Web.

Bien ajuster l’interligne

L’espacement ou la hauteur des lignes est un autre facteur dont vous devez tenir compte lorsque vous ajustez la typographie de votre site Web. C’est un facteur important parce que dans la typographie et dans le design web en général les espaces blancs sont la clé pour obtenir une bonne lisibilité. Et la hauteur de la ligne crée exactement cela, un espace blanc entre les lignes.

• Mauvais espacement : il donnera l’impression d’un texte très saturé ou dense et peut même faire chevaucher certaines lettres.
• Bon espacement : améliore la lisibilité et la compréhension du texte. Ne pas être perçu comme un texte dense donne l’impression d’être plus facile à lire.

La clé d’une bonne lisibilité est de bien combiner la taille du texte et l’espacement.

Gardez un bon contraste avec l’arrière-plan

Il faut tenir compte à la fois du contraste de la lettre (les polices légères ou régulières sont généralement plus lisibles que les plus lourdes en gras) et du contraste généré par le paragraphe lui-même avec le fond. Il est nécessaire de rechercher un contraste moyen-élevé entre la couleur du texte et celle de l’arrière-plan pour qu’elles se distinguent parfaitement les unes des autres et soient agréables à lire sans causer de fatigue oculaire. En outre, le contraste est un facteur particulièrement important lors de la conception d’appareils mobiles en raison de la possibilité d’éblouissement.

Cela se produit surtout lorsqu’il y a une image de fond.

• Contraste insuffisant : si la couleur de fond est très similaire au texte, elle sera plus difficile à lire.
• Trop de contraste : il n’est pas bon non plus d’exagérer le contraste ou d’utiliser des couleurs très fortes, sauf si vous voulez faire fondre les rétines 😎
• Selon le W3C, le rapport de contraste entre le texte et l’arrière-plan doit être d’au moins 4,5:1.

Pour calculer le rapport de contraste, utilisez l’outil en ligne suivant : → https://contrast-ratio.com

Il suffit d’entrer les couleurs (fond et texte) et il vous indiquera le contraste entre les deux.

Si le cercle est vert, c’est que vous vous en sortez bien, sinon, vous devez quand même réajuster les couleurs.

Conclusion

De nombreux détails sont à prendre en compte lors du choix de la typographie d’un site web. Optez pour une police simple, utilisez un seul type de police ou tout au plus deux. N’oubliez pas d’ajuster la taille, l’espacement et le contraste. Parce que ce sont aussi des facteurs très importants.