Utiliser les petites capitales sur le web

Les Petites capitales sont parfois utilisées dans les livres pour marquer l’emphase, pour styliser les titres ou la première ligne d’un paragraphe. Ce ne sont pas de simples majuscules que l’on a rapetissées, mais bien un nouveau jeu de caractères, créé manuellement pour un résultat plus esthétique.

Ces caractères ont la même épaisseur que les minuscules, ainsi qu’une hauteur identique ou légèrement plus grande, comme c’est le cas avec la police Source Serif utilisée dans cet article.

Si les petites capitales sont rarement utilisées par le commun des mortels, c’est d’une part parce que leur apparence peut sembler datée ou prétentieuse pour certains ; et d’autre part parce que tous les éditeurs de texte ne peuvent pas les afficher, même quand elles sont présentes dans la police. Pourtant, ces caractères ont de multiples avantages !

Comme l’explique Robert Bringhurst dans The Elements of Typographic Style, les petites capitales peuvent fluidifier la lecture d’un texte. Dans son livre, il formule la règle suivante pour leur utilisation :

Les sigles tels que CIA et OLP sont fréquents dans certains textes. Il en va de même pour les abréviations CE et BCE ou AD et BC. La valeur normale pour l’interlettrage de ces séquences de petites ou grandes capitales est de 5 à 10 % de la taille des caractères.¹

Ainsi, les petites capitales permettent d’utiliser des sigles et des acronymes sans que les majuscules ne ressortent du texte en donnant l’impression de « crier ». Le gris typographique du texte est préservé. Si vous utilisez une police serif , c’est également une bonne alternative au gras pour accentuer des mots-clés, comme le souligne Matthew Butterick dans Practical Typography².

En lisant Bringhurst, j’ai rapidement été convaincu de l’intérêt des petites capitales pour apporter une harmonie à mes articles techniques, qui peuvent contenir beaucoup de sigles en majuscules. Cependant, l’auteur ne couvre que des exemples communs et n’apporte pas suffisamment de précisions pour un usage aussi spécifique.

Un sujet plus épineux qu’il n’y paraît

En tentant d’appliquer ce principe à mon article « Sur les traces de RPG Maker », qui contient de nombreux acronymes tels que MSX et des noms stylisés mêlant majuscules et minuscules comme LOGiN, j’ai été confronté à de nombreuses incertitudes. Faut-il diminuer la taille des numéros dans PC-98 et dans PS2 ? Faut-il utiliser les petites capitales au milieu d’un titre de section ? Dans les paragraphes commençant par un acronyme, quelle serait la meilleure présentation parmi celles-ci ?

Aucune de ces deux solutions ne me semblait parfaitement naturelle. Problématique plus épineuse encore : s’il est évident de transformer en petites capitales le sigle RPG pour role-playing game, il est beaucoup moins esthétique d’écrire « RPG Maker », en raison du M qui jure à côté du petit sigle. Pourtant, « RPG Maker » n’est pas souhaitable non plus, et il serait étrange que « RPG Maker » soit le seul terme en grandes capitales tout au long de l’article, surtout lorsque le sigle RPG est en petites capitales le reste du temps.

Ajoutez à cela la problématique des sigles en début de paragraphe, et le résultat fait véritablement froid dans le dos.

Un peu perdu, je débute mes recherches en espérant ne pas être le premier à affronter la question des bonnes pratiques pour les petites capitales, ou small caps en anglais, dans la rédaction technique. Déçu de ne trouver que très peu de ressources récentes et appliquées au web, je m’accroche au code typographique de The Economist, miraculeusement complet. D’après ce guide, le magazine utilise les petites capitales pour la plupart des abréviations et acronymes, mais proscrit leur usage dans les titres, les notes de bas de pages, les légendes, les tableaux, les graphiques et les éléments chimiques³. J’ai suivi leur recommandation en utilisant les grandes capitales au sein du tableau de mon article.

