Typographisme

Un site tenu par des amoureux de la typo, sur le Web comme ailleurs.

Les ligatures dans les navigateurs

On sait tous que les navigateurs ne sont pas les champions du monde de la gestion typographique. Ceci étant, ils s’améliorent tous les jours et parmi toutes les chipoteries typographiques il y en a une qui commence timidement à faire son apparition dans les navigateurs : la gestion des ligatures. C’est loin d’être parfait, mais il y a déjà moyen de faire quelques petites choses.

La ligature ft de la Garamond

La ligature traditionnelle des lettres “f” et “t” de la police Garamond.

C’est quoi une ligature ?

Avant de rentrer dans le vif du sujet, rappelons brièvement ce que sont les ligatures typographiques. Pour faire simple, une ligature typographique consiste à lier [1] deux glyphes pour en former un nouveau. Les ligatures ont évolué au cours de l’histoire de l’écriture puis de la typographie et toutes les langues ne sont pas égales face à cette notion. Par exemple, l’alphabet arabe ou certains alphabets asiatiques en font un usage très important. Ici, je vais me concentrer sur les ligatures des langues reposant sur l’alphabet latin (rien que ça ce n’est déjà pas simple).

Les ligatures des langues en alphabet latin sont, grosso modo, de 4 ordres [2] : les ligatures obligatoires, Les ligatures ordinaires, les ligatures esthétiques et les ligatures spécifiques.

Ligatures obligatoires

Il s’agit de ligatures locales, liées à une langue précise et qui, si elles ne sont pas faites, consistent le plus souvent en une faute d’orthographe. Par exemple, en français, la ligature du « o » et du « e » est obligatoire (« oeil » est une faute, là ou « œil » ne l’est pas). C’est la même chose pour le caractère « ß » (Eszett) en allemand qui est en fait la ligature obligatoire des lettres « s » et « z » [3].

Ligatures ordinaires

Elles sont des ligatures optionnelles (mais vivement recommandées) qui correspondent à des pratiques issues de la typographie au plomb. Elles permettent de résoudre élégamment des problèmes d’esthétique liés à l’approche des caractères. Par exemple, lorsque vous accolez un « T » et un « o », le « o » donne l’impression de flotter car l’espace sous la barre du « T » est vide. Pour corriger ce problème visuel, il faut réduire l’approche entre les deux caractères. Si de nos jours, il est possible de véritablement modifier l’approche entre les caractères, à l’époque du plomb, la seule solution consistait à fondre un seul caractère comportant les deux glyphes « To ». Un autre cas plus épineux se présente si vous accolez un « f » et un « i ». Dans ce cas, l’approche n’a pas nécessairement besoin de changer, mais visuellement, la barre du « f » rentre en collision avec le point du « i ». Pour corriger ce défaut visuel, il est possible de réaliser une ligature en ne créant qu’un seul caractère qui se permet de redessiner le « f » pour faire en sorte qu’il tombe exactement à la place du point du « i » rendant le dessin global plus harmonieux.

Ligature fi avec Adobe Caslon

C’est quand même mieux une fois que la ligature est réalisée.

Ligatures esthétiques

Ce sont, elles aussi, des ligatures provenant de la typographie traditionnelle au plomb. Par contre, contrairement aux ligatures ordinaires qui résolvent de vrais problèmes visuels, elles ne sont là que pour « faire joli ». C’est par exemple le cas des ligatures « c » et « t » ou bien « s » et « t » (que personnellement j’adore, en particulier sur les serifs).

Ligatures spécifiques

On les appelles également ligatures discrétionnaires : elles sont propres à une police de caractères donnée et ont été créés par le dessinateur de la police à des fin esthétiques spécifiques. En effet, dans l’absolu, toute association de caractères peut faire l’objet d’une ligature et certains dessinateurs de fonte ne s’en privent pas.

Olicana, de Nick Cooke

Olicana, de Nick Cooke, est une manuaire comportant près de 100 ligatures spécifiques afin de lui donner le naturel d’une véritable écriture manuscrite.

Enfin, historiquement parlant, certains caractères que nous utilisons quotidiennement dans le Web sont en fait des ligatures qui sont passées dans l’usage courant et sont désormais des caractères à part entière. C’est la cas de l’esperluette « & » qui est la ligature de la conjonction « et » et il y des soupçons à propos de l’arobase « @ » qui serait la ligature du latin « ad ».

Comment ça marche techniquement

Donc, les ligatures améliorent la lisibilité et l’esthétique des fontes. En général, en informatique, la gestion des ligatures fait l’objet d’un traitement plus ou moins automatique et cela dépend beaucoup des logiciels qui assurent le rendu typographique. Les navigateurs Web ne font pas exception et ce sont eux qui doivent faire le boulot (souvent en se reposant sur l’OS sous-jacent). Or donc, comment ça marche dans les navigateurs ?

