Propriété CSS letter-spacing

La propriété CSS letter-spacing permet de spécifier l'espacement entre les lettres/caractères dans un texte.

Les valeurs prises en charge par letter-spacing incluent les valeurs relatives au parent (pourcentage), les valeurs relatives à la police (em, rem), les valeurs absolues (px) et la valeur normal, qui réinitialise l'espacement à la valeur par défaut de la police.

La propriété letter-spacing prend en charge les valeurs négatives.

La propriété letter-spacing est transitable, de sorte que les modifications d'espacement s'effectuent en douceur lorsqu'une transition est définie.

INFO

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

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

Syntaxe

Syntaxe de la propriété CSS letter-spacing

css

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

html

<!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>

Try it Yourself »

Résultat

Propriété letter-spacing CSS

Dans l'exemple ci-dessus, le premier paragraphe est normal, pour le deuxième paragraphe, letter-spacing est défini à 4px, et pour le troisième paragraphe, une valeur négative est définie (-4px).

Dans l'exemple ci-dessous, letter-spacing est utilisé avec la propriété transition. Vous devez survoler le texte pour voir la transition.

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 em

html

<!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>

Try it Yourself »

Informations complémentaires

Les navigateurs modernes prennent entièrement en charge les valeurs sous-pixellisées pour letter-spacing.
Appliquer letter-spacing aux lettres minuscules n'est généralement pas recommandé, car cela peut réduire la lisibilité en raison d'un poids visuel inégal.
Vous pouvez animer cette propriété à l'aide des transitions CSS.
Remarque : Cette propriété contrôle l'espacement entre les caractères individuels, contrairement à word-spacing, qui contrôle l'espacement entre les mots.

Valeurs

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

Pratique

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

Elle modifie la couleur du texte.Elle ajuste l'espacement 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.

Propriété CSS letter-spacing ​

Syntaxe ​

Exemple de la propriété letter-spacing : ​

Résultat ​

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

Informations complémentaires ​

Valeurs ​

Pratique ​