Propriété CSS letter-spacing

La propriété CSS letter-spacing contrôle l'espacement horizontal (connu sous le nom de tracking) entre les caractères d'un texte. Elle ajoute de l'espace en plus de l'espacement par défaut qu'une police fournit déjà, sans le remplacer.

Elle est particulièrement utile pour affiner les titres, les étiquettes en majuscules et les textes de type logo où le tracking par défaut semble trop serré ou trop large. Pour les longs paragraphes de texte courant, laissez la valeur à normal — même de petits ajustements nuisent à la lisibilité.

letter-spacing accepte une valeur <length> (px, em, rem, etc.) ou le mot-clé normal. Les valeurs de longueur peuvent être négatives, ce qui rapproche les caractères. Comme la valeur est une longueur (et non un ratio), utiliser em est pratique : l'espacement s'adapte alors à la taille de police de l'élément.

La propriété est animable, ce qui permet à l'espacement de varier progressivement lorsqu'une transition est définie.

Info

La vitesse de transition est spécifiée par la propriété animation-timing-function.

Valeur initiale	normal
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animable	Oui.
Version	CSS1
Syntaxe DOM	object.style.letterSpacing = "5px";

Syntaxe

Syntaxe de la propriété CSS letter-spacing

letter-spacing: normal | length | initial | inherit;

Exemple de la propriété letter-spacing :

Exemple de la propriété CSS letter-spacing avec des valeurs normales et négatives

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        letter-spacing: normal;
      }
      .spacing {
        letter-spacing: 4px;
      }
      .spacing-negative {
        letter-spacing: -4px;
      }
    </style>
  </head>
  <body>
    <h2>Letter-spacing property example</h2>
    <p>This is a paragraph.</p>
    <p class="spacing">This is a paragraph.</p>
    <p class="spacing-negative">This is a paragraph.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple ci-dessus, le premier paragraphe utilise l'espacement normal par défaut, le deuxième définit letter-spacing: 4px (les caractères sont écartés) et le troisième utilise une valeur négative, -4px (les caractères sont rapprochés, pouvant même se chevaucher).

Dans l'exemple suivant, letter-spacing est combiné avec la propriété transition. Survolez le texte pour voir l'espacement s'animer.

Exemple de la propriété letter-spacing avec la propriété transition :

Exemple de la propriété CSS letter-spacing avec des valeurs normales et en em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #666;
        font-size: 1em;
        font-family: Roboto, Helvetica Sans-serif;
      }
      .example1 {
        background-color: #666;
        color: #eee;
        padding: 1em;
        letter-spacing: .5em;
        -webkit-transition: letter-spacing .5s ease;
        transition: letter-spacing .5s ease;
      }
      .example1:hover {
        letter-spacing: normal;
      }
      .example2 {
        background-color: #eee;
        color: #666;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <h2>Letter-spacing property example</h2>
    <div class="example1">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
      </p>
      <div class="example2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
      </div>
    </div>
  </body>
</html>

Essayez vous-même »

Quand utiliser letter-spacing

Titres et étiquettes en majuscules. Les textes en capitales sont souvent trop serrés dans la plupart des polices ; ajouter un espacement de 0.05em–0.1em améliore la lisibilité et donne un aspect soigné et « designé ».
Petites capitales et acronymes. Un léger espacement supplémentaire sépare les glyphes capitaux denses.
Effets au survol et au focus. La propriété étant animable, une transition de l'espacement crée un effet de révélation subtil sur les liens et les boutons.
À éviter pour le texte courant. Espacer les paragraphes de texte ralentit la lecture. Laissez le texte long à normal.

Informations complémentaires

Les navigateurs modernes prennent entièrement en charge les valeurs sous-pixel (fractionnaires) telles que 0.5px.
Les valeurs négatives réduisent l'espacement et peuvent faire se chevaucher les caractères — utile pour les titres de type logo serrés, mais à tester soigneusement.
Utiliser em fait varier l'espacement avec le font-size de l'élément ; utiliser px le maintient fixe quelle que soit la taille de police.
letter-spacing est hérité, de sorte que les éléments enfants récupèrent la valeur sauf s'ils la réinitialisent à normal.
Cette propriété contrôle l'espacement entre les caractères individuels ; pour espacer des mots entiers, utilisez word-spacing.

Valeurs

Valeur	Description	Essayer
normal	Indique qu'il n'y aura pas d'espacement supplémentaire entre les caractères. C'est la valeur par défaut de cette propriété.	Essayer »
length	Définit un espace supplémentaire entre les caractères. Les valeurs négatives sont autorisées.	Essayer »
initial	Force la propriété à utiliser sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Exercice

Pratique

Quelle est la fonction de la propriété 'letter-spacing' en CSS ?

Elle change la couleur du texte.Elle ajuste l'espace entre les lettres.Elle masque le texte avec une image.Elle ajuste la hauteur de ligne du texte.Elle contrôle l'indentation du texte.