Les ligatures dépendent de la police de caractère…

Eh oui ! Avant même de vous demander si votre navigateur va pouvoir afficher ou non les ligatures, la première chose à faire est de vous assurer que les fontes que vous allez utiliser comportent les éléments nécessaires pour les afficher. Pour faire simple, soit votre police embarque directement les caractères ligaturés soit elle est au format OpenType, TrueType ou WOFF [4] et comporte les instructions spécifiques permettant de gérer les ligatures automatiquement.

Si comme moi vous avez l’habitude d’utiliser le site fontsquirrel.com pour optimiser vos polices pour le Web, faites attention. En effet, si vous décidez de réduire le jeu de caractère de la police, vous perdrez la gestion des ligatures au sein de la police (même si vous demandez expressément à garder les caractères ligaturés, les automatismes de substitution, eux, seront quand même perdus). Donc, si vous voulez pouvoir disposer à la fois du support des ligatures et d’une fonte ne comprenant que les caractères qui vous sont nécessaires, il vous faudra soit vous renseigner au près du fondeur de la police pour obtenir une version Web adaptée à vos besoins, soit, si la licence de la police le permet [5], passer par un logiciel d’édition de fonte pour faire ces optimisations vous-même.

…et du navigateur

Voila, vous êtes sûr que votre police est capable de gérer les ligatures, voyons maintenant comment ça se passe dans le navigateur.

Caractères et entités XML

Un certain nombre de ligatures sont normées au niveau d’Unicode. En conséquence, il est tout à fait possible d’utiliser directement les caractères ou les entités XML correspondants pour les utiliser dans vos texte HTML

<p>Une &#xFB01;lle de cœur</p>

Le problème de cette méthode c’est que d’une part toutes les ligatures ne font pas partie de la norme Unicode et d’autre part, si pour une raison ou une autre, votre police ne comporte pas le caractère correspondant (par exemple, votre fonte déclarée via @font-face ne s’est pas chargée), vous aurez droit à un joli symbole de glyphe introuvable, ce qui n’est pas forcément très heureux ! Personnellement, je vous conseille de n’utiliser cette technique que pour les ligatures obligatoires (comme le « œ » en français).

SVG text-rendering

La norme SVG [6] étend CSS en définissant la propriété text-rendering. Cette propriété permet de dire au navigateur s’il doit privilégier la lisibilité des polices ou bien les performances d’affichage. La norme ne spécifie pas explicitement ce qui améliore la lisibilité ou les performances. Chaque navigateur est libre de faire ce qu’il veut.

Chrome, Safari et Firefox 3.6 sont les premiers navigateurs à gérer l’automatisation des ligatures disponibles dans les fontes OpenType. Ils considèrent également que les ligatures ordinaires servent à améliorer la lisibilité. Ainsi, il est possible d’activer (ou pas) le support des ligatures ordinaires en utilisant cette propriétés CSS.

p {
    text-rendering : optimizeLegibility;
}
<p>Le trafic est fluide.</p>

Dans l’exemple précédent, vous noterez que les ligatures ordinaires « f » et « i » ainsi que « f » et « l » sont bien réalisées mais pas la ligature esthétique « s » et « t ».

Ligatures communes

Quelques unes des ligatures les plus communes. « ct » et « st » étant esthétiques, elles ne seront pas affichées par défaut dans les navigateurs.

Par défaut, Firefox 3.6 affiche systématiquement les ligatures ordinaires pour tout texte d’une taille supérieure ou égale à 20 px. Donc, si vous voulez explicitement désactiver les ligatures (Ah bon ! Vraiment ?), vous devrez utiliser la propriété text-rendering avec la valeur optimizeSpeed. Dans Chrome et Safari, c’est l’inverse si vous voulez forcer l’affichage des ligatures, vous devrez explicitement utiliser la valeur optimizeLegibility.

Cette utilisation de la propriété text-rendering est largement sujette à caution, et chaque navigateur y va de son interprétation :

  • Firefox 3.6 l’utilise pour activer ou non les ligatures ordinaires sous Windows et Linux, mais pas sous Mac OSX.
  • Firefox 4 ne l’utilise plus ! Il affiche toujours les ligatures (sous tous les OS) par défaut et considère qu’il n’est pas possible d’accélérer encore plus l’affichage du texte par rapport à ce qu’il fait déjà et ne tiendra donc pas compte de cette propriété qui sera sans effet. Il ne serait donc pas possible de désactiver les ligatures sous Firefox 4 ? Si, si, j’y viens.
  • Chrome (10) et Safari (5) fonctionnent comme Firefox 3.6 (si ce n’est mieux), mais uniquement sous Mac OSX et Windows 7. Sous Windows XP, au contraire, cette fonctionnalité est sérieusement buguée [7] : Si vous utilisez @font-face avec une police OpenType et que vous appliquez la propriété text-rendering, votre police ne sera pas affichée si votre texte comporte au moins une espace inter-mot (alors qu’avec une police TrueType, il n’y a aucun problème, mais la qualité de rendu est moindre) !

