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 sites 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 sites WordPress

Toute la typographie des sites WordPress se gère en premier dans le document style.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 style.css qui devrait se trouver dans /votresite.com/wp-content/themes/votretheme/style.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 style.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 style.css pour la typographie mais ça vous donne une idée. En ajustant la typographie dans style.css, on donne un look uniforme au site 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 site 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 site 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 style.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 : <em>italique</em>, <strong>grasse</strong>, <span style=”text-decoration: underline;”>soulignée</span>
  • 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 site WordPress

Quand vous modifiez un article ou une page dans votre site WordPress, vous pouvez appliquer les styles de votre site 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 style.css de votre thème WordPress.

Galerie des polices

[/tab]

All you wanted to know about Web type but were afraid to ask
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
  •  
  •  
  •  
  •  
  •   
  •