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]
Thanks for sharing such an informative article!
It’s interesting how most of the best fonts and typography for WordPress are inherited from the best fonts and such for general web design. Yet, despite how daunting that may sound to a blogger with no web design experience, you broke it down to a simple science.
Thanks again!
Thanks for the nice comment. And I do love your site = http://seo.blogs.webucator.com/ filled with info on how Google works. All my clients are « obsessed » with Google and I always need to keep up to date. Your site is a good resource for that. Keep up the good work!
nous avons crée un site pour un gite avec le theme MISTYLAKE, nous souhaiterions savoir comment pratiquer pour changer les police de caractères de base et permettre ainsi une meilleure présentation.
Merci d’avance pour votre réponse
Quelle galère pour changer la police, je vous le dit moi !
Mric de http://www.une-pomme.com
Bon article merci 🙂
Bonjour,
Je ne dispose pas de tous ces icônes dans ma barre de titre, notamment celui qui permet de changer les polices.
Ma version de WP est la 3.9.13
Merci de votre aide
Bonjour,
La pesanteur de la police ne peut pas être modifiée en standard au niveau de la feuille de style du thème.
Y’a t-il une astuce ?
Merci