Propriété CSS word-spacing

La propriété CSS word-spacing contrôle la quantité d'espace entre les mots dans un texte. Elle s'ajoute à (ou soustrait de) l'espace par défaut que la police place après chaque caractère espace — elle règle donc la distance entre les mots, et non la distance entre les lettres individuelles. Pour l'espacement entre les lettres, utilisez plutôt letter-spacing.

Cette page couvre la syntaxe, toutes les valeurs acceptées, le comportement des longueurs positives et négatives, les unités utilisables, les considérations d'accessibilité et des exemples exécutables.

Fonctionnement

Le navigateur part de l'espace entre les mots défini par la police. La valeur que vous donnez à word-spacing est ajoutée en plus de cette valeur de base :

Une valeur positive éloigne les mots les uns des autres.
Une valeur négative rapproche les mots (et peut les faire se chevaucher si elle est assez grande).
Le mot-clé normal réinitialise à l'espacement par défaut de la police — il équivaut à 0, mais c'est la valeur initiale de la propriété plutôt qu'une longueur littérale.

Comme word-spacing agit sur les espaces produits par les caractères espace, il n'affecte que le contenu en ligne. Il est également hérité, donc le définir sur un conteneur s'applique à tout le texte descendant sauf si un enfant le remplace.

Quand l'utiliser ?

Lisibilité — élargir légèrement les espaces entre les mots peut faciliter la lecture de titres denses ou en majuscules.
Typographie d'affichage — aérer un titre de type logo pour un rendu délibérément spacieux.
Resserrement — une petite valeur négative peut récupérer de l'espace dans une mise en page contrainte, à utiliser avec parcimonie.

Pour la plupart des textes courants, laissez la valeur à normal ; des espaces trop larges ralentissent la lecture plutôt qu'ils ne l'aident.

La propriété word-spacing peut être animée, elle peut donc être utilisée avec la propriété transition.

Info

word-spacing s'applique uniquement au contenu en ligne. Pour espacer les lettres à la place, consultez letter-spacing ; pour contrôler l'espacement produit par les espaces blancs, consultez white-space.

Valeur initiale	normal
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Héritage	Oui.
Animatable	Oui. word-spacing est animatable.
Version	CSS1
Syntaxe DOM	object.style.wordSpacing = "40px";

Syntaxe

Syntaxe de la propriété CSS word-spacing

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

Exemple de la propriété word-spacing avec la valeur "normal" :

Exemple de la propriété CSS word-spacing avec la valeur normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        word-spacing: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-spacing property example</h2>
    <p class="text">Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, l'espace entre les mots est de 20px :

Exemple de la propriété word-spacing spécifiée en "px" :

Exemple de la propriété CSS word-spacing avec une valeur de longueur (px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        word-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Word-spacing property example</h2>
    <p class="text">Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple d'une valeur word-spacing négative :

Une longueur négative rapproche les mots. Ici, l'espace est réduit de 3px :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        word-spacing: -3px;
      }
    </style>
  </head>
  <body>
    <h2>Negative word-spacing example</h2>
    <p class="text">Lorem ipsum is simply dummy text of the printing industry.</p>
  </body>
</html>

Unités

La valeur length accepte toute unité de longueur CSS :

Absolue — px, pt, cm. Fixe quelle que soit la taille de police.
Relative — em et rem. Une valeur em s'adapte à la font-size de l'élément, donc word-spacing: 0.25em maintient la proportion cohérente à mesure que le texte grandit. C'est généralement le choix le plus robuste pour une typographie responsive. Les valeurs en pourcentage ne sont pas autorisées.

Accessibilité

Selon WCAG 1.4.12 (Espacement du texte), les utilisateurs peuvent surcharger l'espacement des mots à au moins 0.16em pour la lisibilité. Évitez de coder en dur de grandes valeurs en pixels qui empêchent le texte de se reformater, et ne vous fiez jamais uniquement à l'espacement des mots pour transmettre un sens. Un espacement excessif peut également désorienter les utilisateurs souffrant de troubles cognitifs ou visuels, alors gardez les ajustements subtils pour le texte courant.

Valeurs

Valeur	Description	Essayez
normal	Définit un espacement normal entre les mots. C'est la valeur par défaut de cette propriété.	Essayez »
length	Définit un espacement supplémentaire entre les mots. Peut être spécifié en px, pt, cm, em, etc. Les valeurs négatives sont valides.	Essayez »
initial	Applique la valeur par défaut de la propriété.	Essayez »
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété CSS 'word-spacing' ?

Elle définit l'espace entre les mots dans une phrase.Elle définit l'espace entre les caractères d'un mot.Elle détermine la hauteur de ligne d'un texte.Elle définit la longueur d'un texte.Elle définit la distance entre le texte et les bords gauche ou droit de son conteneur.