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

Syntaxe

/* Valeurs de longueur */
/* Type <length>       */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .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>.

Syntaxe formelle

normal | <length>

Exemples

CSS

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

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>

Résultat

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

Spécification État Commentaires
CSS Text Module Level 3
La définition de 'letter-spacing' dans cette spécification.
Version de travail Aucune modification.
CSS Transitions
La définition de 'letter-spacing' dans cette spécification.
Version de travail letter-spacing peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'letter-spacing' dans cette spécification.
Recommendation Aucune modification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'letter-spacing' dans cette spécification.
Recommendation Définition initiale pour SVG.
CSS Level 1
La définition de 'letter-spacing' dans cette spécification.
Recommendation Définition initiale.

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéeune valeur optimale consistant en une longueur absolue ou normal
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
SVG supportChrome Support complet OuiEdge ? Firefox Aucun support NonIE ? Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, hugo42, teoli, FredB
Dernière mise à jour par : SphinxKnight,