Propriété CSS text-rendering

La propriété CSS text-rendering indique au moteur de rendu du navigateur ce qu'il doit optimiser lors du dessin du texte : la vitesse brute, la meilleure lisibilité possible ou la précision géométrique. En pratique, il s'agit d'un indice qui vous permet d'activer ou de désactiver des fonctionnalités typographiques comme le crénage (ajustement de l'espace entre certaines paires de lettres) et les ligatures (combinaison de caractères comme fi en un seul glyphe).

Cette page explique ce que fait chaque valeur, quand il est pertinent de l'utiliser, les pièges à éviter et des exemples exécutables que vous pouvez comparer côte à côte.

Quand l'utiliser ?

Pour la plupart des pages, vous n'avez jamais besoin de text-rendering — la valeur auto fait déjà un travail raisonnable. On y recourt dans deux situations :

Texte large et prominent (titres, textes hero, logotypes) où un bon crénage et des ligatures améliorent visiblement l'apparence. optimizeLegibility est la valeur pour ce cas.
Pages longues et sensibles aux performances avec beaucoup de texte sur des appareils peu puissants, où vous souhaitez éviter le travail typographique supplémentaire. C'est le rôle de optimizeSpeed.

La propriété text-rendering dispose de quatre valeurs de mots-clés :

auto — le navigateur décide (valeur par défaut).
optimizeSpeed — favorise la vitesse de dessin ; le crénage et les ligatures sont désactivés.
optimizeLegibility — favorise la lisibilité ; le crénage et les ligatures sont activés.
geometricPrecision — favorise la précision géométrique pour que le texte puisse être mis à l'échelle en douceur.

Lorsque text-rendering est défini sur optimizeLegibility, le navigateur donne la priorité à la lisibilité en activant le crénage et les ligatures. La contrepartie est la performance : sur une page contenant une grande quantité de texte, forcer la lisibilité peut ralentir sensiblement le rendu, donc appliquez-le de manière sélective plutôt qu'à body.

Si vous souhaitez un contrôle précis sur des fonctionnalités typographiques individuelles plutôt qu'un indice général, utilisez les propriétés dédiées font-kerning, font-variant-ligatures ou font-feature-settings.

La propriété text-rendering est née dans SVG mais est désormais incluse dans les spécifications CSS Text Module Level 3 et Level 4. Les navigateurs basés sur Gecko (Firefox) et WebKit/Blink (Safari, Chrome) permettent de l'appliquer au contenu HTML via CSS. Comme ce n'est pas une propriété CSS standardisée partout, traitez-la comme une amélioration progressive : la page doit continuer à s'afficher correctement même si le navigateur l'ignore.

Valeur initiale	auto
S'applique à	Les éléments de texte.
Héritée	Oui.
Animable	Oui.
Version	Scalable Vector Graphics (SVG) 1.1
Syntaxe DOM	object.style.textRendering = "optimizeLegibility";

Syntaxe

Valeurs CSS de text-rendering

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;

Exemple de la propriété text-rendering :

Exemple de code CSS text-rendering

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      hr {
        margin: 60px 0;
      }
      table {
        table-layout: fixed;
        padding: .3em;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        margin-bottom: 1em;
      }
      td {
        padding: 15px;
        border: 1px solid #eee;
      }
      h3 {
        font-size: 5em;
        line-height: 1;
        font-family: sans-serif;
      }
      .uppercase {
        text-transform: uppercase;
      }
      .italic {
        font-style: italic;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .optimizeLegibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <h2>Text-rendering example</h2>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="uppercase">LOREM</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility uppercase">LOREM</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3>Ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility">Ipsum</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="italic">lorem ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility italic">lorem ipsum</h3>
        </td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

La différence entre "optimizeSpeed" et "optimizeLegibility"

L'exemple ci-dessous illustre la différence entre les valeurs optimizeSpeed et optimizeLegibility. L'effet le plus visible concerne les paires de lettres qui bénéficient du crénage et des ligatures (comme AV, Wa ou fi). Gardez à l'esprit que le résultat peut varier selon les navigateurs, et sur un texte qui s'affiche déjà bien, vous pouvez ne voir aucun changement visible :

Exemple de la propriété text-rendering avec les valeurs "optimizeSpeed" et "optimizeLegibility" :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 1.5em;
        color: #777777;
      }
      .optimize-speed {
        text-rendering: optimizeSpeed;
      }
      .optimize-legibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <p class="optimize-speed">AVADA Waffle — fi fl ffi (optimizeSpeed)</p>
    <p class="optimize-legibility">AVADA Waffle — fi fl ffi (optimizeLegibility)</p>
  </body>
</html>

Essayez vous-même »

Points de vigilance

C'est un indice, pas une garantie. Les navigateurs peuvent interpréter ou ignorer text-rendering, et auto active déjà la lisibilité pour les grands textes dans certains moteurs. Ne vous en remettez pas à cette propriété pour des résultats critiques pour la mise en page.
Coût de performance sur les longs textes. optimizeLegibility sur un grand bloc de texte peut ralentir le rendu et même provoquer un flash visible au premier affichage. Appliquez-le à des éléments spécifiques (titres, courtes étiquettes) plutôt qu'à body ou *.
Elle est héritée. La définir sur un parent s'applique à tous les descendants, ce qui explique exactement pourquoi un body { text-rendering: optimizeLegibility; } général est risqué sur les pages à contenu textuel dense.
Préférez les propriétés standard quand c'est possible. Pour le crénage seul ou les ligatures seules, font-kerning et font-variant-ligatures sont mieux spécifiées et plus prévisibles.

Valeurs

Valeur	Description
auto	Le navigateur fait des suppositions sur le moment d'optimiser la vitesse, la lisibilité et la précision géométrique lors du dessin du texte. Cette valeur est interprétée différemment selon les navigateurs.
optimizeSpeed	Indique que le navigateur doit privilégier la vitesse de rendu par rapport à la lisibilité et à la précision géométrique lors du dessin du texte. Le crénage et les ligatures sont désactivés.
optimizeLegibility	Indique que le navigateur doit privilégier la lisibilité par rapport à la vitesse de rendu et à la précision géométrique.
geometricPrecision	Indique que le navigateur doit privilégier la précision par rapport à la vitesse de rendu et à la lisibilité.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite de la propriété de son élément parent.

Propriétés associées

Si vous affinez la typographie, ces propriétés vous offrent un contrôle plus direct que l'indice général text-rendering : font-kerning, font-variant-ligatures, font-feature-settings, font-family et letter-spacing.

Pratique

La valeur geometricPrecision de la propriété text-rendering indique

que le navigateur doit privilégier la lisibilité par rapport à la vitesse de rendu et à la précision géométrique.que le navigateur doit privilégier la vitesse de rendu par rapport à la lisibilité et à la précision géométrique lors du dessin du texte.que le navigateur doit privilégier la précision par rapport à la vitesse de rendu et à la lisibilité.