Toujours sur le web, Gwern.net utilise les petites capitales à des fins décoratives, pour créer des titres élégants et en première ligne de certaines introductions de section. En réalité, Gwern a également utilisé les petites capitales pour les abréviations, mais il a récemment retiré cette fonctionnalité de son site⁴. Il s’avère particulièrement difficile de maintenir une cohérence à travers un site web entier, surtout lorsqu’il est aussi vaste et diversifié que le sien. Cela demande soit beaucoup de travail manuel pour baliser les sigles, soit une détection automatique difficile à mettre en place. Gwern a écrit un plugin pour Pandoc permettant de détecter les occurences valides, mais il rendait la compilation de son site particulièrement lente et diminuait les performances de ses pages web déjà très denses.

L’implémentation de The Economist est également assez imparfaite. Si leur guide propose d’écrire BPhils, PhD et T-shirts, un article récent de leur site écrit « OpenAI’s publicly accessible GPT-3 »⁵ au lieu de ce qui devrait probablement être OpenAI. D’autres pages semblent répondre à des règles encore différentes, ne faisant pas du tout appel aux petites capitales.

Rassuré de ne pas être complètement seul dans mes déboires, je ne me décourage pas. Je remarque tout de même que je ne sais toujours pas comment styliser « RPG Maker », mais je suis résolu à ne pas abandonner tous mes efforts juste parce que ce mot est en train de tranquillement écrouler la cohérence que j’essaie d’apporter à mon article. Peut-être puis-je me permettre une petite entorse aux règles dans ce cas précis. Après tout, Bringhurst lui-même encourage à adapter ses nombreuses règles à chaque situation : « Si vous utilisez ce livre comme un guide, n’hésitez pas à sortir des sentiers battus lorsque vous le souhaitez. »⁶ Cela dit, j’aimerais bien retrouver mon chemin, parce que je n’avais pas l’impression de demander la lune, je voulais juste des jolies petites capitales.

Malheureusement, les choses n’iront pas en s’arrangeant. Une autre complication m’emmène encore un peu plus loin de la solution : le CSS.

Afficher les petites capitales en CSS

Sur le web, on peut afficher les petites capitales avec des propriétés CSS. Le plus simple est d’appliquer un style à l’élément <abbr>, qui représente une abréviation ou un acronyme. J’ai commencé en utilisant font-variant: unicase, qui promet de transformer les majuscules en petites capitales sans modifier les minuscules. Ce serait très pratique pour englober les minuscules dans les noms stylisés.

abbr { font-variant: unicase; }

Le magazine <abbr>LOGiN</abbr> et le modèle <abbr>GPT-3.5-turbo</abbr>

Malheureusement, Safari et Firefox affichent des majuscules normales (en date du 26 avril 2023). Pour régler ce problème, la première question qui me vient à l’esprit est : que ferait Gwern dans cette situation ? Il s’avère qu’il utilise aussi Source Serif, comme dans le présent article, mais pas les mêmes propriétés CSS.

abbr { font-feature-settings: "smcp", "c2sc"; }

Quelle est la différence entre ces deux paramètres CSS ? Honnêtement, j’ai mis du temps à la comprendre car ce n’était pas clairement expliqué sur MDN, alors la voici : font-feature-settings affiche les caractères spéciaux s’ils existent dans la police, mais affiche les caractères normaux si la police ne supporte pas l’option voulue ; tandis que font-variant utilise les caractères spéciaux s’ils existent, mais dans le cas contraire, le navigateur tentera de synthétiser les caractères pour s’approcher du résultat escompté.

Dans notre cas, cela signifie qu’avec font-variant, le navigateur pourra tenter de créer de fausses petites capitales en rapetissant les vraies majuscules. Cela aura son importance.

Dans l’exemple ci-dessus tiré de Gwern.net, la propriété c2sc transforme les majuscules en small caps et la propriété smcp transforme les minuscules. Cela convenait à Gwern qui appliquait son style uniquement aux lettres de son choix grâce à son plugin Pandoc, mais de mon côté, je préfèrerais baliser les abréviations manuellement, sans pour autant devoir trier les minuscules. Que se passerait-il si l’on utilise uniquement c2sc ?

abbr { font-feature-settings: "c2sc"; }

