Les polices et la typographie pour les blogues WordPress

Quand je monte un site WordPress pour un client, la typographie est importante. Le client a des goûts spécifiques mais a souvent peu de connaissances sur la typographie des sites Web. Dans cet article, je partage des connaissances sur la typographie des sites Web et plus particulièrement sur celle des blogues WordPress. Pour l'exercice, j'ai choisi les polices les plus populaires pour les sites Web dont: Arial, Georgia, Helvetica, Lucida, Palatino, Tahoma, Times, Trebuchet et Verdana. Quelle est votre police préférée sur le Web?

La typographie dans les blogues WordPress

Toute la typographie des sites WordPress se gère en premier dans le document styles.css qui fait partie de votre Thème WordPress. Tous les thèmes WordPress avec lesquels je travaille et que j'ai travaillé exposent le CSS de la typographie dans le document styles.css.

CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. Je me considère "spécialiste" des feuilles de style en cascade (CSS) pour WordPress et c'est une passion. Travailler le CSS d'un site WordPress est une des parties de mon travail que j'adore. (Source : Wikipédia)

La typographie de base dans styles.css fixera les polices pour le texte principal (paragraphe), le Titre 1, Titre 2, Titre 3, Titre 4, Titre 5 et Titre 6. Il y a plusieurs autres styles dans styles.css pour la typographie mais ça vous donne une idée. En ajustant la typographie dans styles.css, on donne un look uniforme au blogue et on permet au client d'intégrer ces styles à partir de son Tableau de Bord WordPress. Ça fait partie de toutes les Formations WordPress que j'offre au client avant la mise en ligne de son nouveau site.

Le choix des polices

Quand on créé un blogue WordPress ou un site Web, on a principalement les choix suivants pour les polices sur un site: Arial, Georgia, Helvetica, Lucida, Palatino, Tahoma, Times, Trebuchet et Verdana. On peut aussi utiliser les variantes de ces polices telles que Arial Black, Helvetica Light, etc. Il y a aussi d'autres polices telles que Comic Sans MS et Courier New mais puisque celle-ci sont très peu utilisées, je ne les ai pas ajoutée à ma sélection. En choisissant une ou plusieurs de ces polices pour les différents styles de votre blogue WordPress, vous assurez que les polices seront vues telles quelles sur tous les PC (Windows) et MAC (Apple). Si vous choisissez une police spéciale parce que vous trouvez ça beau, vous risquez qu'un visiteur à votre site ne voit pas cette police "spéciale" puisqu'elle n'est pas installée sur son ordinateur. Les police mentionnées dans cet article sont installées par défaut sur Windows et Apple depuis plusieurs années et sont reconnues aujourd'hui comme étant la norme. En 1995, on avait Times New Roman et Arial. On a au fur et à mesure ajouté des polices et on a aujourd'hui un beau choix de police. Les normes du CSS sur le Web sont gérées par le World Wide Web Consortium (W3C) depuis 1996.

Les éléments de la typographie

Chacun des styles dans WordPress (Paragraphe, Titre 1, Titre 2, Titre 3, Titre 4, Titre 5, Titre 6, etc.) offre en général les éléments suivants que l'on peut ajuster dans styles.css à notre guise:

• Taille de la police : font-size: 20px;
• Famille de la police : font-family: Georgia, "Times New Roman", serif;
• Couleur de la police : color:#565950;
• Pesanteur de la police : font-weight: 600;
• Variante de la police : italique, grasse, soulignée;
• Espace entre les lignes : line-height: 18px;
• Bordure autour des polices : border-bottom: 1px solid #dde0dc;
• Ombre en arrière des polices : background: #eeeeee;
• Marge de la police: margin : 8px 0px 20px 5px;

Comment appliquer les styles dans votre blogue WordPress

Quand vous modifiez un article ou une page dans votre blogue WordPress, vous pouvez appliquer les styles de votre blogue WordPress en suivant les indications dans l'image ci-dessous. Si vous n'aimez pas les styles que vous voyez, il faut ajuster le document styles.css de votre thème WordPress.

styles-wordpress

Galerie des polices

Cliquez sur une image pour la voir dans sa taille originale – elle devrait apparaître dans Lightbox. Si non, revenez et réessayez.

typo-arial

typo-georgia

typo-verdana

typo-helvetica

typo-palatino

typo-tahoma

typo-times

typo-trebuchet

typo-verdana

Références

All you wanted to know about Web type but were afraid to ask

Best Fonts for the Web

8 Fonts you probably don't use in CSS, but should

15 excellent examples of Web typography

20 Elegant Web Typography Resources

20 Font Driven Websites Showcase

Tweet

Share