letter-spacing

Exemple interactif

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: 30%;

letter-spacing: -1px;

<section id="default-example">
  <p id="example-element">
    Il y a autant de boue dans les rues que si les eaux venaient à peine de se
    retirer de la surface de la terre, et il ne serait pas étonnant de croiser
    un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un lézard
    éléphantesque dans 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", serif;
}

Syntaxe

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

/* Valeurs de type <length-percentage> */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: -0.5px;
letter-spacing: 50%;

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

Valeurs

normal

L'espacement normal des lettres pour la police courante. Contrairement à une valeur de 0, ce mot-clé permet à l'agent utilisateur de modifier l'espace entre les caractères afin de justifier le texte.

<length-percentage>

Définit un espace supplémentaire entre les caractères en plus de l'espace par défaut entre les caractères. Les valeurs peuvent être négatives, mais il peut exister des limites propres à chaque implémentation. Les agents utilisateur ne peuvent pas augmenter ou diminuer davantage l'espace entre les caractères afin de justifier le texte.

Les valeurs en pourcentage sont calculées par rapport à la largeur du caractère espace de la police appliquée au texte.

Accessibilité

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 peuvent se chevaucher 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.

• Explications de MDN sur les WCAG, règle 1.4
• Comprendre le critère de succès 1.4.8 | W3C Understanding WCAG 2.0 ^(angl.)

Problèmes d'internationalisation

Certaines langues écrites ne doivent pas avoir d'espacement entre les lettres. Par exemple, les langues utilisant l'alphabet arabe attendent que les lettres restent visuellement connectées, comme dans l'exemple suivant. Appliquer un espacement entre les lettres peut rendre le texte visuellement incorrect.

<p lang="ar" dir="rtl">شسيبتنمك</p>

p {
  font-size: 3em;
  margin-inline-start: 5px;
}

Définition formelle

Syntaxe formelle

letter-spacing = 
  normal               |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

Exemples

Définir l'espacement des lettres avec des valeurs de longueur

Cet exemple montre plusieurs paragraphes avec différentes valeurs de letter-spacing définies en longueur, ce qui permet de les comparer.

HTML

<p class="normal">Et voici l'interlettre</p>
<p class="large-em">Et voici l'interlettre</p>
<p class="tres-large-em">Et voici l'interlettre</p>
<p class="court-em">Et voici l'interlettre</p>
<p class="large-px">Et voici l'interlettre</p>

CSS

Notre CSS applique une valeur différente de letter-spacing à chaque paragraphe.

.normal {
  letter-spacing: normal;
}
.large-em {
  letter-spacing: 0.4em;
}
.tres-large-em {
  letter-spacing: 1em;
}
.court-em {
  letter-spacing: -0.05em;
}
.large-px {
  letter-spacing: 6px;
}

Résultat

Comparer l'espacement des lettres défini avec des longueurs et des pourcentages

Cet exemple montre que les valeurs de letter-spacing en pourcentage sont utiles pour la mise en page réactive du texte.

Le code affiche plusieurs paragraphes ayant le même letter-spacing appliqué à du texte avec une taille de police croissante. Nous fournissons une fonctionnalité permettant de basculer entre une valeur de letter-spacing en longueur et une valeur en pourcentage, afin que vous puissiez observer les qualités réactives de l'utilisation d'une valeur en pourcentage.

HTML

Le HTML contient plusieurs éléments HTML <p> contenant du texte, ainsi qu'un <input type="checkbox"> que nous utiliserons pour basculer entre une valeur de letter-spacing en longueur et une valeur en pourcentage.

<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
  <label for="ls-toggle">
    Basculer <code>letter-spacing</code> (désactivé&nbsp;: <code>8px</code>,
    activé&nbsp;: <code>12%</code>)
  </label>
  <input type="checkbox" id="ls-toggle" />
</form>

CSS

Notre CSS commence par appliquer des valeurs de font-size croissantes à chaque paragraphe successif :

html {
  font-family: Arial, Helvetica, sans-serif;
}

.x-small {
  font-size: 0.8em;
}

.small {
  font-size: 1.3em;
}

.medium {
  font-size: 2em;
}

.large {
  font-size: 3em;
}

.x-large {
  font-size: 3.5em;
}

Nous appliquons une valeur de letter-spacing de 8px à tous les paragraphes par défaut. Lorsque la case à cocher est cochée, nous changeons cependant la valeur de letter-spacing à 12% :

p {
  letter-spacing: 8px;
}

p:has(~ form > input:checked) {
  letter-spacing: 12%;
}

Résultat

Le rendu final ressemble à ceci :

Tout d'abord, notez comment la valeur initiale de l'espacement des lettres en longueur semble correcte lorsqu'elle est appliquée aux tailles de police plus grandes, mais qu'elle ne rend pas bien sur les tailles de police plus petites. Maintenant, cochez la case, et notez comment l'espacement des lettres en pourcentage semble approprié sur toutes les lignes, car il s'adapte à la taille de la police.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété font-kerning
• La propriété word-spacing
• L'attribut SVG letter-spacing