Nous pouvons englober des minuscules sans les altérer et le tout fonctionne parfaitement sur tous les navigateurs. Parfaitement ? Sauf en italique.

Examinons ces exemples de plus près. c2sc ne fonctionne pas car Source Serif ne comporte pas de small caps en italique⁷. Comme nous utilisons font-feature-settings, le navigateur ne synthétise pas les caractères et affiche des majuscules normales.

A l’inverse, font-variant synthétise les caractères, mais le problème d’épaisseur est très visible. De plus, rappelons que l’option all-small-caps fonctionne sur Safari et Firefox, mais pas l’option unicase, qui trie les minuscules.

Je suis un peu déçu puisque je comptais utiliser les petites capitales dans certains noms de publication comme LOGiN ou MSX Magazine. Il serait déraisonnable d’utiliser la forme synthétisée MSX Magazine, qui est trop fine. On peut tenter de compenser l’épaisseur et la taille des caractères, comme je le fais dans MSX Magazine. L’illusion tient la route sur certains appareils et navigateurs, mais pas sur d’autres. Nous n’atteignons pas le charme des petites capitales d’origine, mais le résultat est passable. Petite astuce pour mon lectorat le plus déterminé : avec certaines polices, il sera plus simple d’imiter l’épaisseur des véritables small caps en utilisant une variante de taille comme Caption.

Si les petites capitales en italique ne sont pas importantes pour vous, vous pouvez simplement mettre ces considérations de côté en retirant l’italique à <abbr> avec font-style: normal. Ainsi, même lorsque vos petites capitales seront englobées dans un <i> ou un <em>, elles s’afficheront normalement.

Notez également que lorsque nous utilisons cette technique pour imiter les small caps en italique, nous sommes obligés d’utiliser all-small-caps et donc nous perdons le tri des minuscules. Pour écrire le nom du magazine LOGiN, il faut séparer manuellement le i dans un gloubi-boulga d’HTML.

<em>
  <span style="letter-spacing: 0.07em; margin-right: -0.07em">
    <span style="font-variant: all-small-caps; font-weight: 600; font-size: 1.18em;"> LOG </span>
    i
    <span style="font-variant: all-small-caps; font-weight: 600; font-size: 1.18em;"> N </span>
  </span>
</em>

Les soucis ne s’arrêtent pas là. Même lorsque la police est censée comprendre des petites capitales et que vous prenez toutes ces précautions, cela ne veut pas dire qu’elles feront partie de la version qui vous est distribuée. Par exemple, Google Fonts ne sert pas les petites capitales et les chiffres elzéviriens⁸. Dans mon cas, je récupère la plupart des polices de mon blog via Fontsource, mais les petites capitales ne sont pas incluses. Évidemment, ce n’est documenté nulle part, donc dans le doute, il vaut mieux récupérer la police sur son site d’origine. Haha. Vous êtes encore là ?

Interlettrage

Si oui, alors nous pouvons passer à la touche finale : l’interlettrage ou letterspacing, c’est-à-dire l’espacement entre les caractères. Selon Bringhurst, dans le cas des acronymes, l’interlettrage idéal est de 5 à 10 % de la taille des caractères¹, ce qui se traduit en CSS par un letter-spacing de 0.05em à 0.1em.

Le problème, c’est que cet espacement n’est pas vraiment appliqué entre les caractères, mais bien à la droite de chaque caractère. Ainsi, l’espacement est ajouté à la dernière lettre du mot, ce qui l’éloigne inutilement du mot suivant. Pour compenser cet effet, le moyen le plus simple est d’appliquer margin-right: -0.05em en adaptant avec la valeur de votre letterspacing.

L’ajustement de marge est à peine perceptible dans la plupart des cas, mais il est important pour les polices qui requièrent davantage de letterspacing.

Récapitulatif des fonctionnalités

Pour récapituler, les fonctionnalités OpenType intéressantes à utiliser avec font-feature-settings sont les suivantes :

