letter-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propriété letter-spacing définit l'interlettre utilisée pour les caractères qui composent le texte.

Exemple interactif

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: -1px;

<section id="default-example">
  <p id="example-element">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: Amstelvar;
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: Amstelvar;
}

Syntaxe

css

/* Valeurs de longueur */
/* Type <length>       */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/* Valeur avec mot-clé */
letter-spacing: normal;

/* Valeurs globales */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

Valeurs

normal: L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.
<length>: Cette valeur indique l'espace ajouté à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page <length>.

Définition formelle

Valeur initiale	`normal`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	une valeur optimale consistant en une longueur absolue ou `normal`
Type d'animation	une longueur

Syntaxe formelle

letter-spacing = 
  normal    |
  <length>

Exemples

CSS

css

.premier {
  letter-spacing: 0.4em;
}
.deuxieme {
  letter-spacing: 1em;
}
.troisieme {
  letter-spacing: -0.05em;
}
.quatrieme {
  letter-spacing: 6px;
}

HTML

html

<p class="premier">Et voici l'interlettre</p>
<p class="deuxieme">Et voici l'interlettre</p>
<p class="troisieme">Et voici l'interlettre</p>
<p class="quatrieme">Et voici l'interlettre</p>

Utiliser une valeur trop grande (positive ou négative) pour letter-spacing rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.

L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.

Spécifications

Specification
CSS Text Module Level 3 # letter-spacing-property
Scalable Vector Graphics (SVG) 2 # LetterSpacingProperty

Compatibilité des navigateurs

Voir aussi

font-kerning