Une typographie élégante avec WordPress

À l’heure du tout numérique, la typographie est souvent la grande laissée pour compte. En effet, si les éditeurs se sont attaqués avec ardeur aux problèmes posés par l’encodage des caractères accentués, ils ne se sont jamais vraiment réunis autour de la question des règles typographiques.

Introduction à la typographie

Il est dit de la typographie qu’elle est un art. Un art pour le maître typographe certes, toutefois, il ne faut pas se servir de cela comme une excuse pour ne pas en appliquer les règles de base. Il est fréquent par exemple de trouver dans sa boîte aux lettres, un courrier adressé à «Mr. X» ; c’est une abréviation incorrecte de Monsieur, qui s’abrège par «M. X» en français.

Si vous voulez apprendre les quelques règles fondamentales de la typographie, je met à votre disposition «Le petit typographe rationnel» d’Eddie Saudrais. C’est un PDF condensé, précis, et relativement complet; une petite merveille que je vous engage vraiment à lire — c’est l’occasion de dépenser dix minutes de votre temps pour quelque chose qui va vraiment vous enrichir.

Les règles typographiques et WordPress

Maintenant que nous connaissons les règles à appliquer, il est temps de regarder les outils dont nous disposons. Grégory Theunens résume hélas fort bien la situation :

Toutes les ressources sur le sujet sont périmées ; il semble que la relation Wordpress / règles de typographie n’intéresse que moi et deux quidams qui, en 2004 pour l’un (le blog est hors service) et en 2005 pour l’autre, ont vaguement tenté de mettre au point une extension qui automatiserait la tâche.

Heureusement tout n’est pas perdu, puisqu’il nous oriente par la suite vers SmartyPants Typographer¹. Ce script PHP fonctionnant aussi comme plugin WordPress, on le télécharge, on l’active, et on profite d’un post-traitement puissant sur tous les articles de son blog.

Pour aller plus loin

Le résultat produit d’emblée par SmartyPants Typographer est excellent, cependant il me gène à plusieurs niveaux :

1. Les tirets cadratins et demi-cadratins sont entourés d’espaces sécables. Idéalement, on voudrait que les tirets soient encadrés à l’extérieur par des espaces sécables, et à l’intérieur par des espaces insécables. Ce n’est pas réalisable sans une modification complexe du code, alors à moindre mesure, j’ai opté pour des espaces sécables partout.

2. Les guillemets simples sont configurables, mais l’entrée est caché plus bas dans le fichier — pour nous protéger de nous même j’imagine. Une modification de rien du tout en début de fichier, puis aux lignes 621-622 corrige cela.

3. Les caractères spéciaux sont sous leurs formes d’entités HTML décimales (ex: “ pour “). C’est un procédé correct, mais qui rend le code source peu lisible. J’ai donc remplacé les entités par une saisie clavier des caractères.

4. Aucune distinction n’est faite entre les espaces insécables, et les espaces insécables fines. Ces dernières sont un cas particulier, puisqu’elles ne sont pas disponibles dans toutes les polices de caractères. Ma solution consiste donc à simuler une espace insécable fine en entourant une espace insécable d’un span avec une classe «fine»

<span class="fine"> </span>

Et d’ajouter la règle suivante dans mon fichier CSS

.fine { font-size:30%; }

Je met à votre disposition le résultat final obtenu après ces quelques modifications.

Résumé des opérations

• Lire «Le petit typographe rationnel» ;
• Télécharger le plugin SmartyPants Typographer, ou bien encore ma version modifiée ;
• Ajouter la règle «.fine { font-size:30%; }» dans son fichier CSS ;
• Contempler l’élégance des articles de son blog.

1. petite note sur ce projet : La force des choses veut que ce ne soit ni plus ni moins John Gruber, le créateur de SmartyPants. Par la suite, Michel Portin — qui semble avoir un faible pour les projets de Gruber — a réalisé un portage remarquable du projet en PHP, et à même procédé à quelques améliorations propres à la typographie française. ↩