• smcp transforme les minuscules en small caps ;
• c2sc transforme les majuscules en small caps ;
• lnum active les chiffres de même hauteur et tnum active les chiffres de même largeur. Utiliser l’une des deux a tendance à être plus esthétique en conjonction avec les petites capitales ;
• pcap transforme les minuscules en petite caps ;
• c2pc transforme les majuscules en petite caps ;

Souvenez-vous qu’il est également possible d’utiliser font-variant si vous souhaitez forcer le navigateur à synthétiser les caractères.

Code final

Voici ma règle CSS finale pour afficher des petites capitales :

abbr {
  font-feature-settings: "c2sc";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  margin-right: -0.05em;
  font-style: normal;
}

Le letterspacing est pertinent dans le cas d’abréviations et acronymes, mais pour les titres et d’autres utilisations, vous n’en aurez peut-être pas besoin.

Pour synthétiser des petites capitales en italique, ciblez <abbr> dans les <em> ou <i>. Dans le cas de Source Serif, ces paramètres fonctionnent assez bien :

em abbr {
  font-variant: all-small-caps;
  font-size: 1.18em;
  font-weight: 600;
  letter-spacing: 0.07em;
  margin-right: -0.07em;
  font-style: italic;
}

Nous avons vu qu’il est important de comprendre les subtilités de chaque option en CSS, de s’assurer de leur compatibilité avec les navigateurs, mais aussi que le résultat dépend énormément de la police et des jeux de caractères qu’elle propose.

Ce qui me fait réaliser que mon problème pour styliser « RPG Maker »… n’est peut-être qu’une question de police.

Avec ET Book, la police initialement prévue pour mon article, les minuscules sont bien plus petites que les capitales. Cela crée une grande différence entre capitales et petites capitales, particulièrement gênante dans les mélanges tels que « RPG Maker ». En comparaison, les minuscules de Source Serif sont plus grandes, ce qui atténue l’effet criard des capitales. De plus, les petites capitales sont légèrement plus grandes que les minuscules, réduisant encore le contraste entre ces deux jeux de caractères.

La solution aura donc été de troquer ET Book pour Source Serif qui, en plus d’être plus adaptée aux besoins de mon article, se révèle plus complète dans son support des fonctionnalités OpenType, me permettant de réaliser quelques fantaisies avec font-feature-settings.

Est-ce que ça en valait la peine ?

Tous ces efforts pour un si petit détail peuvent sembler vains au vu de la difficulté à établir un usage cohérent ainsi qu’une automatisation — sujet que nous n’avons pas approché dans cet article. Pour le moment, j’écris les balises <abbr> manuellement dans mes documents Markdown, mais cela deviendra vite lassant. Or, Gwern s’est senti écrasé par la difficulté de maintenir une homogénéité à travers tout son site. Entre les questionnements de design, les cas particuliers et l’allongement de la durée de compilation, le ras-le-bol a fini par arriver. Il est d’autant plus difficile de se tenir à ce parti-pris que tous les lecteurs ne l’apprécient pas :

Je pense que les petites capitales ont contribué au sentiment de « trop sophistiqué » et de « surcharge » dont se plaignent de nombreux lecteurs de Gwern.net. Même s’ils ne remarquent pas explicitement que les small caps sont des small caps, ils remarquent tout de même qu’il y a quelque chose d’inhabituel dans tous ces acronymes. Si les petites capitales étaient beaucoup plus courantes, cela cesserait d’être un problème ; mais c’est un problème et il le restera tant qu’elles seront un ornement typographique exotique qui doit être explicitement activé dans chaque cas.

Les petites capitales ont des atouts séduisants, en particulier pour la rédaction technique, mais leur utilisation est pour le moment trop complexe pour qu’elles se démocratisent et que les lecteurs les acceptent naturellement. Pour le moment, elles sont plutôt adaptées à un usage ponctuel et aux expérimentations à petite échelle.

Références

The Elements of Typographic Style

• Robert Bringhurst
• Hartley and Marks Publishers (2015)

• ISBN 9780881792126, 9780881792119
• Open Library

Style guide.

• Profile Books, The Economist in association with Profile (2005)

• Open Library

Butterick’s Practical Typography

• practicaltypography.com (2018)

• Open Library