5 astuces de police et de texte faciles pour moderniser votre site Web

juin
26, 2020

5 min de lecture

Les opinions exprimées par les contributeurs de Entrepreneur sont les leurs.

Les polices et les tailles de texte sont des fonctions négligées sur de nombreux sites Web . Les paramètres par défaut sur les plates-formes CMS comme WordPress et Wix sont de 14 pixels (px) et à simple espacement. Certains thèmes premium ont des polices personnalisées, bien qu'ils soient presque toujours trop petits. Mais en modifiant la taille du texte, l'espacement et la famille de polices de votre site, vous pouvez augmenter le temps de votre utilisateur sur le site, les pages vues et la lisibilité – ce qui entraîne tous des taux de rebond plus bas et des classements de moteur de recherche plus élevés.

Voici cinq façons d'améliorer la lisibilité et le classement de votre site en mettant à jour l'apparence de votre contenu.

1. Taille du texte

Bien qu'il n'y ait pas de taille de police magique, Google peut dévaluer votre site Web si vous utilisez des tailles de police inférieures à 12 pixels. De plus en plus, Google valorise la convivialité et l'expérience utilisateur, et si vous devez pincer le zoom d'un site Web pour le lire, c'est tout sauf convivial.

Une taille de police de 12 pixels est acceptable et est une valeur par défaut courante pour les logiciels de messagerie et de document comme Word. Les pages Web, cependant, bénéficient de tailles de police plus grandes, comme 18 pixels ou même 20 pixels.

Avant que vous ou votre développeur ne commenciez à vous amuser avec les tailles de police sur votre site Web en direct, il est important de s’assurer qu’il s’affiche bien. Il n'y a pas de moyen plus simple de tester les changements de taille de police sur votre site Web qu'en appuyant simplement sur ctrl et + sur un PC Windows ou sur la commande et + sur un Mac pour effectuer un zoom avant. Pour effectuer un zoom arrière out, appuyez sur ctrl et – ou commande et -.

Vous constaterez que le contenu de votre site Web peut sembler bon, et peut-être meilleur, à 110%, voire 125%. Si tel est le cas, demandez à votre développeur de modifier la taille de la police à 125% de l'original. Si l'original est 14px, 125 pour cent serait 17,5px, par exemple, qui pourrait être arrondi vers le bas ou vers le haut avec des modifications mineures.

Exemple de taille de texte:

L'image suivante illustre l'utilisation du navigateur fonction de zoom sur une page Wikipedia sur Google.

Connexe: Comment rendre votre site Web de petite entreprise vraiment, vraiment efficace [19659005] 2. Tailles de texte pour les appareils mobiles

Étant donné que les appareils mobiles offrent beaucoup moins d'espace d'écran, vos tailles de police doivent être adaptées aux mobiles. Pour un contenu régulier sous forme de paragraphe, ma recommandation de 18px à 20px pour un site Web fonctionnera sur n'importe quel appareil, d'un ordinateur de bureau à un téléphone portable. Mais pour les en-têtes sur le site Web True Blue, nous allons parfois grand – dans certains cas 40px à 50px, ou même plus. Si vous procédez ainsi, vous devrez le réduire pour les appareils mobiles, sinon votre lisibilité en souffrira. Il en va de même pour les petites polices. Peut-être que votre formulaire de site Web affiche une petite étiquette au-dessus du champ avec une taille de police de 12 pixels. Sur un appareil mobile, cela pourrait être beaucoup trop petit pour être lu, en particulier pour les personnes âgées.

Exemple de site Web adapté aux mobiles ou non adapté aux mobiles:

3. Famille de texte / police

La lisibilité est un must, mais cela ne signifie pas que vous êtes limité à utiliser des familles de police telles que Arial, Helvetica ou Times New Roman. Bien que ce ne soit peut-être pas la meilleure idée d'utiliser votre police préférée personnelle sur votre site Web, comme Comic Sans (yikes!), Il existe des tonnes de superbes polices servies dans le cloud facilement disponibles, gratuitement.

Des polices comme Roboto ou Open Sans sont devenues très populaires. L'utilisation d'une police différente comme l'une d'elles aide votre site Web et votre marque à se démarquer un peu de la concurrence. Et, lorsqu'elle est utilisée correctement, une police non typique peut améliorer l'esthétique globale et la lisibilité de votre site Web. Voici un fait intéressant: Roboto a été créé par Google pour être la police principale des appareils Android. Bien qu'elle ait reçu de nombreuses critiques lors de la première version, la police a depuis été utilisée par plus de 40 millions de sites Web.

Related: Cette application vous permet de créer un site Web entièrement fonctionnel dans Secondes

4. Couleur et contraste du texte

Pour être lisible, la couleur de vos polices doit être claire et fournir un contraste suffisant. Beaucoup de sites Web le jouent en toute sécurité et vont avec un fond blanc et une police noire. Mais ce n'est pas idéal.

De nombreuses personnes souffrent d'une affection appelée syndrome d'Irlen qui entraîne des difficultés de traitement des informations visuelles, notamment la sensibilité au contraste. Lorsque vous avez une sensibilité au contraste, le texte noir sur fond blanc ressemble à ceci:

Ce texte rouge sur fond bleu n'est pas très lisible, n'est-ce pas? Il est important de trouver un terrain d'entente. Sur un fond blanc, une valeur sûre pour la couleur de la police est une nuance de gris foncé, comme # 30303a. Ce code hexadécimal est la couleur spécifique de la police que nous utilisons sur notre site Web, True Blue Life Insurance.

5. Espacement du texte

Appliquez un espacement approprié sur tous les éléments de votre site Web en utilisant des marges et des remplissages. Ce sont les espaces blancs sous un en-tête, par exemple, ou l'espace blanc au-dessus et en dessous des éléments de menu dans un en-tête.

Avec l'espacement entre les éléments, la hauteur de ligne, une propriété CSS qui détermine la quantité d'espace blanc entre chaque ligne de texte dans un paragraphe, est également important.

Exemple de hauteur de ligne:

Comme pour la taille du texte, il n'y a pas de nombre magique pour la hauteur de ligne, mais je trouve qu'une valeur de 1,5em ou 150 pour cent est idéal. Jetez un œil au graphique suivant qui illustre l'impact de la hauteur de ligne sur la lisibilité.

Astuce bonus:

Le meilleur contenu est le contenu que vous pouvez lire. Tout le monde n'a pas une vue parfaite. Permettons à nos clients de lire facilement notre contenu sans avoir à plisser les yeux. Prenez le temps de tester la famille de polices, la taille du texte et l'espacement de votre site Web. En mettant en œuvre ces recommandations, les statistiques des utilisateurs de votre site Web et les classements des moteurs de recherche augmenteront.

Related: Élargissez votre image de marque avec ces polices de monotype