Propriété CSS letter-spacing

La propriété CSS letter-spacing permet de définir les espaces entre les lettres/caractères dans un texte.

Les valeurs supportées par letter-spacing comprennent les valeurs de police rélative (em, rem), les valeurs de parent rélatif (percentage), les valeurs absolues (px) et la propriété normal, qui réinitialise la police par défaut.

La propriété letter-spacing supporte les valeurs négatives.

La propriété letter-spacing est transitionable donc l'espacement sera changer doucement si une transition est définie.

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

Valeur initiale	normal
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Oui.
Animable	Oui.
Version	CSS1
Syntaxe DOM	object.style.letterSpacing = "5px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      letter-spacing: normal;
      }
      .spacing {
      letter-spacing: 4px;
      }
      .spacing-negative { 
      letter-spacing: -4px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété letter-spacing</h2>
    <p>C'est un paragraphe.</p>
    <p class="spacing">C'est un paragraphe.</p>
    <p class="spacing-negative">C'est un paragraphe.</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, le première est un paragraph normal, pour le deuxième paragraphe, la propriété letter-spacing est définie à 4px, et pour le troisième paragraphe, on a définie une valeur négative (-4px).

Voici un autre exemple, où la propriété letter-spacing est utilisée avec la propriété transition. Vous devez passer votre souris sur le texte pour voir la transition.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété letter-spacing </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!

Valeurs

Valeur	Description
normal	Il n'y auront pas d'espaces supplémentaires entre les caractères. C'est la valeur initiale de cette propriété.
length	Définit un espace supplémentaire entre les caractères. Les valeurs négatives sont autorisées.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.