Sur le web, le design graphique, aussi appelé webdesign, fait partie des atouts qui contribuent au succès d'un site ou d'une page web.
Or, le design ayant vocation à afficher, pour l'essentiel, des textes, les propriétaires de sites web ont intérêt à soigner la typographie, qui détermine la lisibilité, qui elle-même détermine certains facteurs importants du référencement SEO, comme le temps de présence du lecteur sur la page : plus celui-ci est long en moyenne, plus Google enverra de trafic à cette page.
Voyons donc comment soigner la typographie sur votre site WordPress, et comment gérer ces subtilités que sont les divers types d'espaces et les caractères spéciaux.
Bien gérer la typographie sur WordPress
Choix et nombre des polices
Les polices de caractère (ou fonts, en anglais), vont caractériser l'aspect visuel de vos textes. Il est recommandé de ne pas en utiliser plus de 2 familles, 3 grand maximum, pour produire une impression de cohérence et d'harmonie. On peut aussi n'utiliser qu'une seule famille, et jouer avec des paramètres comme la graisse (de 100 : très fin, à 900 : très gras, la norme étant à 400), l'opposition entre minuscules et majuscules, l'opposition entre droite et italiques, etc.
Un autre paramètre très important est la taille des polices, surtout celles des paragraphes (balise p) : il ne faut pas oublier que des millions d'internautes ont des problèmes de vue, de sorte que dans la plupart des cas, une taille comprise entre 16px et 20px sera préférable.
Hiérarchisation des titres et des paragraphes
Pour garantir la lisibilité, la hiérarchisation des titres revêt une grande importance : on doit comprendre instantanément qu'un titre HN est d'un niveau plus bas ou plus élevé qu'un autre, simplement en voyant la taille de la typo. Donc un H2 doit être plus grand qu'un H3, un H3 qu'un H4, et ainsi de suite.
Concernant les paragraphes, il faut veiller à leur assurer un bon interlignage ( = l'espace entre chaque ligne ; comptez entre 1,3 et 1,7), ainsi qu'un bon espacement ( = l'espace entre les paragraphes, qui aide à les distinguer ; comptez environ 1).
La plupart des thèmes WordPress permettent de régler finement ces paramètres.
Les espaces dans la typographie
Une typographie de qualité dépend aussi d'un certain nombre de détails, et parmi eux on compte la gestion des divers types d'espaces.
Les espaces insécables
Par définition, un espace insécable ne peut être coupé, c'est-à-dire détaché des caractères qui le précèdent et le suivent.
Ils s'avèrent particulièrement utile pour formater tous les signes de ponctuation qui risqueraient de se retrouver "orphelins" ou "veufs", placés seuls en fin de ligne ou en début de ligne. Pour assurer leur bon affichage, on utilisera donc l'espace insécable en HTML. On l'emploie aussi pour maintenir ensemble les chiffres et les unités de mesure (par exemple pour éviter un saut de ligne entre 30 et €), les noms propres, les sigles, etc.
Pour insérer des espaces insécables dans WordPress, on peut utiliser soit un code HTML, soit un caractère Unicode.
Les autres types d'espaces
Il existe plusieurs autres types d'espaces (espace fine, espace cadratin, etc.) qui jouent leur rôle dans la typographie. L'espace fine peut s'employer après les guillemets ouvrants et avant les guillemets fermants. L'espace cadratin peut s'utiliser après un tiret long, dans la mise en forme d'un dialogue littéraire.
Caractères spéciaux sur WordPress
Les caractères spéciaux consistent en une collection de centaines de caractères qui ne sont ni des lettres, ni des chiffres. Flèches, mains, points, barres, monnaies, symboles issus de diverses cultures, etc. Ils peuvent servir à enrichir le texte, à préfixer des titres ou des éléments de liste (ul > li), ou tout simplement à décorer.
Pour en insérer dans vos pages WordPress, rien de plus simple :
- dans la barre des icones de l'éditeur classique de WP, vous avez une icône en forme de lettre grecque Oméga : cliquez-là et vous pourrez y découvrir des centaines de caractères spéciaux
- dans l'éditeur de blocs Gutenberg, il faudra passer par un élément HTML, et aller chercher le code unicode de l'entité HTML du caractère désiré
Si vous préférez, vous pouvez aussi utiliser l’extension Insert Special Characters.
Voilà, vous avez maintenant une meilleure idée sur comment bien gérer la typographie sur votre site WP. Bon courage !
