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

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

juin
26, 2020

5 min de lecture

Opinions exprimées par Entrepreneur les contributeurs sont les leurs.


Les et les tailles de texte sont des fonctionnalités négligées sur de nombreux sites Web. Les paramètres par défaut sur les plates-formes CMS comme et Wix sont de 14 pixels (px) et à simple espacement. Certains thèmes premium ont des personnalisées, bien qu’ils soient presque toujours trop petits. Mais en modifiant la taille du texte, l’espacement et la famille de 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.

Vous trouverez ci-dessous cinq façons d’améliorer la lisibilité et le classement de votre site Web 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 apprécie la convivialité et l’expérience utilisateur, et si vous devez pincer-zoomer un site Web pour le lire, c’est tout sauf convivial.

Une taille de police de 12 pixels est acceptable et constitue une valeur par défaut courante pour les logiciels de messagerie et de documents tels que 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 vous assurer qu’il a l’air 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 commande et + sur un Mac, pour effectuer un zoom avant. Pour effectuer un zoom arrière, 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 de 14px, 125% serait de 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 de la fonction de zoom du navigateur sur une page Wikipedia sur Google.

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

Connexes: Comment rendre votre site Web de petite entreprise vraiment, vraiment efficace

2. Tailles de texte pour les appareils mobiles

Étant donné que les appareils mobiles offrent beaucoup moins 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 . 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 et non adapté aux mobiles:

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

3. Famille de texte / police

La lisibilité est un must, mais cela ne signifie pas que vous êtes limité à utiliser des familles de 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 servies dans le cloud facilement disponibles, gratuitement.

Des 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 beaucoup de critiques lors de la première sortie, la police a depuis été utilisée par plus de 40 millions de sites Web.

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

Connexe: Cette application vous permet de créer un site Web entièrement fonctionnel en quelques secondes

4. Couleur et contraste du texte

Pour être lisible, la couleur de vos 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 maladie 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:

WordPress: 5 astuces de police et de texte faciles pour moderniser votre site Web
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 rembourrages. Il s’agit par exemple des espaces blancs sous un en-tête ou des espaces blancs au-dessus et en dessous des éléments de menu dans un en-tête.

Outre 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 d’un paragraphe, est tout aussi importante.

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,5 em ou 150% est idéale. Jetez un œil au graphique suivant qui illustre l’impact de la hauteur de ligne sur la lisibilité.

WordPress: 5 astuces de police et de texte faciles pour moderniser votre site Web
Astuce bonus:

Le meilleur contenu est un 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 , 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.

En relation: élargissez votre image de marque avec ces de Monotype

chargement…

.

All the CMS Templates You Could Ask For.

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

2M+ items from the worlds largest marketplace for CMS TemplatesEnvato Market.



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

#astuces #police #texte #faciles #pour #moderniser #votre #site #Web