Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété font-variant-ligatures

Description de la propriété font-variant-ligatures.

font-variant-ligatures définit la ligature des caractères, c'est à dire le fait que certaines lettres, lorsqu'elles se suivent peuvent être reliées entre elles, ou même former un nouvelle lettre. Voici les ligatures les plus courantes :

Exemples de ligatures

Voir aussi la propriété raccourcie font-variant.

Quelques précisions sur les ligatures.

Une ligature consiste donc à remplacer une paire de lettres par un autre caractère, plus esthétique ou plus lisible. Le jeu de caractères unicode comporte de nombreuses lettres ligaturées comme œ, æ, , etc. mais il faut en plus que la police comporte une table de substitution, afin que le navigateurs sache par quoi remplacer les paires de lettres.

Bien entendu l'auteur de la page a toujours la possibilité d'utiliser des Entités afin d'imposer les caractères de son choix mais les navigateurs peuvent à présent prendre ce travail à leur charge.

Les ligatures sont des subtilités typographiques : on pourrait tout simplement les ignorer. Mais les tablettes de lecture, les livres numériques sont de plus en plus nombreux : Kindle de Amazon, Kobo, Pocket Book, etc. Il serait dommage que ces livres numériques fassent moins bien que leurs prédécesseurs, les livres papier.

Plusieurs types de ligatures :

Les ligatures orthographiques.

Ne pas utiliser ces ligatures est considéré comme une faute d'orthographe. Les correcteurs signalent d'ailleurs ces oublis. En français, ce sont essentiellement les deux caractères œ et æ, qui existent aussi en majuscules Œ et Æ. Les caractères allemands comportent aussi leurs ligatures orthographiques comme ß.

Les ligatures esthétiques.

Certaines lettres, lorsqu'elles se suivent, ont des formes qui se chevauchent ou qui rendent un résultat peu esthétique pour les puristes. C'est surtout le cas avec les polices à empattements comme 'Times new Roman'. Par exemple, le f suivi d'un i fait que le point du i vient percuter la boucle du f. On pourra avantageusement remplacer ces deux lettres par le caractère .

Une autre ligature est très couramment utilisée, celle qui consiste à remplacer les lettres e et t par &.

fi => fi     et => &

Les ligatures optionnelles.

Certains créateurs de polices de caractères ne se privent pas de dessiner non seulement toutes les lettres individuelles mais également des caractères de remplacement pour de nombreuses paires de caractères. L'auteur peut activer ces ligatures complémentaires mais le résultat sera fortement lié à la police utilisée.

ct => Ligature ct     st => Ligature st

Les ligatures historiques.

Elles sont un peu tombées dans l'oubli mais il peut être intéressant de les ressortir pour créer un effet de typographie à l'ancienne. Malheureusement, très peu de polices comportent ces caractères.

Pour en savoir plus sur les ligatures.

Si vous souhaitez approfondir cette notion de ligature, nous vous recommandons cette page, très précise et détaillée : Les ligatures dans les navigateurs.

Syntaxes pour font-variant-ligatures.

La police de caractères utilisée pour les exemples et le simulateur est la police Kleymissky (copyright gluk).

  • font-variant-ligatures: normal;
    L fi ff

    Valeur par défaut. Les caractères sont restitués tels qu'ils dont définis par défaut dans la police. Certaines ligatures sont utilisées, d'autres non. En général cette valeur est équivalente à common-ligatures et contextual.

  • font-variant-ligatures: none;
    L fi ff

    Aucune ligature n'est utilisée.

  • font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures;
    L fi ff

    Activation ou désactivation des ligatures les plus communes : par exemple fi => fi

    Correspond aux styles OTF liga et clig. Reportez-vous à la propriété font-feature-settings pour une description plus complète des possibilités des polices Open Type.

  • font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures;
    L fi ff

    Activation ou désactivation des ligatures spécifiques à la police utilisée.

    Correspond au style OTF dlig.

  • font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures;
    L fi ff

    Activation ou désactivation des ligatures telles qu'elles étaient utilisées en imprimerie mécanique, comme par exemple fz => β.

    Correspond au style OTF hlig.

  • font-variant-ligatures: contextual; font-variant-ligatures: no-contextual;
    L fi ff

    Activation ou désactivation des ligatures contextuelles.

    Correspond au style OTF calt.

  • font-variant-ligatures: initial;

    La valeur initiale est normal.

  • font-variant-ligatures: unset; font-variant-ligatures: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

L'effet de la propriété font-variant-ligatures est très dépendant de la police utilisée. Observez surtout les paires de caractères fi et ff, qui sont le plus souvent traitées.

Police :
font-variant-ligatures :
La ligature est en effet une finition esthétique subtile
if   ij   IJ   fi   ff   tf   ft   jf   fj   sz   ct   st

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-family : Définit le nom de la police de caractères.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
  • @font-feature-values : Définit les variantes typographiques à utiliser.