CSS3 font-feature-settings

Le module CSS3 Font est bien connu pour définir tout le mécanisme des déclarations @font-face, mais il fait bien plus que ça. En effet, il définit également comment les différentes fonctionnalités des polices peuvent être activées ou non.

Je ne rentrerai pas trop dans les détails ici car pour l’instant ce module est en pleine discussion et beaucoup de choses changent quasiment tous les jours à son propos. Néanmoins, il y a une propriété qui est disponible expérimentalement dans Firefox 4 (donc préfixée par -moz-) : font-feature-settings.

Cette propriété permet d’activer ou non l’ensemble des fonctionnalités et effets spéciaux des fontes OpenType un par un. L’exemple ci-après montre comment activer l’ensemble des ligatures possibles dans Firefox 4 :

p {
    -moz-font-feature-setting : "liga=1,clig=1,dlig=1,hlig=1,rlig=1";
}
<p>la star des fillettes.</p>

C’est actuellement le seul moyen de gérer les ligatures dans Firefox 4. À terme, d’autres propriétés CSS3 viendront simplifier l’accès à certaines fonctionnalités : les ligatures, les petites capitales, les glyphes alternatifs, etc. En effet, la propriété font-feature-setting est une propriété générique de « bas niveau » permettant d’accéder à l’ensemble des fonctionnalités OpenType. Il y a donc, parmi d’autres, une proposition pour que les ligatures puissent être gérées indépendamment via une propriété spécifique : la propriété font-variant-ligature.

Au niveau du CSS working group, tout cela est encore hautement volatile et j’aurai l’occasion de vous détailler un peu tout ça dans un futur article quand les choses commenceront à se tasser et à faire consensus (et si possible avec des débuts d’implémentation). Mais pour l’instant, c’est un peu prématuré.

Le pour et le contre

Bon, une fois qu’on s’est dit tout ça, on fait quoi ? Ligature ou pas ligature ?

Comme on l’a vu, techniquement parlant, il est assez difficile de bien contrôler les ligatures que l’on souhaite appliquer à son texte. En particulier, chaque navigateur ayant sa propre approche du sujet, cela ne reste finalement qu’un joli plus mais dont il faudra apprendre à vous passer. Comme souvent sur le Web, il y a trop de facteurs inconnus pour être sûr que l’on contrôle correctement l’affichage. En outre, le Web se caractérise par des choix à faire, parfois difficiles, entre esthétique et performance. Il est, hélas, impossible d’avoir des fontes aussi belles que dans un livre sans en payer le coût en terme de poids des fichiers de police.

Néanmoins, ce serait vraiment dommage de vous passer des ligatures, en particulier sur les titrailles où les glyphes sont visuellement plus « présents » que dans le texte courant. L’esthétique globale des polices en bénéficiera toujours et donc le design de vos pages aussi en général.

Comme d’habitude en termes de web design, je prêche le pragmatisme lié à votre contexte de déploiement (par exemple, les contraintes du « mobile » et du « desktop » sont différentes). Le plus important de mon point de vue (et souvent le plus mal fait) consistant à bien optimiser vos fontes pour le Web (messieurs les fondeurs, si vous nous lisez, ce serait vraiment du bonheur si vous pouviez proposer des outils de construction des fichiers de fonte pour le Web à la demande… si possible accessibles directement en ligne).

  1. Étymologiquement, « lier » et « ligature » ont la même origine, s’il y a des sémiologues parmi vous, faites-vous plaisir dans les commentaires :) [retour]
  2. Amis typographes qui nous lisez, n’hésitez pas à compléter/corriger mes explications superficielles spécial noob dans les commentaires. [retour]
  3. ou « s » et « s », cette ligature a une histoire complexe et je vous invite à lire cet article de Jacques Poitou si vous voulez en savoir plus : http://j.poitou.free.fr/pro/html/typ/allemand.html. [retour]
  4. Par abus de langage, dans la suite de cet article, je ne parlerai plus que du format OpenType car la plupart du temps les formats TrueType et WOFF sont des dérivés d’OpenType. [retour]
  5. Vérifiez bien ce point car c’est souvent très loin d’être le cas. En gros, avec une autre licence que la OFL ou une licence de type BSD/MIT, c’est mort. Même la GPL est problématique dans ce cas là car il vous faudra publier les sources de votre police modifiée. [retour]
  6. Oui, encore elle ! Vous aurez noté que j’aime beaucoup SVG :) [retour]
  7. Ne pas troller, surtout ne pas troller. [retour]

dans Design Web Par Jeremie